Why your OpenGraph tags break on LinkedIn (and how to actually fix it)
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 <head> , and…
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:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="root">
</div>
<script src="/src/main.jsx"></script>
</body>
</html>
The 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:
1. 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.
2. A crawl-back image engine: This API accepts a single tag in your HTML, such as <meta property="og:image" content="https://api.ogcraft.dev/api/v1/extract?template=modern-blog&url=https://mysite.com/blog/my-post">. 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.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
