🔗 Open Graph Preview

Preview how your web page looks when shared on Facebook, Twitter, LinkedIn, and WhatsApp. Check Open Graph and Twitter Card tags. Free online OG preview tool.

Title

27/95

Description

57/200

Image URL Site Name Page URL

Facebook / Open Graph

No image

ONHTML.COM

My Awesome Page — onHTML.com

Free online tools for developers: HTML, CSS, JSON and more.

Twitter / X Card

No image

My Awesome Page — onHTML.com

Free online tools for developers: HTML, CSS, JSON and more.

onhtml.com

How to Use

Enter your metadata

Fill in the title, description, image URL, and site name. These map to og:title, og:description, og:image, and og:site_name.

See the live preview

Watch the Facebook and Twitter card previews update in real time as you type.

Copy the meta tags

Click Copy Meta Tags to get the full Open Graph <meta> block ready to paste in your <head>.

Frequently Asked Questions

What are Open Graph meta tags? +

Open Graph (OG) meta tags control how your page appears when shared on social media. They define the title, description, image, and URL that Facebook, LinkedIn, Twitter, and other platforms display in link previews.

Why does my Facebook preview look wrong? +

Facebook caches OG data. After adding or updating OG tags, use the Facebook Sharing Debugger to clear the cache and re-scrape your URL. It may take a few minutes to update.

What is the ideal OG image size? +

The recommended OG image size is 1200×630 pixels (1.91:1 ratio). Minimum is 600×315px. Twitter large card uses 1200×628px. PNG or JPG format, under 8MB.

What is the difference between og:title and the page title tag? +

og:title is specifically for social media sharing and can differ from the HTML <title> tag. You might use a shorter, more engaging title for social sharing while keeping a keyword-optimized title for SEO.

Do all social platforms support Open Graph? +

Facebook, LinkedIn, Pinterest, and most messaging apps use the Open Graph protocol. Twitter has its own Twitter Card system (twitter:card tags) but also falls back to OG tags if Twitter Cards are not defined.

Complete Guide: Open Graph Preview Tool

When someone shares a link on Facebook, Twitter/X, LinkedIn, or WhatsApp, the platform does not show a raw URL — it renders a rich card with an image, title, and description. These cards are built from Open Graph and Twitter Card meta tags embedded in the page's <head>. The OG Preview tool lets you see exactly how your URL will appear on each platform before you publish.

The Open Graph Protocol

Open Graph was created by Facebook in 2010 and is now used by virtually every major social platform. The four required properties for any shared page are:

<meta property="og:title" content="Complete Guide to Open Graph" />
<meta property="og:description" content="Learn how to control how your pages look when shared on social media." />
<meta property="og:image" content="https://example.com/img/og-cover.jpg" />
<meta property="og:url" content="https://example.com/blog/open-graph-guide/" />

Image Dimensions per Platform

Each platform crops and resizes OG images differently. Use these dimensions to ensure your image displays well everywhere:

Facebook — 1200 × 630 px (1.91:1 ratio). Minimum 600 × 315 px. Images smaller than 600 × 315 render as small inline thumbnails.
Twitter / X — 1200 × 628 px for summary_large_image. Cards are cropped to 2:1 in feeds.
LinkedIn — 1200 × 627 px. LinkedIn caches aggressively; use the Post Inspector to clear the cache after updating.
WhatsApp — Uses og:image directly. Square images (400 × 400 px minimum) also work well in WhatsApp previews.

Twitter Card Types

Twitter has its own meta tag system (twitter: prefix) that falls back to Open Graph values if missing. The four Twitter card types are:

summary — Small square thumbnail + title + description. Default card type.
summary_large_image — Full-width image above title. Highest engagement. Most common choice.
app — Promotes a mobile app with App Store / Google Play links.
player — Embeds a video or audio player directly in the tweet.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourusername" />
<meta name="twitter:title" content="Page Title Here" />
<meta name="twitter:image" content="https://example.com/img/twitter-card.jpg" />

og:url for Canonical Share URL

The og:url property defines the canonical URL for your content — the URL that likes, shares, and comments aggregate to. This is important when your content is accessible at multiple URLs (with and without trailing slash, HTTP and HTTPS, www and non-www). Always set og:url to your canonical URL:

<meta property="og:url" content="https://example.com/blog/guide/" />

Cache Busting: Clearing Scraper Caches

Social platforms cache OG data aggressively. After updating your tags, old data can persist for hours or days. Use each platform's cache clearing tool:

Facebook — Visit developers.facebook.com/tools/debug/, enter your URL, and click Scrape Again.
LinkedIn — Use the Post Inspector at linkedin.com/post-inspector/.
Twitter/X — Use the Card Validator at cards-dev.twitter.com/validator.

An alternative technique is appending a cache-busting query parameter to image URLs: og:image content="https://example.com/img/cover.jpg?v=2". This forces scrapers to fetch a fresh image.

WhatsApp and Other Messengers

WhatsApp reads standard og: tags — there is no WhatsApp-specific meta tag system. Telegram also uses og: tags. iMessage on iOS previews links using og:title, og:description, and og:image. Discord uses Open Graph for link previews with slight size variations.

Debugging Tips

Tags must be in the <head>, not the <body>.
Image URLs must be absolute (starting with https://), not relative.
Image files must be publicly accessible — no authentication or IP restrictions.
OG tags served by JavaScript after page load may not be read by scrapers. Use server-side rendering.

Set <title> and meta description alongside OG tags with the Meta Tag Generator.
Generate a proper Favicon to complete your site's branding.