👁️

Open Graph Preview

Preview how pages appear when shared on Facebook, LinkedIn, Twitter, WhatsApp, and other platforms by rendering Open Graph metadata.. Free, private — all processing in your browser.

This tool is coming soon. Check back later!

The Open Graph Preview tool fetches any URL and renders how the link will appear when shared on Facebook, LinkedIn, Twitter (X), WhatsApp, Slack, Discord, iMessage, and other platforms that use Open Graph and Twitter Card metadata. Each platform renders shared links slightly differently — Facebook shows a large image and description, Twitter has multiple card types, LinkedIn uses its own cropping, WhatsApp truncates descriptions — so seeing all previews simultaneously is the only way to know what your audience actually sees across channels.

Enter any URL (or HTML source) and the tool extracts og:* and twitter:* meta tags, then renders pixel-accurate previews for each major platform. Facebook uses large image layout with title and description. Twitter has summary card and summary_large_image card types. LinkedIn squares the image differently. WhatsApp and iMessage render minimal previews. Any missing tags generate warnings, and the tool suggests the exact tags to add for complete coverage.

Open Graph Preview — key features

Multi-platform preview

Shows how links render on Facebook, LinkedIn, Twitter, WhatsApp, Slack, Discord, iMessage simultaneously.

Fetch from URL

Enter any public URL to fetch its metadata automatically.

Direct HTML input

Alternatively paste HTML to preview before publishing.

Twitter Card types

Renders summary, summary_large_image, and app cards correctly per Twitter spec.

Missing tag warnings

Flags missing og:image, invalid URLs, oversized images, or absent core metadata.

Image size check

Verifies og:image meets 1200x630 recommendation and under 1MB.

Suggestions

Exact tag code to copy-paste for fixing any identified issues.

Client-side only

Preview rendering stays in your browser; only the public URL is fetched.

How to use the Open Graph Preview

1
Enter URL
Paste any public URL you want to preview.
2
Or enter HTML
Alternatively, paste HTML source (useful for unpublished content).
3
See platform previews
Facebook, LinkedIn, Twitter, WhatsApp, Slack, Discord, iMessage renderings appear side by side.
4
Check warnings
Missing tags, invalid images, or truncated descriptions are flagged with specific fix suggestions.
5
Copy fix
Exact meta tag code to add is copy-ready for your HTML head.

Common use cases for the Open Graph Preview

Content marketing

→Pre-publish check: Verify how a new blog post or landing page will appear when shared before promoting it.
→Ad preview: Preview how organic shares of paid landing pages will look to confirm consistent messaging.
→Content calendar: Review upcoming content for visual consistency and completeness of social metadata.

Development

→CMS template check: Verify that CMS-generated pages include proper Open Graph tags for all page types.
→SSR verification: Confirm server-side rendered pages output og tags correctly (SPA apps often miss these).
→Staging preview: Check staging site previews before deploying to production.

Marketing audits

→Site-wide social audit: Check key landing pages for social sharing readiness.
→Competitor comparison: See how competitor pages render when shared to understand their social strategy.
→Refresh cached previews: After updating og:image, force platform cache refresh using Facebook Sharing Debugger and LinkedIn Post Inspector.

Open Graph Preview — examples

Complete metadata

Page with all necessary tags.

Input

https://example.com/well-configured

Output

Facebook: large image, headline, description, domain
LinkedIn: squared image, title, description
Twitter: summary_large_image card with full preview
WhatsApp: image + title
all previews complete

Missing image

Common issue.

Input

page without og:image

Output

Facebook: text-only preview (unattractive)
LinkedIn: same
fix: add <meta property=\"og:image\" content=\"https://example.com/image.jpg\"> (1200x630)

Relative image URL

Invalid relative URL.

Input

og:image content="/images/hero.jpg"

Output

error: URL must be absolute
fix: use full URL "https://example.com/images/hero.jpg"

Twitter card type

Large image card for Twitter.

Input

twitter:card summary_large_image with all fields

Output

Twitter preview: large horizontal image with title and description below
recommended for most articles and landing pages

Staging check

Preview from unpublished HTML.

Input

HTML source for upcoming blog post

Output

