Skip to main content
ToolsHub

Open Graph Preview

See exactly how your page looks when shared on 5 platforms. Edit title, description, and image to optimize. Copy all HTML meta tags in one click.

Updated

Files never leave your browser
21/60
95/160

Google Preview

https://example.com/page

My Awesome Page Title

A compelling description that makes people want to click your link when shared on social media.

HTML Meta Tags

<!-- Open Graph -->
<meta property="og:title" content="My Awesome Page Title" />
<meta property="og:description" content="A compelling description that makes people want to click your link when shared on social media." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="My Website" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Page Title" />
<meta name="twitter:description" content="A compelling description that makes people want to click your link when shared on social media." />

How to use Open Graph Preview

Preview exactly how your URL will appear when shared on Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord, and iMessage — using the actual Open Graph and Twitter Card metadata from your page. Enter any URL to fetch and render its og:title, og:description, og:image, and card layout in a pixel-accurate social share preview. Essential for checking link previews before publishing or launching.

  1. Enter the full URL of the page you want to preview (include https://).
  2. The tool fetches the page's Open Graph tags via a proxy (to handle CORS).
  3. Select the platform to see platform-specific card rendering (Facebook link post, Twitter summary card, etc.).
  4. Review each field: og:title, og:description, og:image size and crop.
  5. If the preview is wrong, edit the metadata using the og:tags generator tool.

Your data never leaves your device — 100% private processing.

How Open Graph metadata works

Open Graph (OG) is a protocol developed by Facebook that lets web pages define how they appear in social shares. When you paste a URL on Facebook, LinkedIn, Twitter, or any OG-aware platform, the platform fetches the URL and reads <meta property="og:..."> tags from the HTML. Key tags: og:title (the headline), og:description (the summary text), og:image (the preview image — recommended 1200×630 for most platforms), og:url (canonical URL), og:type (website, article, video). Twitter additionally supports its own twitter:card, twitter:title, twitter:description, and twitter:image tags that override OG when present.

TagRecommended valueNotes
og:title40–60 charactersTruncated on mobile at ~55 chars
og:description100–155 charactersShown on desktop, often hidden on mobile
og:image1200×630 px, < 1MBJPG or PNG; must be publicly accessible
og:image:altDescribe the imageAccessibility requirement
og:typewebsite or articleAffects how Facebook structures the card

Debugging missing or wrong previews

If a social platform shows a wrong preview (old image, incorrect title), it's usually a caching issue — platforms cache OG metadata for hours or days. Use the platform's official cache-clearing tool: Facebook's Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), or Twitter Card Validator (cards-dev.twitter.com/validator). These tools force a fresh fetch of your URL. For Next.js sites, ensure OG image routes return proper Cache-Control headers and that og:image uses an absolute URL, not a relative path.

Worked examples

Preview a live URL

Inputs: enter a page URL

Result: renders og:title, og:description, og:image across 6 platforms

Stale preview

Inputs: updated og:image but old one still shows

Result: flags a cached preview → refresh with the platform debugger

Glossary

Open Graph
A metadata protocol (OGP) by Facebook that standardizes how web pages define their social share appearance.
Twitter Card
Twitter-specific metadata tags that control how URLs appear in tweets — overrides Open Graph when both are present.
og:image
The preview image shown when a URL is shared — should be 1200×630px and publicly accessible via HTTPS.
Cache invalidation
Forcing a social platform to re-fetch metadata for a URL after you have updated the OG tags on the page.

Related reading

Free · No spam

Get weekly tool tips & updates

New tools, power-user tips, and productivity hacks — delivered free every Friday.

No spam, ever. Unsubscribe with one click.

Related Social Media

Meta Tag Generator

Generate SEO meta tags, Open Graph tags, and Twitter Card tags online. Preview Google search snippet and copy all tags instantly.

Link Preview & Open Graph Checker

Paste any URL to see how its link preview card looks when shared on Facebook, LinkedIn, X, and Slack. Reads live Open Graph and Twitter Card tags from the page.

Twitter Card Generator

Generate Twitter Card meta tags for your website. Preview how your page will appear when shared on Twitter/X. Free Twitter card generator.

RSS Feed Viewer & Validator

Fetch any public RSS or Atom URL server-side to bypass CORS, validate required feed fields, and preview up to 20 recent items with clean plain-text summaries.

Social Media Character Counter

Count characters for Twitter/X, Instagram, LinkedIn, Facebook, and more. Live counter with limit warnings for every major social media platform.

YouTube Thumbnail Downloader

Download YouTube thumbnails in HD, HQ, MQ, and SD quality. Paste a video URL or ID and save the image instantly, free and easy.

Explore all Social Media.