CardScopeGuide
Facebook link preview: Open Graph checklist
When someone shares a URL on Facebook (or other Meta surfaces that use the same scraper), Meta fetches the page, reads Open Graph tags, and caches a card. Relative images, login walls, and an un-rescraped cache are the usual reasons the preview looks empty or stuck on an old version.
CardScope loads the URL and rebuilds a preview from the tags it finds. It is not a pixel-perfect Facebook UI — Meta’s crop, type sizing, and timing are their own. Use CardScope to confirm the live tags; use Meta’s Sharing Debugger to refresh Meta’s cache.
To sketch the Facebook card before the page is live, use the free link preview mockup. It also draws X, LinkedIn, Slack, Discord, iMessage, Bluesky, Threads, Mastodon, WhatsApp, Telegram, and Microsoft Teams from the same words and image.
How Facebook / Meta builds the card
Meta’s crawler hits your permalink, reads meta tags (chiefly Open Graph), and stores a snapshot for that URL. In practice it cares about:
og:title— the headline in the card.og:description— the supporting line when shown.og:image— a publicly fetchable absolutehttps://image URL.og:url/ canonical — a stable identity so you are not multiplying cache keys.og:type— oftenwebsiteorarticle; set deliberately when you can.
Meta does not re-read your HTML on every share. View-source can look correct while Facebook still shows yesterday’s card until you force a rescrape. See clear Open Graph cache for the fix → verify → rescrape workflow across clients.
Checklist before you share
og:title— specific to the page, not only the brand name.og:description— one clear sentence that matches the content.og:image— absolutehttps://URL. Landscape ~1200×630 is a widely safe default shared with other networks.- Publicly fetchable image — no login, no signed cookie that expires for the crawler. Open the image URL in a private window; if you cannot see the file, Meta often cannot either.
- Stable permalink — one canonical URL in shares and in
og:url. - Rescrape after ship — when tags are verified, use the Meta Sharing Debugger so Facebook sees the new snapshot.
Tags that matter
| Tag / signal | Role | Practical check |
|---|---|---|
og:title |
Card headline | Specific, not brand-only |
og:description |
Supporting text | Present and matches the page |
og:image |
Preview image | Absolute https, anonymous GET returns an image |
og:image:width / height |
Hints for crop | Set when you can (~1200×630) |
og:url / canonical |
Identity / cache key | Stable permalink |
og:type |
Object type | website or article as appropriate |
fb:app_id |
App / Insights linking | Optional for a plain share card |
A minimal set
If you only set six things for Facebook-facing shares, set these:
<meta property="og:title" content="A specific title, not the brand name">
<meta property="og:description" content="One sentence that matches the page.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/permalink">
Same foundation as WhatsApp / Telegram, Slack vs Discord, and LinkedIn vs X — one solid OG set, then client-specific tools where they exist. Bluesky reads the same three tags and stores the card in the post. See Bluesky link preview. Mastodon reads the same tags too, but every server fetches the page itself. See Mastodon link preview. Reddit Help does not publish the thumbnail rules. The last public scraper reads og:image and does not use og:title as the post title. See Reddit link preview. Threads is a Meta app too; Meta documents no separate link-preview crawler for it, so the same tags and the Sharing Debugger are the place to start. See Threads link preview.
Workflow: fix → verify → rescrape
- Fix the live tags on the public permalink (absolute image, stable URL, title and description that match).
- Verify with CardScope. Paste the permalink. Confirm the tag table. If CardScope is wrong, the deploy is wrong — stop before touching Meta’s debugger.
- Rescrape with the Meta Sharing Debugger. Open the Meta Sharing Debugger, paste the same permalink, scrape, then use “Scrape Again” until the debugger shows the new tags.
- Re-share in Facebook after the debugger is current. CardScope does not clear Meta’s cache.
FAQ
Does Facebook use Open Graph?
Yes. Meta’s crawler reads Open Graph tags (og:title, og:description, og:image, og:url, and related hints) when it builds a link preview. Layout and crop are Meta’s own and are not pixel-identical to CardScope’s previews.
Why is my preview missing the image?
Relative og:image paths often break. Auth-walled, hotlink-blocked, or non-HTTPS images fail when the crawler cannot fetch them. Use an absolute https:// image URL that returns a real image to an anonymous request, then rescrape. When that happens on more than one URL, the site audit will find every page missing og:image.
Can CardScope clear Facebook’s cache?
No. CardScope shows the tags it fetched right now. To refresh Meta’s snapshot, use the Sharing Debugger after the live tags are correct — details in the clear OG cache guide.
Do I need fb:app_id for a basic card?
A solid Open Graph set is enough for most public link cards. fb:app_id matters more for app-linked features and Insights; it is optional for a plain share card.
What does a CardScope check cost?
A free check shows link-card previews in 11 apps and the fix checklist. Pro is $19 once via Stripe Checkout: unlimited checks, a 50-page site audit with a CSV, share links, and PNG export. No account. We parse HTML in memory and discard it — we do not store the page.