How to test Open Graph tags

Broken share cards are usually verification failures, not mysterious design bugs. The HTML is wrong, the image is blocked, or a platform is still serving a cached scrape. This guide is a testing order you can run the same way every time: local HTML checks first, SocialImageKit’s checker second, official Facebook and LinkedIn tools third, then network-specific caveats for X and WhatsApp.

If the image is missing everywhere, start with og:image not showing. If only one network is stale, jump to that network’s refresh steps below.

Testing principles

1. Crawlers read the first HTML response. Browser extensions and React DevTools can lie.
2. Test the exact URL string people will share (trailing slash, www, UTM params).
3. Open the image logged out in a private window.
4. Simulation ≠ live cache. A green mock preview does not clear Facebook or LinkedIn.
5. Fix HTML before re-scraping. Debuggers cannot invent tags your origin does not emit.

Generate a clean reference snippet with the Meta Tag Generator while you compare against production.

Step 1: View Source checklist

On the live URL:

1. Open View Page Source (not only the Elements panel).
2. Search for og:.
3. Confirm one of each critical tag: og:title, og:description, og:image, preferably og:url and og:type.
4. Confirm og:image is an absolute https:// URL.
5. Confirm no obvious duplicates from a theme plus an SEO plugin fighting each other.
6. For large X cards, confirm twitter:card is summary_large_image (and image tags if you set them).

Then paste the og:image URL into a new private window. You should see the file without logging in. If the image 404s, redirects to a login, or requires cookies, every social test will fail next.

Optional but useful:

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Short description of the artwork" />

Dimensions help some clients pick a large layout on first fetch. Alt should describe the image briefly.

Common View Source failures

Symptom	Likely cause
No og: tags	Wrong template, SPA client-only head, CMS SEO off
Relative image path	Missing metadataBase / absolute URL rewrite
Two different og:image values	Plugin + theme conflict
Tags only in Elements after load	Injected by JavaScript—crawlers miss them
Image URL works for you, not logged out	Auth, IP allowlist, or signed URL

When tags are structurally wrong, use OG tags repair patterns after you identify the owning system (layout, plugin, or CDN HTML).

Step 2: SocialImageKit Link Preview Checker

Paste the same share URL into the Link Preview Checker. Use it to confirm:

• Tags resolve to absolute URLs
• Title, description, and image are present
• The checker’s fetch agrees with View Source

If View Source and the checker disagree, suspect CDN or page-cache differences between your browser session and an anonymous fetch. Purge HTML caches before you blame Facebook.

Pair the checker with a visual pass in the Social Preview Simulator when you want to judge crops and type size. Treat the simulator as a design aid. It does not replace official scrapers.

Also confirm the file meets size expectations with OG image size guidance (typically ~1200×630). Design replacements in the OG Image Generator when the artwork itself is the problem.

Step 3: Facebook Sharing Debugger

When Facebook or Messenger still shows an old card:

1. Fix View Source and the image file first.
2. Open Facebook’s Sharing Debugger (walkthrough: Facebook Sharing Debugger).
3. Scrape / re-scrape the exact URL.
4. Compare the debugger’s parsed tags to your HTML.

Details and stuck-cache patterns: Facebook link preview not updating.

Remember: refreshing the scrape helps new shares. Posts that already published may keep their original card. If only the bitmap sticks, change the filename/path of og:image, not just the pixels at the same URL.

Step 4: LinkedIn Post Inspector

LinkedIn caches aggressively. After HTML is correct:

1. Sign in to LinkedIn’s Post Inspector (summary: LinkedIn Post Inspector).
2. Paste the exact share URL and Inspect.
3. Confirm title, description, and image.

Existing posts often keep the card they were created with. New shares should reflect the refreshed scrape. Full flow: LinkedIn link preview not updating.

Prefer inspecting the canonical URL you put in og:url. UTM variants can create separate cache keys. For size and crop tips, see LinkedIn OG image size and LinkedIn image sizes.

