Skip to main content

Open Graph Preview

Preview how your page looks when shared on Facebook and LinkedIn.

Reviewed by · Last reviewed

Using the Open Graph Preview

  1. Paste your page URL or type field values - if you enter a URL and click "Fetch", the tool pulls the current og:* meta tags from the page via a no-CORS public proxy; if you skip the fetch, the form starts blank and you fill each field by hand.
  2. Fill og:title, og:description, og:image, og:url, og:site_name - these five cover the default card rendering across Facebook, LinkedIn, Slack, iMessage, Discord, and WhatsApp.
  3. Pick a preview platform - the right panel rebuilds the card with each platform's actual framing (Facebook's rounded corners and two-line description, LinkedIn's cropped image ratio, Slack's unfurl layout with favicon).
  4. Copy the HTML block - the bottom textarea shows the exact tags to paste into <head>, including og:image:width, og:image:height, and og:image:alt.

How Open Graph Works Under the Hood

Open Graph is not a platform integration - it is a stateless metadata protocol. When a link is pasted into Facebook Messenger, LinkedIn, or Slack, a bot (facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding) issues a simple HTTP GET to the URL, parses the first response as HTML, extracts <meta property="og:*"> tags, downloads the image referenced in og:image, and caches the result keyed by URL. The bots do not execute JavaScript (Facebook's scraper does run a trimmed renderer, but relying on it is risky), so the tags must be in the server-rendered HTML.

The protocol itself is specified at ogp.me, authored by Facebook in 2010 and now governed loosely by the Open Web community. It defines a small vocabulary of required properties (og:title, og:type, og:image, og:url) and a larger set of optional ones including type-specific extensions (og:article:published_time, og:video:duration). The preview renders each platform's actual crop and typography, so you can spot clipping before you publish rather than after.

Real Scenarios Where This Helps

  • Before publishing a blog post, sanity-checking that the featured image survives Facebook's 1.91:1 crop without losing the subject's face.
  • Debugging a link that unfurls in Slack but not in LinkedIn - usually an og:image served over HTTP or missing dimensions.
  • Confirming that a marketing campaign's A/B test variants produce visually different previews rather than identical ones.
  • Ensuring that a paywall page still exposes a compelling preview to logged-out social traffic.
  • Validating that server-side rendering (Next.js, Nuxt, SvelteKit) actually includes the OG tags in the initial response and not only after hydration.

Edge Cases That Trip Up OG Previews

  • Relative og:image URLs - the protocol mandates absolute URLs. Scrapers do not resolve /images/hero.jpg against the page origin.
  • Image larger than 8MB - Facebook silently refuses to cache images above its limit and falls back to text-only cards. LinkedIn's limit is 5MB, Twitter's is 5MB, Slack is 10MB.
  • WebP or AVIF with poor fallback - Facebook's scraper supported WebP as of 2022 but had years of spotty behaviour before that. JPEG and PNG are still the safest formats.
  • Missing og:image:width / og:image:height - without dimensions, Facebook sometimes defers rendering until it re-fetches the image, so the first share shows a broken or text-only card.
  • 301 redirects on the og:url - scrapers follow redirects but then cache under the final URL. If you set og:url to the canonical, reshares of the pre-redirect URL show the old preview until you force a refetch.
  • Dynamic OG images from edge functions - if your og:image is generated on demand (Vercel OG, Cloudflare Workers), cold starts can exceed the scraper's timeout and the image silently fails.

The Open Graph Protocol in Detail

The four required properties are og:title, og:type, og:image, and og:url. The og:type vocabulary is enumerated and drives which optional extensions are valid: article unlocks og:article:author, video.movie unlocks og:video:duration, and so on. Properties use RDFa-style property attributes rather than name, which is why HTML validators sometimes complain unless you declare an RDFa prefix on <html>. In practice, omitting the prefix works for every scraper in production. Images should follow the 1.91:1 aspect ratio (1200x630 is the canonical size) with a minimum of 200x200; below that, Facebook drops the image entirely. Localization is handled via og:locale (e.g. en_US, pl_PL) and alternate locales via repeated og:locale:alternate.

Alternatives to This Preview

Facebook's Sharing Debugger at developers.facebook.com/tools/debug/ is authoritative for how Facebook itself will render your card - it actually scrapes your live URL and shows parse warnings. LinkedIn's Post Inspector does the same for LinkedIn's cache. The drawback of both is that they require a live, publicly accessible URL. This previewer works on draft content, localhost output, or content you have not published yet. For automated testing in CI, libraries like open-graph-scraper (Node.js) let you assert on OG content in unit tests. Where this tool wins is quick visual iteration before you push; where the official debuggers win is verifying what a specific platform's cache is holding right now.

Frequently Asked Questions

Why is 1200x630 the recommended image size?

It hits the 1.91:1 aspect ratio that Facebook and LinkedIn crop to, it is large enough for high-DPI displays without being wasteful, and it stays under the 8MB file-size cap even as a high-quality JPEG. Images smaller than 600x315 get downgraded to text-only cards by Facebook. Images with wildly different aspect ratios get center-cropped, which often cuts off important content.

What is the difference between <code>og:url</code> and the browser URL?

They can differ legitimately. <code>og:url</code> is the canonical URL that should be shown when the link is shared - the version without tracking parameters, session IDs, or UTM tags. Browsers display the current URL; Facebook, LinkedIn, and Slack display <code>og:url</code>. Set <code>og:url</code> to the same value as your <code>link rel="canonical"</code> to avoid divergence between SEO and social signals.

Do I need <code>og:type</code> if I only care about the preview card?

Yes - it is a required property per the Open Graph Protocol. Most pages should use <code>og:type="website"</code>, blog posts should use <code>og:type="article"</code>, and product pages should use <code>og:type="product"</code>. Missing <code>og:type</code> causes Facebook to emit a warning in the Sharing Debugger and in rare cases refuse to render the card at all.

Which platforms actually read Open Graph?

Facebook, Instagram (for links shared in Stories), LinkedIn, Slack, Discord, iMessage, WhatsApp, Signal, Telegram, Skype, Microsoft Teams, Reddit, Pinterest, and most email clients (Gmail, Apple Mail, Outlook.com) when previewing pasted links. Twitter/X falls back to Open Graph when Twitter Card tags are absent but prefers its own namespace.

Why does my share preview show no image?

Check four things in order: is the <code>og:image</code> URL absolute and reachable over HTTPS? Is the image file under 8MB? Does the image exceed the 200x200 minimum? Does your server return a 200 status with <code>Content-Type: image/jpeg</code> (or png, webp)? Most missing previews are a 404 on the image URL or a Content-Type header of <code>text/html</code> from a CDN misconfiguration.

Can I have multiple <code>og:image</code> tags?

Yes. The Open Graph Protocol explicitly supports multiple images, and Facebook lets the sharer pick which one to display in the share dialog. List the primary image first, followed by alternates. Each <code>og:image</code> can have its own <code>og:image:width</code>, <code>og:image:height</code>, <code>og:image:alt</code>, and <code>og:image:type</code> trailing it.

How do I force Facebook to refresh its cache?

Paste your URL into <code>developers.facebook.com/tools/debug/</code> and click "Scrape Again". This forces the scraper to re-fetch your page and flush the cache immediately. The cache is keyed by URL and normally lives for up to 30 days. LinkedIn has its own Post Inspector for the equivalent refresh; Slack caches for about an hour with no manual flush.

Is fetching the OG data from another URL safe?

The fetch happens through a CORS-permissive proxy that only returns the HTML head section. Your own session cookies and authentication for the target site are never attached because the request originates from a third-party origin. If the site you query requires authentication, the scraped result will be whatever unauthenticated visitors see, which is exactly what Facebook and LinkedIn would get.

What is <code>og:locale</code> for?

It tells scrapers which language the content is in and drives language-specific rendering. Use IETF BCP 47 tags in underscore form: <code>en_US</code>, <code>pt_BR</code>, <code>pl_PL</code>, <code>ja_JP</code>. For multilingual pages, add <code>og:locale:alternate</code> entries for each supported locale. This is separate from HTML <code>lang</code> and hreflang - they serve SEO, OG locale serves social previews.

Should I set different OG images for Facebook versus LinkedIn?

Usually no - both render the same 1.91:1 crop at similar sizes. The one case where you might differentiate is when LinkedIn renders a more conservative crop (it tends to show more of the top and bottom edges) and you want to guarantee your logo is visible on LinkedIn specifically. In that case, use the LinkedIn-specific namespace <code>li:</code> prefix, though support for it is inconsistent.

Does the preview tool upload my image anywhere?

No. The tool references your <code>og:image</code> URL by loading it in an <code>&lt;img&gt;</code> tag inside the preview panel, same as any browser rendering the page. Your image file is fetched from its current host by your own browser, not through any intermediate server owned by this tool.

What happens if I omit <code>og:image:alt</code>?

The preview still renders, but screen readers on platforms that expose alt text (LinkedIn does, Facebook partially does) will either read nothing or fall back to the <code>og:title</code>. Including <code>og:image:alt</code> with a short description of the image content (not "image of logo", but "Team photo at the 2025 product launch") improves accessibility for a non-trivial chunk of social audiences.

More SEO & Web Tools

Google SERP Preview

Preview how your page appears in Google search results with character count indicators.

Open tool

Heading Structure Analyzer

Extract and visualize H1-H6 heading hierarchy with SEO issue detection.

Open tool

Hreflang Tag Generator

Generate hreflang link tags for multilingual websites with x-default support.

Open tool

Keyword Density Checker

Analyze word frequency with single words, bigrams and trigrams with density percentages.

Open tool

Meta Tag Generator

Generate complete HTML meta tags including Open Graph and Twitter Card tags.

Open tool

Readability Checker

Free reading level checker and writing grade level analyzer. Flesch-Kincaid, Flesch Reading Ease, Gunning Fog and Coleman-Liau scores in one place.

Open tool