Open Graph Preview Guide: Fix Your Social Share Cards
A broken social share card is one of the most common and most overlooked conversion killers on the web. When someone shares your URL on LinkedIn or Facebook and the card shows no image, a wrong title, or a generic description, click-through rates drop sharply. The good news is that fixing Open Graph issues is straightforward once you can see what is wrong. This guide walks you through the diagnostic process, shows you what a complete OG tag setup looks like, and explains how to fix the most common problems.
How to Diagnose a Broken Social Share Card
The first step in fixing a broken social share card is seeing exactly what is broken. Guessing based on what you think you added to the page rarely works — the actual rendered output is what matters. Paste your URL into the OG Preview tool. The tool fetches your page and renders simulated link cards for Twitter/X, Facebook, LinkedIn, WhatsApp, and iMessage. Look at each preview and identify every element that is missing, wrong, or poorly formatted. Common issues you will spot immediately: a grey placeholder where the image should be (og:image missing or URL broken), the page's file name showing as the title instead of a real heading (og:title not set), an empty description field (og:description not set), or the wrong image from the page (og:image pointing to a logo instead of a hero image). If the tool shows no data at all, your page may be blocking crawlers. Check your robots.txt file to make sure Googlebot and social crawlers are not disallowed from accessing that URL. Also confirm the page returns a 200 HTTP status code — a redirect chain or a 404 will prevent the tags from being read. For each issue you identify, note which tag is responsible. The OG Preview tool should display the raw tag values it found alongside each card preview, so you can see exactly what it read from your page. Once you have a complete list of what needs fixing, move to your page source. Whether you are using WordPress, Webflow, a static site generator, or hand-coded HTML, the fix involves editing the meta tags in the document head.
The Complete Open Graph Tag Setup
A fully configured page needs five core Open Graph tags and three Twitter Card tags. Here is exactly what to add to your HTML document head. Open Graph tags: og:title — The title of your page as it will appear in the share card. Keep it under 60 characters. Example: <meta property="og:title" content="Free Online Image Compressor — No Upload Needed" /> og:description — A compelling one to two sentence summary. Keep it under 155 characters. Example: <meta property="og:description" content="Compress JPEG and PNG files directly in your browser. No upload, no account, 100% private." /> og:image — The full absolute URL of your preview image. Must be HTTPS. Ideal size: 1200×630 pixels. Example: <meta property="og:image" content="https://yoursite.com/images/og-image-home.jpg" /> og:url — The canonical URL of the page. Example: <meta property="og:url" content="https://yoursite.com/tools/image-compressor" /> og:type — Usually website or article. Example: <meta property="og:type" content="website" /> Twitter Card tags: twitter:card — Set to summary_large_image for a full-width image card. Example: <meta name="twitter:card" content="summary_large_image" /> twitter:title and twitter:description — Can mirror your OG values or be tailored for Twitter's audience. With all eight tags in place, run the OG Preview tool again. All platform cards should now show a proper image, a formatted title, and a meaningful description. If any tag is still wrong, re-check the page source — some CMS plugins override meta tags set elsewhere in the template.
The Most Common OG Fixes That Take Under 5 Minutes
Most social card problems fall into five categories, and all of them are quick to fix once you know where to look. Fix 1: Image not loading. Check that the og:image URL is absolute (starts with https://), the image file exists at that path, the server is not blocking image hotlinking, and the image is not behind a login or CDN signed URL. Test the image URL directly in a browser to confirm it loads. Fix 2: Wrong title showing. If the title showing in the card is not the one you expected, check your page source for duplicate og:title tags. Some WordPress SEO plugins (Yoast, Rank Math) and themes both add og:title, and the later one wins. Disable the theme's built-in OG output if you are using a dedicated SEO plugin. Fix 3: Description is empty or generic. If your og:description is missing, platforms fall back to the first body text they find on the page — which might be navigation link text, a cookie banner, or 'JavaScript must be enabled.' Always set og:description explicitly. Fix 4: Image is the wrong size or cropped badly. If your og:image is square or portrait and the card crops it awkwardly, create a dedicated 1200×630 pixel version for sharing. This does not need to be the same image used in your page layout — it is only shown in link cards. Fix 5: Old cached preview. After fixing tags, social platforms may still show the old cached data. Use the Facebook Sharing Debugger and Twitter Card Validator to invalidate the cache and force a fresh fetch of your updated tags.
Testing Your Fix Across All Platforms
After making changes, do not assume everything is correct — test each platform systematically before you distribute the URL in marketing materials. Start with the OG Preview tool for a quick full-platform check. This tells you whether the tags are technically correct and how each card will render. For Twitter/X, use the official Twitter Card Validator at cards-dev.twitter.com/validator. This tool shows the actual card Twitter will display and tells you if there are any validation errors. It also resets Twitter's cache for that URL. For Facebook and Instagram, use the Facebook Sharing Debugger at developers.facebook.com/tools/debug/. Paste the URL and click Fetch New Information to force a fresh crawl. The debugger shows you every OG tag it found and flags any warnings such as missing recommended tags or image size issues. For LinkedIn, use the LinkedIn Post Inspector at linkedin.com/post-inspector/. LinkedIn caches OG data separately from Facebook, so even if Facebook looks fine you may need to refresh the LinkedIn cache independently. For WhatsApp and iMessage, the best test is to send yourself the URL in a message. Both platforms respect og:title, og:description, and og:image. If the desktop sharing debuggers show correct data but WhatsApp still shows old data, ask a contact to send the link from a fresh thread. Document your test results with screenshots. If you are managing OG tags for a client or a team, a before-and-after screenshot set is the clearest way to show the improvement and confirm the fix is complete.
Frequently Asked Questions
- Do I need to add separate tags for every social network?
- Not entirely. Facebook, LinkedIn, and WhatsApp all read the standard Open Graph og: tags, so one set of OG tags covers all three. Twitter reads its own twitter: tags first and falls back to OG tags if the Twitter-specific ones are absent. In practice, you should set both the OG tags and add twitter:card to unlock Twitter's large image format. Pinterest also reads OG tags. The only platforms with completely separate systems are those that use their own proprietary formats, which are rare for standard link sharing.
- Can I set different OG titles for different social networks?
- Yes, partially. You can set twitter:title to a different value than og:title, which means Twitter will show a different headline than Facebook or LinkedIn. However, you cannot set separate titles for Facebook vs LinkedIn — both read og:title. If you want platform-specific titles for every network, you would need to use a dynamic meta tag injection system that serves different HTML to different crawler user agents, which is complex and generally not recommended.
- My OG tags look correct in the source but the preview is still broken. What now?
- A few things can cause this. First, check whether your tags are in a JavaScript-rendered section of the page — social crawlers often do not execute JavaScript, so tags added by client-side scripts will not be seen. All OG meta tags must be in the static server-rendered HTML. Second, check for a canonical URL mismatch — if og:url points to a different URL than the one you tested, the crawler may be fetching the wrong page. Third, clear the platform caches using the official debugging tools before retesting.