{
"id": 6942967,
"title": "Why your OpenGraph tags break on LinkedIn (and how to actually fix it)",
"url": "https://urgent.news/2026/09/12/why-your-opengraph-tags-break-on-linkedin-and-how-to-actually-fix-it",
"topic": "tech",
"section": "Tech",
"published": "2026-09-12T15:11:47.000Z",
"source": {
"name": "Dev.to",
"slug": "dev-to",
"url": "https://dev.to/julien_rousseau_29172bb6c/why-your-opengraph-tags-break-on-linkedin-and-how-to-actually-fix-it-32gf"
},
"original_language": "en",
"account": "Last week, a developer asked why their React app displayed an empty card when shared on LinkedIn, despite having meta tags in place. The issue stems from social media scrapers, such as Twitterbot, LinkedInBot, and Slackbot, not executing client-side JavaScript. These bots perform a simple GET request, analyze raw HTML from the server, extract the content within the head section, and terminate the connection. If you rely solely on client-side rendering like React or Vite without server-side rendering (SSR), the crawler only receives this initial markup:\n\n\n\n\nMy App\n\n\n\n
\n\n\n\n\nThe meta tags are injected post-client-side hydration, meaning by the time the crawler has finished, the necessary tags are absent. To address this, you must ensure your meta tags exist within the initial HTML. Solutions include using platforms like Next.js, Remix, Astro, or static prerendering to accomplish this. Moreover, incorporating dynamic images is crucial; manually exporting images via tools like Figma for each blog post or product page can be tedious and inefficient. Building a tool like ogcraft.dev, which offers two key functionalities, can streamline this process:\n\n1. A raw HTML visualizer: A free tool that captures strictly the initial HTML (excluding client-side JavaScript) when scraping, allowing you to preview how platforms like Twitter and LinkedIn will render your content before sharing.\n\n2. A crawl-back image engine: This API accepts a single tag in your HTML, such as . Upon invocation, the service navigates to your page, extracts your existing meta tags (title, description, author), and generates an optimized dynamic card via CDN caching. This eliminates the need for heavy, slow processes like spinning up Puppeteer instances or handling large encoded payloads.",
"summary": "Last week someone asked me why their React app showed an empty card when shared on LinkedIn, even though their tags were right there in the code. The reason is simple: social scrapers don’t execute client-side JavaScript. Twitterbot, LinkedInBot, and Slackbot aren't full browsers. They run a quick GET request, look at the raw HTML coming from your server, grab whatever is inside , and…",
"key_points": [
"LinkedIn scrapers don't execute client-side JavaScript, leading to empty cards",
"Meta tags injected post-client-side hydration, missing by the time crawler finishes",
"ogcraft.dev offers HTML visualizer and crawl-back image engine for LinkedIn optimization"
],
"editors_take": null,
"illustration": null,
"coverage": {
"outlets": 1,
"also_reported_by": []
},
"ai_generated": true,
"disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}