Open Graph Preview & Checker
Paste any URL and see exactly how its link preview looks on Facebook, X (Twitter), LinkedIn, Slack, and Discord, plus a full checklist of the Open Graph and Twitter meta tags it's missing.
Free, no sign-up. Reads live meta tags straight from the page.
01 · How it works
Paste a URL
Drop in any public page, such as a blog post, landing page, or product URL. No login and nothing to install.
We read the live tags
We fetch the page and parse its real Open Graph and Twitter meta tags, exactly the way Facebook, X, and LinkedIn crawlers do.
Preview and fix
See the rendered card on every major platform and a pass/fail checklist of what to add or fix before you share.
What is an Open Graph preview?
An Open Graph preview shows you the rich link card a platform will build from your page (the image, title, and description) <strong>before</strong> you actually post the link. It saves you from publishing a share that renders with a missing image, a truncated title, or the wrong description.
This tool reads the live Open Graph and Twitter meta tags straight from your page and renders the card the same way each platform's crawler does, so what you see here is what your audience will see on Facebook, X (Twitter), LinkedIn, Slack, and Discord.
What is the Open Graph protocol?
The Open Graph protocol is a small set of <code><meta></code> tags, created by Facebook in 2010, that turn any web page into a rich object when it's shared. Platforms read these <code>og:</code> tags from the page's <code><head></code> to decide what the preview card looks like.
It's now the de facto standard across the web: Facebook, LinkedIn, Slack, Discord, WhatsApp, Telegram, Pinterest, and iMessage all read Open Graph tags, and X (Twitter) reads them as a fallback for its own card tags.
The complete Open Graph tag reference
These are the Open Graph tags that matter for a link preview. The first four are the protocol's required tags; the rest are recommended or content-specific:
- <strong>og:title</strong>: the headline shown on the card (aim for under 60 characters).
- <strong>og:type</strong>: the kind of object, usually <code>website</code> or <code>article</code>.
- <strong>og:image</strong>: the preview image URL; use an absolute URL, ideally 1200×630.
- <strong>og:url</strong>: the canonical URL of the page being shared.
- <strong>og:description</strong>: a one or two line summary under the title.
- <strong>og:site_name</strong>: the name of your overall site (e.g. “ScreenshotRender”).
- <strong>og:locale</strong>: the language and territory, such as <code>en_US</code>.
- <strong>og:image:width</strong> and <strong>og:image:height</strong>: declare 1200 and 630 so platforms render the large card instantly.
- <strong>article:published_time</strong> and <strong>article:author</strong>: extra context for <code>og:type=article</code> pages.
Open Graph image size and specifications
The single most common problem is a missing or wrong-sized <code>og:image</code>. The recommended size is <strong>1200×630 pixels</strong> (a 1.91:1 ratio), which Facebook, LinkedIn, and X all render as a large card. Images smaller than 600×315 get shown as a small thumbnail or cropped.
Use an absolute HTTPS URL, keep the file under about 5 MB, and use PNG, JPG, or WebP. Declaring <code>og:image:width</code> and <code>og:image:height</code> lets platforms show the big card without waiting to download the image first.
If your page has no image, or you want a sharper and more on-brand one, you can render a pixel-perfect 1200×630 <code>og:image</code> from any URL or HTML template with the ScreenshotRender API and point your tag straight at it.
Open Graph vs Twitter Cards
X (Twitter) layers its own <code>twitter:</code> tags on top of Open Graph. The key one is <code>twitter:card</code>: set it to <strong>summary_large_image</strong> to get the big edge-to-edge image card instead of a small square thumbnail.
You don't have to duplicate everything. If <code>twitter:title</code>, <code>twitter:description</code>, or <code>twitter:image</code> are missing, X falls back to your <code>og:title</code>, <code>og:description</code>, and <code>og:image</code>. This checker tells you whether that fallback will work or whether a tag is genuinely missing.
What this Open Graph checker tests
Beyond the visual preview, every URL gets a tag-by-tag audit so you can fix problems at the source:
- <strong>og:title</strong> and <strong>og:description</strong>: present, and short enough not to truncate.
- <strong>og:image</strong>: present, resolvable, and ideally 1200×630.
- <strong>og:url</strong> and <strong>og:type</strong>: the canonical URL and content type.
- <strong>twitter:card</strong>: set to <code>summary_large_image</code> for the big X preview.
- <strong>Fallbacks</strong>: whether X correctly falls back to your <code>og:image</code> when <code>twitter:image</code> is absent.
Does Open Graph affect SEO?
Open Graph tags are not a direct Google ranking factor. Google uses its own title and meta description tags for search snippets. But they have a strong <em>indirect</em> SEO impact: a clean, image-rich preview earns more clicks and shares on social and in messaging apps, and those signals drive referral traffic and links back to your page.
In short: write your <code><title></code> and meta description for search engines, and your Open Graph tags for the humans sharing the link. Both should be present on every important page.
How to test and debug your Open Graph tags
Paste your URL above to preview the card and run the full tag audit. Once you've fixed any issues, it's worth re-checking with each platform's own debugger, because they aggressively cache previews:
- <strong>Facebook</strong>: the Sharing Debugger; use “Scrape Again” to refresh the cache.
- <strong>LinkedIn</strong>: the Post Inspector re-fetches and clears LinkedIn's cache.
- <strong>X (Twitter)</strong>: cards now render live, so just paste the link in a draft post.
- <strong>Slack and Discord</strong>: they unfurl live, so a fresh link reflects your latest tags.
How to fix a broken Open Graph card
Add the missing tags inside the <code><head></code> of your page, then re-run this checker to confirm. A complete, working set looks like this:
- <code><meta property="og:title" content="Your title"></code>
- <code><meta property="og:description" content="A one-line summary"></code>
- <code><meta property="og:image" content="https://yoursite.com/og.png"></code>
- <code><meta property="og:url" content="https://yoursite.com/page"></code>
- <code><meta property="og:type" content="website"></code>
- <code><meta name="twitter:card" content="summary_large_image"></code>
Which platforms use Open Graph tags?
Open Graph is read almost everywhere a link can be shared: Facebook, LinkedIn, Pinterest, WhatsApp, Telegram, Slack, Discord, Microsoft Teams, iMessage, and Signal all build their preview from your <code>og:</code> tags. X (Twitter) reads them as a fallback behind its own card tags.
That's the advantage of getting Open Graph right once: a single correct set of tags controls your link's first impression across every one of those channels at the same time.
FAQ
Common questions
Everything about the Open Graph Preview & Checker.
Common questions
An Open Graph checker reads the Open Graph and Twitter meta tags from a web page and shows you both the rendered social preview card and a list of any tags that are missing, broken, or the wrong size. It lets you catch problems before you share the link, instead of finding out after it's already posted.
The Open Graph protocol is a set of meta tags, introduced by Facebook in 2010, that tell social and messaging platforms how to display a link. Tags like og:title, og:description, and og:image live in the page's head and control the title, summary, and image of the preview card. It is now the standard read by Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, and more.
Open Graph meta tags are HTML meta elements that start with the og: prefix, such as og:title, og:description, og:image, og:url, and og:type. They sit in the head of your page and define how the page appears when its link is shared. Platforms read these tags instead of guessing the title and image from your page content.
The Open Graph protocol defines four required tags: og:title, og:type, og:image, and og:url. In practice you should also add og:description and og:site_name, and set twitter:card to summary_large_image so X shows the large image preview. This tool flags any of these that are missing.
og:type tells platforms what kind of object the page represents. The most common values are 'website' for a general page and 'article' for blog posts and news. Other supported types include book, profile, video, and music. Using 'article' also unlocks related tags such as article:published_time and article:author.
The most common reasons are: the og:image tag is missing, the image URL is relative instead of an absolute https URL, the file is too large, or the platform has cached an older version of the page. This tool tells you which tags resolve and flags an image that isn't the recommended 1200×630 size. Because Facebook and LinkedIn cache previews, re-scrape with their own debuggers after you fix the tag.
1200×630 pixels (a 1.91:1 ratio) is the standard that Facebook, LinkedIn, and X all render cleanly as a large card. The minimum is 600×315; anything smaller is shown as a small thumbnail or cropped. Keep the file under about 5 MB and use PNG, JPG, or WebP. You can generate a correctly sized og:image automatically from any URL with ScreenshotRender.
Open Graph tags (og:) are read by most platforms, while Twitter cards (twitter:) are X's own format layered on top. The important Twitter tag is twitter:card, set to summary_large_image for a big image. If you don't set twitter:title, twitter:description, or twitter:image, X falls back to your equivalent og: tags, so you rarely need to duplicate all of them.
twitter:card controls which X card layout is used. 'summary' shows a small square thumbnail next to the text, while 'summary_large_image' shows a large, edge-to-edge image above the title. For blog posts, landing pages, and products you almost always want summary_large_image for the most eye-catching preview.
Yes. The tool previews the X card and checks your twitter:card, twitter:title, twitter:description, and twitter:image tags. If you haven't set twitter:image, it confirms whether X will correctly fall back to your og:image.
Add the meta tags inside the head of each page. At minimum include og:title, og:description, og:image (an absolute URL), og:url, og:type, and twitter:card set to summary_large_image. Most content management systems and frameworks have an SEO plugin or a head/metadata API that generates these for you. After adding them, re-run this checker to confirm everything resolves.
Open Graph tags are not a direct Google ranking factor, but they have a strong indirect effect. A clean, image-rich preview earns more clicks and shares on social media and in messaging apps, which drives referral traffic and can lead to more backlinks. Use your title and meta description for search, and your Open Graph tags for the human sharing experience.
Both platforms cache the preview the first time a link is shared, so changes won't appear until you force a refresh. Use Facebook's Sharing Debugger and click 'Scrape Again', and use LinkedIn's Post Inspector to re-fetch the page. X, Slack, and Discord generally unfurl links live, so they reflect your latest tags right away.
Point a screenshot API at a URL or an HTML template and have it return a 1200×630 image, then set that image as your og:image. ScreenshotRender does exactly this: it renders pixel-perfect social images on demand, so every page gets a correct, on-brand og:image without designing one by hand.
Facebook, LinkedIn, Pinterest, WhatsApp, Telegram, Slack, Discord, Microsoft Teams, iMessage, and Signal all build their link previews from Open Graph tags. X (Twitter) reads them as a fallback behind its own twitter: card tags. Getting Open Graph right once controls how your link looks across all of them.
No. The Open Graph Preview & Checker is completely free and needs no account. It reads the live meta tags from the page you paste, and nothing is stored.
Get Started
Need to generate og:images at scale?
ScreenshotRender renders pixel-perfect 1200×630 social images from any URL or HTML template. Start free with 100 screenshots, no credit card.
Want to integrate via API? Get your key here