What is the Open Graph protocol?

Open Graph is a metadata standard created by Facebook that lets you control how a URL appears when shared on social platforms. Tags like og:title, og:description, and og:image tell social crawlers what to display in link preview cards.

What is the best image size for Open Graph?

1200x630 pixels at a 1.91:1 aspect ratio is the recommended size. Facebook and LinkedIn both crop images to this ratio.

Why does my WhatsApp preview look different from Facebook?

WhatsApp renders a compact single-thumbnail preview rather than a full card. It crops og:image into a small square thumbnail and long titles will be cut off.

How does Slack render Open Graph tags?

Slack renders og:title, og:description, og:image, and og:site_name as an inline attachment with a left coloured bar.

How does Discord render Open Graph tags?

Discord renders an embed-style card with a left coloured border. It respects og:title, og:description, og:image, and og:site_name.

The og:type tag tells platforms what kind of content the page represents. Common values include website, article, product, and video.other.

How long does it take for updated OG tags to appear?

Facebook caches for around 30 minutes. LinkedIn caches for around 7 days. WhatsApp has no public cache invalidation tool.

Do I need both OG tags and Twitter Card tags?

Yes. Open Graph tags are used by Facebook, LinkedIn, WhatsApp, Slack, and Discord. Twitter uses its own twitter: namespace tags but falls back to OG tags if absent.

The og:locale tag specifies the language and territory of the page content in the format language_TERRITORY, for example en_US or ar_SA.

Why is my image not showing in the preview?

The image URL must be publicly accessible over HTTPS with no redirects. Some platforms block hotlinking from certain CDNs.

Open Graph Preview

New

See how your link looks when shared on Facebook, LinkedIn, WhatsApp, Slack, and Discord.

Free Forever

No Signup Required

No Files Stored

Title

Description

Image URL

Page URL

Site Name

No title set

No description set

Related Tools

Twitter Card Preview

developer

Preview how your URL will look when shared on Twitter/X with light and dark mode mockups.

Try it free

Meta Tag Generator

developer

Generate complete HTML meta tags including Open Graph and Twitter Card with live SERP preview.

Try it free

Embed this tool

Add this tool to your website or blog with a single iframe snippet.

<iframe src="https://dukotools.com/tools/open-graph-preview?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="open-graph-preview tool"></iframe>

About Open Graph Preview

Open Graph Preview shows how your link will appear when shared on Facebook, LinkedIn, WhatsApp, Slack, and Discord. Each platform renders Open Graph data differently. Facebook uses a rectangular card with image on top. LinkedIn applies its own typography and spacing. WhatsApp shows a compact single-line thumbnail preview. Slack renders a bordered embed with a colour accent bar on the left. Discord renders an embedded card style with a left border in the accent colour. Seeing all five simultaneously reveals mismatches before publishing. The validation panel warns if your OG image does not match the recommended 1200x630 ratio. The HTML output section shows the exact og: meta tags for maximum compatibility.

Key Features

Five Platform Previews
Shows accurate mockups for Facebook, LinkedIn, WhatsApp, Slack, and Discord in tabs.
Platform-Specific Layouts
Each mockup matches the actual card dimensions, typography style, and layout of its platform.
Image Ratio Validation
Warns if the OG image does not match the recommended 1200x630 1.91:1 aspect ratio.
HTML OG Tag Output
Generates og:title, og:description, og:image, og:url, og:site_name, og:type, and og:locale tags.
Shareable URL
Encodes all OG values into the URL for bookmarking or sharing.

How to Use

1
Enter page details
Fill in the title, description, image URL, page URL, site name, content type, and locale.
2
Review each platform tab
Click through Facebook, LinkedIn, WhatsApp, Slack, and Discord tabs to see how the card renders.
3
Fix image ratio if warned
If the validation panel shows a ratio warning, update your image to 1200x630 pixels.
4
Copy HTML tags
Click the Copy button to grab all og: meta tags and paste them into your page head.

Real-World Use Cases

Multi-Platform Content Distribution

A social media manager verifies the card looks professional on all five platforms before scheduling a content post.

Developer Testing

A developer adding OG tags to a new page uses the tool to see all platform renders without waiting for each platform cache to update.

Marketing Campaign Review

A marketing team reviews OG images for a product launch across all platforms to ensure brand consistency before going live.

Frequently Asked Questions

Related Free Tools

Explore these tools that work great alongside Open Graph Preview:

Twitter Card Preview

Preview how your URL will look when shared on Twitter/X with light and dark mode mockups.

Meta Tag Generator

Generate complete HTML meta tags including Open Graph and Twitter Card with live SERP preview.