Skip to content
On-Page

Open Graph & Twitter Preview

Preview how a URL renders on Facebook, LinkedIn, X, and iMessage — before you ship.

Paste og:title, og:description, og:image, and canonical URL to see accurate social-card previews across Facebook, LinkedIn, X (Twitter), and iMessage-style unfurls. Flags missing tags and wrong aspect ratios.

Facebook / LinkedIn
optimizeplus.net
Austin SEO Agency & AI Search Experts | Optimize Plus
Founder-led Austin SEO agency delivering local SEO, technical SEO, and AI search optimisation for small businesses and B2B teams across Texas.
X (Twitter) — summary_large_image
optimizeplus.net
Austin SEO Agency & AI Search Experts | Optimize Plus
Founder-led Austin SEO agency delivering local SEO, technical SEO, and AI search optimisation for small businesses and B2B teams across Texas.

The social card is often the only creative asset a link ever gets — most platforms strip your carefully-designed page down to a title, a description, and a single image the moment it's shared. If that image is the wrong aspect ratio, the description tag is missing, or the platform's crawler can't even reach your og:image URL (a surprisingly common failure when images sit behind auth or a CDN misconfiguration), the share renders as a blank grey box or falls back to a random image scraped from the page body.

This previewer renders your Open Graph and Twitter Card tags the way each platform's unfurl engine actually displays them — not identically, since Facebook, LinkedIn, X, and iMessage each apply their own cropping, title-length limits, and fallback logic. Testing across all four before you publish catches the platform-specific failure that a single-preview tool misses.

Open Graph vs Twitter Card tags

Open Graph (`og:title`, `og:description`, `og:image`, `og:url`) is the protocol Facebook originated and LinkedIn, Slack, iMessage, and most other platforms now use as the default fallback. X (formerly Twitter) has its own `twitter:card`, `twitter:title`, `twitter:image` tags, but importantly, X will fall back to Open Graph tags if Twitter-specific ones are absent — so in practice most sites don't need to duplicate every field, just set `twitter:card` to `summary_large_image` and let the rest inherit from Open Graph.

The two `twitter:card` types behave very differently: `summary` renders a small square thumbnail beside the text, while `summary_large_image` renders a full-width hero image above the text. Using the wrong type for your image's actual aspect ratio produces awkward cropping — a wide 1200×630 image submitted under `summary` gets squeezed into a square, cutting off key visual elements.

Image dimensions that actually work

The de facto safe standard across platforms is 1200×630px (a roughly 1.91:1 ratio) for `summary_large_image` and Open Graph generally. Facebook and LinkedIn will accept other ratios but crop unpredictably; X requires images at least 300×157px for `summary_large_image` but renders best near the 1200×630 standard as well. Keep critical text and faces away from the outer 10% of the frame on all sides, since different platforms crop slightly differently at render time.

  • 1200×630px (1.91:1) is the universal safe size for og:image and summary_large_image.
  • Keep file size under ~1MB — some crawlers time out or refuse to fetch larger images.
  • Serve og:image over HTTPS with no auth wall — platform crawlers can't log in to fetch it.
  • Set an explicit og:image:width and og:image:height to avoid layout-shift guessing on the platform's end.
  • Absolute URLs only — relative paths in og:image frequently fail to resolve on the crawler's side.

Debugging a blank or stale preview

If a share renders blank or shows an old title after you've fixed the tags, the platform almost certainly cached the previous crawl. Facebook, LinkedIn, and X each maintain their own cache with different refresh triggers — Facebook's Sharing Debugger and LinkedIn's Post Inspector both offer a manual 'scrape again' action that forces a fresh fetch, which is essential after any Open Graph tag change on an already-shared URL. There is no equivalent public tool for X, so cache staleness there can take longer to clear.

Step-by-step workflow

  1. 1
    Set og:title, og:description, og:image, and canonical URL

    These four cover the default fallback for nearly every platform.

  2. 2
    Paste them into the previewer

    Check the rendered card, not just whether the fields are technically present.

  3. 3
    Compare across all four platform previews

    Facebook, LinkedIn, X, and iMessage each crop and truncate slightly differently.

  4. 4
    Fix any flagged aspect-ratio or missing-tag warnings

    A 1200×630px image resolves most cross-platform cropping issues.

  5. 5
    Force a re-crawl on already-shared URLs

    Use Facebook's Sharing Debugger and LinkedIn's Post Inspector to clear stale cached previews.

  6. 6
    Spot-check a real share

    Send the link to yourself in Slack or iMessage as a final confirmation before wide distribution.

Frequently asked questions

Why does my Facebook preview show an old title after I updated the tag?
Facebook caches Open Graph data per URL and only re-crawls on a trigger. Use the Facebook Sharing Debugger's 'Scrape Again' function to force a fresh fetch after any tag change.
Do I need separate twitter:image and og:image tags?
No — if twitter:image is absent, X falls back to og:image automatically. Only set twitter-specific tags if you genuinely want a different image or copy on X than elsewhere.
What image size should I use if my platform only allows one og:image?
1200×630px is the safest universal choice, rendering acceptably on Facebook, LinkedIn, X, and iMessage without severe cropping on any of them.
Why does my og:image show as blank even though the URL works in a browser?
Check whether the image sits behind authentication, a bot-blocking CDN rule, or a robots.txt disallow on the image path — platform crawlers fetch images anonymously and can be blocked by protections aimed at scrapers.
Does a good social card actually affect SEO rankings?
Not directly — Open Graph tags aren't a ranking factor. They affect click-through and share rates on social platforms, which indirectly drive referral traffic and, at scale, brand-signal exposure.
Should every page have unique og:title and og:description, or can I reuse the meta title?
Reusing meta title/description is fine as a default, but for high-value pages expected to be shared often, writing social-specific copy (punchier, more conversational than SEO meta copy) tends to improve share engagement.
Useful for
  • ·Verifying share previews before publishing
  • ·Debugging blank Facebook cards
  • ·Comparing summary vs summary_large_image
Other tools
Austin & Texas coverage

Local SEO teams we work with.

Need this at scale?

We run this analysis across thousands of pages in engagements.