all platform previews render from the HTML
no need to publish to test social appearance

Technical details

Open Graph Protocol (OGP) was created by Facebook in 2010 to let pages describe themselves for social sharing. Now used by Facebook, LinkedIn, WhatsApp, Slack, Discord, Pinterest, iMessage, and more.

Core Open Graph tags:
- og:title: headline
- og:description: summary (2-4 sentences)
- og:image: preview image URL (absolute URL, 1200x630 recommended)
- og:url: canonical URL
- og:type: content type (website, article, product, video, music)

Article-specific:
- og:article:published_time
- og:article:author
- og:article:section
- og:article:tag

Twitter Card uses a parallel set of tags (twitter:*). If both OGP and Twitter tags exist, Twitter prefers twitter:*. If only OGP exists, Twitter falls back to it.

Twitter Card types:
- summary: small square thumbnail, title, description
- summary_large_image: large horizontal image, title, description (most popular)
- app: promotes a mobile app
- player: inline media player

Platform-specific rendering:
- Facebook: uses og:* primarily, shows large image, title, description, domain
- LinkedIn: og:*, typically shows image square-ish cropped
- Twitter: twitter:*, card type determines layout
- WhatsApp: og:*, shows image, title, tiny description
- Slack: og:*, shows image if og:image present, title, description
- Discord: og:*, shows image+title+description in embed
- iMessage: og:*, minimal rendering with image and title

Image requirements:
- Size: 1200x630 pixels for ~most platforms (1.91:1 aspect ratio)
- Format: JPEG or PNG (not WebP/AVIF, poor support in social platforms)
- File size: under 1 MB to avoid cropping or rejection
- Absolute URL: must be fully qualified, not relative
- HTTPS: required

Image caching: once a platform caches an image for a URL, it may not refresh when you update og:image. Use Facebook\u2019s Sharing Debugger or LinkedIn\u2019s Post Inspector to force refresh.

Common errors:
- og:image relative URL (must be absolute)
- og:image on HTTP (many platforms refuse)
- og:image too small (many platforms require minimum 600x315)
- og:description too long (truncated on mobile)
- Missing og:type
- Broken or expired image URLs

Common problems and solutions

⚠Image cached by platforms

Once Facebook/LinkedIn fetch an image, they cache it. Updating og:image doesn’t immediately change cached previews. Use Facebook Sharing Debugger and LinkedIn Post Inspector to force refresh.

⚠Relative image URL