Step 5: X (Twitter) Card Validator caveats

X still benefits from explicit Twitter Card tags even when Open Graph is solid:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/ship-notes.png" />

Official X validators and cache behavior have changed over time. Practical approach:

1. Verify twitter:card and image tags in View Source.
2. Use X’s current card/debug tools when they are available for your account.
3. If the cache sticks, try a harmless URL variant only after HTML is correct—and document which string you tested.
4. Do not assume Facebook’s scrape fixed X.

Comparison of tag sets: Open Graph vs Twitter Cards.

Step 6: WhatsApp limits and honesty

WhatsApp reads Open Graph but is stricter about reachability and file weight. A card that looks perfect on Facebook can still fail in WhatsApp when the image is huge, exotic, or slow. Checklist:

1. Same absolute og:image as other networks.
2. Lean PNG/JPG—avoid oversized files.
3. Image opens logged out on mobile networks if you can test that way.
4. Re-share in a new chat after fixes; old threads may keep stale unfurls.

Deep dive: WhatsApp link preview not working and works on Facebook not WhatsApp.

WhatsApp does not offer a public “debugger” comparable to Facebook’s. Treat messenger tests as real-device checks after the HTML and file are clean.

Simulation vs live caches

Tool type	Good for	Not proof of
View Source	HTML truth	Platform caches
Link Preview Checker	Anonymous tag fetch	Facebook/LinkedIn refresh
Social Preview Simulator	Crops and layout	Live messenger behavior
Facebook Debugger	FB scrape refresh	WhatsApp / LinkedIn
LinkedIn Post Inspector	LI scrape refresh	Existing post cards
Hand-built OG artwork	Design QA	Production tag wiring

A healthy workflow: design in the OG Image Generator, wire tags, View Source, checker, then platform tools. Only then send the campaign link in Slack or WhatsApp as a final smoke test.

End-to-end test script (copy this)

1. Decide the canonical share URL (no accidental UTM for the test).
2. View Source → one absolute og:image.
3. Private-window image load.
4. Link Preview Checker.
5. Optional: Social Preview Simulator for crop sanity.
6. Facebook Sharing Debugger scrape.
7. LinkedIn Post Inspector.
8. Confirm twitter:card for X.
9. Fresh WhatsApp share if messengers matter.
10. If art changed, confirm you used a new filename, not an overwrite.

When something fails, stop and fix that layer. Do not jump to a new design tool because LinkedIn has not re-scraped yet.

Team habits that prevent false alarms

Write down the exact URL string, the time of the scrape, and a screenshot of View Source. Support threads fall apart when one person tests /blog/post and another shares /blog/post/?utm_source=email.

After deploys that touch templates or SEO plugins, spot-check three URLs: homepage, one article, one utility page. Require checker green before a launch email. If you change artwork, change the path—caches on Facebook, LinkedIn, Slack, Discord, and WhatsApp all behave better when the object URL is new.

If tags look perfect and the image still fails, treat hosting next: CDN auth, hotlink protection, geographic blocks, or cold dynamic image routes. Debuggers show what they fetched; they do not always explain your edge rules. Keep ownership of head tags documented in the repo so people know whether to edit the CMS plugin, the framework metadata export, or a static layout partial.

Staging only helps when it is publicly reachable the same way production is. Bot-blocked or auth-gated staging produces false failures that waste an afternoon.

Checklist

• View Source shows absolute og:* (and twitter:card when needed)
• Image loads logged out
• Link Preview Checker agrees with HTML
• Facebook Debugger re-scraped after fixes
• LinkedIn Post Inspector run on the exact URL
• WhatsApp tested separately if it matters
• Simulation used for design only—not as cache proof

Testing Open Graph well is boring on purpose. The crawler path is blunt: fetch HTML, read tags, fetch image, cache. Your job is to prove each step with the right tool and to stop blaming the wrong layer. Follow the order above and most “mystery” preview bugs turn into a missing slash, a stale CDN HTML page, or a cache that simply had not been refreshed yet.