Open Graph Preview
Paste the <head> of your page (or just its meta tags) and see how your link will look when shared on Facebook, X, LinkedIn and chat apps. The checker flags missing tags, long titles and wrong image sizes, and you can copy a clean set of tags.
🔒 Previews are built only from the tags you paste or type. This tool does not fetch your URL from a server and nothing leaves your browser.
Link previews
X · summary_large_image used
X · summary used
Slack
Discord
Previews are neutral mockups of each platform's card layout. Real apps change their designs and may crop images differently.
Checker
Generated tags
How to use the Open Graph Preview
- Paste your HTML: open your page, view the source and copy the
<head>section (or only the meta tags) into the box. - Or fill in the fields by hand. Changes are written back into the pasted HTML automatically.
- Check the previews for Facebook, X, LinkedIn and chat apps. Switch tabs or view them all at once.
- Fix the warnings in the checker, such as a missing og:image, a title that is too long or a relative URL.
- Press Copy under Generated tags and paste the result into the
<head>of your page.
The essential Open Graph and Twitter tags
A good link preview needs only a handful of tags in the <head> of your page. Open Graph tags use the property attribute, Twitter tags use name.
| Tag | What it does | Recommendation |
|---|---|---|
og:title | Headline of the card | Up to 60 characters; no site name needed if og:site_name is set |
og:description | One or two lines under the title | 55–200 characters, written for people, not keywords |
og:image | The preview image | Absolute https URL, 1200 × 630 px, JPG or PNG |
og:url | Canonical address of the page | Absolute URL, same as your canonical link |
og:type | Kind of object | website for most pages, article for posts |
og:site_name | Brand shown above or below the title | Your site or company name |
twitter:card | Card layout on X | summary_large_image for a big image, summary for a square thumbnail |
Image sizes for each platform
One 1200 × 630 px image (aspect ratio 1.91:1) works almost everywhere. Platforms crop to their own shape, so keep logos and text inside the central area.
| Platform | Card shape | Recommended | Minimum |
|---|---|---|---|
| 1.91:1 large image | 1200 × 630 px | 200 × 200 px (shown small below 600 × 315) | |
| X large image card | 1.91:1 (2:1 also fine) | 1200 × 630 px | 300 × 157 px |
| X summary card | 1:1 thumbnail | 600 × 600 px | 144 × 144 px |
| 1.91:1 | 1200 × 627 px | 200 × 200 px | |
| WhatsApp, iMessage | Square or wide thumbnail | 1200 × 630 px, under 300 KB for WhatsApp | 300 × 200 px |
A copy-ready template
Replace the values and paste this into the head of your page, then paste your page's head back into the tool to check it:
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:title" content="Page title under 60 characters">
<meta property="og:description" content="A one or two sentence summary of the page.">
<meta property="og:image" content="https://example.com/images/share-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Example">
<meta name="twitter:card" content="summary_large_image">Common reasons a link preview is broken
- Relative image path:
/img/share.jpginstead ofhttps://example.com/img/share.jpg. - Tags added by JavaScript: most crawlers do not run scripts, so tags must be in the HTML the server sends.
- Image blocked: a login wall, robots.txt rule, firewall or hotlink protection stops the crawler from downloading the image.
- Old cache: the platform stored an earlier preview. Re-scrape the URL with the platform's debugger.
- Duplicate tags: two og:title tags from a theme and a plugin. Platforms usually take the first one.
Frequently asked questions
What are Open Graph tags?
Open Graph tags are meta tags in the head of a web page, such as og:title, og:description and og:image. Facebook created the protocol, and today LinkedIn, Slack, Discord, WhatsApp, iMessage and many other apps read them to build the preview card that appears when someone shares a link.
What size should an og:image be?
Use 1200 × 630 pixels, an aspect ratio of about 1.91:1. That size looks sharp on Facebook, LinkedIn and X large image cards. Keep important text away from the edges, use JPG or PNG, and keep the file under a few megabytes (X allows up to 5 MB).
How long should an og:title be?
Aim for 60 characters or less so the whole title shows on every platform. Facebook can show up to about 88 characters on desktop before cutting it off, but mobile feeds and chat apps truncate earlier. For og:description, 55 to 200 characters works well.
Does X (Twitter) use Open Graph tags?
Yes. X looks for twitter:title, twitter:description and twitter:image first and falls back to og:title, og:description and og:image. You still need twitter:card, set to summary_large_image for a big image or summary for a small square thumbnail.
Why doesn't my link preview update after I change the tags?
Platforms cache previews, often for days. After you publish the new tags, ask the platform to re-scrape the page with its own sharing debugger or post inspector, or add a query string such as ?v=2 to the shared URL to force a fresh fetch.
Why does this tool not fetch my URL directly?
Browsers block web pages from reading other sites' HTML (CORS), so a purely client-side tool cannot download your page. Paste the HTML instead. Nothing you paste is sent anywhere, which also means you can check pages that are not public yet.
Must og:image and og:url be absolute URLs?
Yes. Crawlers read the tags without knowing your page's base URL, so use full URLs that start with https://, for example https://example.com/images/share.jpg. Relative paths such as /images/share.jpg are often ignored and the preview shows no image.