Open Graph Preview

Design OG and Twitter Card meta tags. See exactly how your page looks when shared on social media.

Page Title

Description (104/160)

Image URL (1200 × 630px recommended)

Canonical URL

Site Name

OG Type

Twitter Card

Twitter Handle

<!-- Open Graph -->
<meta property="og:title"       content="My Awesome Page - Searchlight" />
<meta property="og:description" content="This is a compelling description that makes people click. Keep it under 160 characters for best results." />
<meta property="og:image"       content="https://placehold.co/1200x630/ff6a1a/ffffff?text=OG+Image+1200x630" />
<meta property="og:url"         content="https://example.com/my-page" />
<meta property="og:site_name"   content="Example" />
<meta property="og:type"        content="website" />

<!-- Twitter Card -->
<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:title"       content="My Awesome Page - Searchlight" />
<meta name="twitter:description" content="This is a compelling description that makes people click. Keep it under 160 characters for best results." />
<meta name="twitter:image"       content="https://placehold.co/1200x630/ff6a1a/ffffff?text=OG+Image+1200x630" />
<meta name="twitter:site"        content="@example" />

example.com

My Awesome Page - Searchlight

This is a compelling description that makes people click. Keep it under 160 characters for best results.

Tips: Image should be 1200 × 630px. Title under 60 chars, description under 160. Twitter hides cards unless your account/domain is approved for rich previews.

About this tool

Preview your Open Graph tags as they appear when shared on Facebook, LinkedIn, WhatsApp, Slack, Twitter/X, and iMessage. Enter a URL to fetch live OG tags or paste your own. Validates OG image dimensions, title length, and description. Fix social sharing previews before they go live.

How to Preview Open Graph Tags

1Enter your page URL or paste OG tags manually.
2See previews for Facebook, Twitter, LinkedIn, WhatsApp, and Slack.
3Check the image is the right size and not cropped incorrectly.
4Fix any missing or invalid tags highlighted in red.
5Re-fetch after publishing to confirm the live tags are correct.

Frequently Asked Questions

Why does my link show a blank preview on social media?+

Common causes: missing og:image tag, image URL returning 404, image too small (under 200x200px), server blocking the social crawler's user agent, or the page requires JavaScript to render (social crawlers don't execute JS).

What OG tags are required for a good social preview?+

The essential tags are og:title, og:description, og:image, and og:url. For Twitter, add twitter:card (summary_large_image), twitter:title, twitter:description, and twitter:image.

How do I force Facebook to refresh my OG image?+

Go to developers.facebook.com/tools/debug, enter your URL, and click 'Scrape Again'. This clears Facebook's cache and fetches the current OG tags. For Twitter, use cards-dev.twitter.com/validator.

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

The title tag is for browser tabs and Google search results. og:title is specifically for social media share previews. They can differ - your og:title can be more engaging or shorter than your SEO title tag.

Looking for a deeper guide on this topic? Browse the Searchlight blog.

Visit the blog →

Related tools

View all Network & Web →