og:image must be an absolute URL (https://example.com/image.jpg), not relative (/image.jpg). Relative URLs fail to load on social platforms.

⚠WebP or AVIF image

Social platforms have inconsistent support for modern image formats. Use JPEG or PNG for og:image to ensure compatibility.

⚠Image too small

Below 600x315 pixels, most platforms reject the image or crop it badly. Use 1200x630 for optimal display across platforms.

⚠Missing og:type

Without og:type, platforms may not classify the content correctly for ML-driven feed algorithms. Use "website" for general pages, "article" for blog posts, "product" for e-commerce.

⚠HTTP image on HTTPS page

Mixed content — og:image on HTTP will fail to load on HTTPS pages in strict platforms. Always use HTTPS for og:image.

⚠Title and description in og:*

If only <title> and <meta description> exist without og:title and og:description, platforms may use them but Google knows you didn’t specifically optimize for social. Add explicit og:title and og:description for better control.

Open Graph Preview — comparisons and alternatives

Compared to Facebook Sharing Debugger and LinkedIn Post Inspector, this tool shows all platforms at once rather than one at a time. Use the official debuggers to force-refresh caches; use this tool for initial testing.

Compared to metatags.io (a popular similar tool), this one includes more platform renderings (including WhatsApp, Discord, iMessage) and provides specific fix suggestions.

Compared to paid SEO tools, this tool is focused on social preview rather than full SEO audit. Combine with the SEO Meta Analyzer tool for complete meta tag coverage.

Frequently asked questions about the Open Graph Preview

▶What is Open Graph?

A protocol created by Facebook in 2010 for web pages to describe themselves for social sharing. Defines meta tags (og:title, og:description, og:image, og:url, og:type) that social platforms use to render link previews. Now supported by Facebook, LinkedIn, WhatsApp, Slack, Discord, and many more.

▶What size should the og:image be?

1200x630 pixels is the standard recommendation. Maintain 1.91:1 aspect ratio. Under 600x315 is rejected by most platforms. Keep file size under 1 MB and use JPEG or PNG (not WebP/AVIF).

▶Why does my shared link still show the old image after I updated og:image?

Platforms cache image data. Use Facebook’s Sharing Debugger (developers.facebook.com/tools/debug/) or LinkedIn Post Inspector to force a refresh. Twitter caches images too but typically refreshes within 7 days.

▶How is Twitter Card different from Open Graph?

Twitter Card uses twitter:* meta tags and supports additional card types (summary, summary_large_image, app, player). If a page has only og:*, Twitter falls back to OG. For full control on Twitter, add twitter:* tags explicitly.

▶What happens if I don’t have Open Graph tags?

Social platforms try to guess title, description, and image from page content. Results are often suboptimal — wrong image chosen, title truncated at "-" separator, description from the first paragraph. Always add explicit Open Graph tags for controlled previews.

▶Can I preview without publishing?

Yes. Paste the HTML source of your unpublished content into the tool. The preview renders based on the meta tags in the HTML, so you can iterate before going live.

▶Do these tags affect SEO?

Indirectly. Open Graph tags improve social sharing appearance, which drives more clicks and social signals. Google uses og:image as a fallback for search thumbnails in some cases. But they are not direct ranking factors.

▶Is my URL private?

The tool fetches the URL you enter to read its meta tags (the fetch is required — the URL is inherently "shared" with the tool). Nothing else is logged or stored.

Additional resources

Open Graph Protocol — Official Open Graph Protocol specification.
Facebook Sharing Debugger — Facebook’s official tool for testing and refreshing cached previews.
LinkedIn Post Inspector — LinkedIn’s tool for checking and refreshing link previews.
Twitter Card documentation — Twitter Card type references and meta tag requirements.
WhatsApp link preview — WhatsApp guidance on how link previews are rendered.

Related tools

All Web Tools

🔗

Canonical URL Checker

Check canonical URL tags on any page and detect missing, wrong, or conflicting canonicals that cause SEO duplicate content issues.

🔎

Google SERP Preview

Preview how your page will appear in Google search results with accurate title, URL, and meta description rendering for desktop and mobile.

📑

Heading Structure Checker

Analyze H1-H6 heading structure on any page — detect missing headings, multiple H1s, broken hierarchy, and accessibility problems.

📐

Image Resizer

Resize PNG, JPG, WebP images by pixels or percentage with aspect lock

🏷️

Meta Tag Generator

Generate SEO meta tags, Open Graph, Twitter Cards, and canonical tags

👁️

Open Graph Debugger

Debug Open Graph and Twitter Card metadata — inspect raw tags, validate requirements, and get links to force social platform cache refresh.

Explore more tools

200+ free tools that run in your browser.

Browse all tools →

Open Graph Preview — key features

Multi-platform preview

Fetch from URL

Direct HTML input

Twitter Card types

Missing tag warnings

Image size check

Suggestions

Client-side only

How to use the Open Graph Preview

Enter URL

Or enter HTML

See platform previews

Check warnings

Copy fix

Common use cases for the Open Graph Preview

Content marketing

Development

Marketing audits

Open Graph Preview — examples

Complete metadata

Missing image

Relative image URL

Twitter card type

Staging check

Technical details

Common problems and solutions

⚠Image cached by platforms

⚠Relative image URL

⚠WebP or AVIF image

⚠Image too small

⚠Missing og:type

⚠HTTP image on HTTPS page

⚠Title and description in og:*

Open Graph Preview — comparisons and alternatives

Frequently asked questions about the Open Graph Preview

Additional resources

Related tools

Canonical URL Checker

Google SERP Preview

Heading Structure Checker

Image Resizer

Meta Tag Generator

Open Graph Debugger

Learn more

Next.js App Router: A Complete Beginner Tutorial

How to Decode a JWT: A Practical Debugging Guide (with the Base64URL Gotcha Nobody Warns You About)

UUID v4 vs v7: The Default Has Quietly Changed

Explore more tools