How to Debug Open Graph Tags for Free
Debugging Open Graph tags is a skill every web developer and content marketer should have. When a shared link looks wrong on social media, the problem is almost always in the OG meta tags — but diagnosing exactly which tag is broken and why requires knowing which tools to use and in what order. This guide covers a complete free debugging workflow that takes your shared link from broken to perfect, using nothing but free browser-based tools.
Your Free OG Debugging Toolkit
You do not need paid tools to debug Open Graph tags. Here is the complete free toolkit. OG Preview tool — A browser-based tool that fetches any URL and renders simulated link card previews for Twitter/X, Facebook, LinkedIn, WhatsApp, and iMessage. This is your starting point for any OG debugging session. It shows you the rendered cards and the raw tag values it found — making it easy to spot missing or incorrect tags without reading HTML source. Facebook Sharing Debugger (developers.facebook.com/tools/debug/) — The official Facebook tool. Requires a Facebook account but is completely free. It shows every OG tag found on the page, flags warnings for missing recommended tags, and lets you force a cache refresh. It also shows the image preview so you can confirm the image will display correctly. Twitter Card Validator (cards-dev.twitter.com/validator) — The official Twitter tool. Shows the card type Twitter will render and any validation errors. Also resets Twitter's cache. LinkedIn Post Inspector (linkedin.com/post-inspector/) — LinkedIn's official tool. Shows the OG data LinkedIn read and lets you refresh the cache. Browser developer tools — Your browser's built-in developer tools (F12) let you inspect the page source for meta tags. Use the Elements panel to search for og: tags, or the Network panel to check if the og:image URL returns a 200 status code with the correct content type. HTTP header checker — A free tool like httpstatus.io lets you check whether your og:image URL returns a 200 status code, whether there are unexpected redirects, and what content-type header is served. Incorrect content-type can cause social crawlers to skip the image.
Step-by-Step Debugging Workflow
Follow this sequence to systematically find and fix any OG issue. Step 1 — Visual inspection with OG Preview tool. Paste the URL into the OG Preview tool and look at all four platform previews. Note everything that looks wrong: missing image, wrong title, empty description, incorrect card type on Twitter. Step 2 — Read the raw tag values. The OG Preview tool shows the actual tag values it read from your page alongside the card previews. Compare these values against what you expect. If og:title shows 'Home' instead of your page title, that is the tag to fix. If og:image shows a relative URL like /images/og.jpg instead of an absolute https:// URL, that is likely why the image is not loading. Step 3 — Verify the image URL. Copy the og:image URL and open it in a new browser tab. If it loads, the URL is valid. If you get a 404, the file is missing. If you get a 403, the server is blocking external access. If it redirects to a different URL, the crawler may not follow the redirect. Step 4 — Check the page source for duplicate tags. View the page's HTML source (right-click > View Page Source) and search for og:image. If you see more than one og:image tag, only the last one counts — but social crawlers may behave differently. Ensure each tag appears exactly once. Step 5 — Validate with platform tools. Run Facebook Sharing Debugger and Twitter Card Validator on the URL. These tools surface warnings you might miss by reading the source manually. Step 6 — Test after fixing. After making changes, re-run all tools. For platforms with caches, use the official debugger tools to force a fresh fetch. Run the OG Preview tool once more to confirm the final state.
Common Debug Scenarios and Solutions
These are the most frequently encountered OG debugging scenarios and their resolutions. Scenario: OG Preview shows correct data but Facebook shows old card. Solution: Facebook is serving a cached version. Use the Facebook Sharing Debugger and click 'Fetch New Information' twice — sometimes one fetch is not enough to clear a stubborn cache. Scenario: og:image is set correctly but shows as broken image in preview. Solution: Check whether the image URL requires authentication, is behind a VPN, or is on an IP-restricted server. Social crawlers fetch images from their own servers, not from the user's network. Also check if the server sends a noindex header or Content-Security-Policy that blocks external image requests. Scenario: Tags look correct in view-source but OG Preview shows no tags. Solution: Your tags are likely being injected by JavaScript after page load. Social crawlers do not execute JavaScript. All OG tags must be in the server-rendered HTML. If you are using a React/Vue/Angular app, implement server-side rendering (SSR) or use a pre-rendering service. Scenario: Title and description are correct but the wrong image appears. Solution: You likely have multiple og:image tags. One may be in the page template (perhaps a default logo image) and another in the page-specific content. The last one in the source wins for most crawlers. Find and remove the unintended duplicate. Scenario: Everything appears correct in all tools but the live share still looks wrong. Solution: The share may have been cached before you fixed the tags. Use both Facebook and Twitter debugger tools to confirm the cache is cleared. Then share the URL in a new post — not a repost or share of the original broken post, which retains the original cached card data.
Building a Pre-Publish OG Checklist
The best debugging is preventive. Adding an OG verification step to your publishing workflow catches problems before anyone shares a broken link. Here is a simple pre-publish checklist that takes under two minutes per page. 1. Paste the URL into the OG Preview tool and confirm: image loads and looks good, title is correct and under 60 characters, description is meaningful and under 155 characters, Twitter card shows as large image (not small summary). 2. Open the page source and search for og:title. Confirm it appears exactly once and shows the right value. 3. Open the og:image URL in a browser tab. Confirm it loads with a 200 status. 4. For important pages (homepage, landing pages, key blog posts), also run the Facebook Sharing Debugger and Twitter Card Validator. For CMS-based sites, consider adding an OG preview display directly in your editorial interface. WordPress plugins like Yoast SEO show a preview in the post editor. This lets content editors check the social card without needing to know about the external debugging tools. For automated quality assurance, tools like Screaming Frog can crawl your site and flag pages with missing, duplicate, or oversized OG tags across your entire URL inventory — useful for large sites where manual checking of every page is impractical.
Frequently Asked Questions
- How long does it take for Facebook to update after I fix my OG tags?
- Facebook's cache can hold stale OG data for up to 30 days under normal circumstances. The fastest way to force an update is to use the Facebook Sharing Debugger at developers.facebook.com/tools/debug/ and click 'Fetch New Information'. This immediately re-crawls the URL and updates Facebook's cache. After doing this, new shares of the URL will use the updated data. Existing posts that shared the old URL will continue showing the old card — Facebook does not retroactively update card previews on published posts.
- My page works fine on HTTP but OG tags fail on HTTPS. What is wrong?
- The most common cause is that your og:image URL still points to an HTTP address after migrating to HTTPS. Social crawlers require HTTPS for images. Check that og:image uses https:// and that the image is accessible at that HTTPS URL. Also check whether your SSL certificate is valid and not generating a browser warning — some crawlers treat certificate errors as access failures. Additionally, verify your server does not redirect HTTPS requests for images through a chain that social crawlers do not follow.
- Can I debug OG tags for a page that is not yet live?
- Not easily with external tools — the Facebook Sharing Debugger and Twitter Card Validator require a publicly accessible URL. However, you can inspect your OG tags directly in the HTML source of your page before it goes live. Check that all required og: tags are present, the og:image URL will be valid once the page is live, and there are no duplicate tags. You can also use a staging environment with a publicly accessible URL for full debugging tool access before the page is promoted to production.