๐Ÿ

Bee Hive

Open Graph Preview

Preview how your links appear on social media.

Or Enter Manually

Social Media Previews

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com">
<meta property="twitter:title" content="Page Title">
<meta property="twitter:description" content="Page description">

About Open Graph Preview

The Open Graph Preview tool shows you exactly how your webpage will appear when shared on social media platforms like Facebook, Twitter/X, and LinkedIn. Open Graph meta tags control the title, description, and image that appear in link previews โ€“ getting these right is crucial for click-through rates and brand presentation. Enter your URL or manually input your Open Graph properties to see live previews for each major platform. Switch between Facebook, Twitter, and LinkedIn tabs to see how each platform renders your link card differently. The visual preview shows your OG image, title, description, and domain exactly as users will see them in their feeds. Once you're happy with the preview, copy the generated meta tags and add them to your page's <head> section. The tool generates both standard Open Graph tags for Facebook and LinkedIn, plus Twitter Card tags for optimal display on Twitter/X. This preview helps you catch issues before publishing: truncated titles, missing images, or descriptions that cut off at awkward points. All input is processed locally in your browser โ€“ your content stays private.

Frequently Asked Questions

What are Open Graph tags?

Open Graph is a protocol that controls how URLs are displayed when shared on social media. Key tags include og:title, og:description, og:image, and og:url.

Why can't previews match exactly?

Each platform renders previews slightly differently. Our previews use the same OG data but platform-specific styling may vary. They're accurate guides, not pixel-perfect replicas.

What image size should I use?

1200ร—630 pixels is optimal for most platforms. Use at least 600ร—315. Images smaller than 200ร—200 may not display or look poor quality.

Why isn't my image showing?

The image URL must be absolute (starting with https://), publicly accessible, and not blocked by robots.txt or authentication.

What's the og:title character limit?

Keep titles under 60 characters for Facebook and 70 for Twitter. Longer titles get truncated with ellipsis (...).

How long should descriptions be?

155 characters max for Facebook, 200 for Twitter. LinkedIn is stricter at about 150 characters. Write concise, compelling descriptions.

Do I need both OG and Twitter tags?

Twitter uses its own tags but falls back to OG if Twitter tags are missing. Including both ensures optimal display on all platforms.

How do I test after publishing?

Use platform debuggers: Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector. They show exactly what gets cached.

Why do old images still show?

Platforms cache OG data. Use their debugger tools to force a refresh after updating your meta tags.

What is og:site_name for?

It displays your site/brand name separately from the page title. Useful when page titles don't include your brand name.