Open Graph Preview Tool

Preview how your links appear when shared on Facebook, Twitter/X, LinkedIn, and other social platforms. Generate perfect Open Graph and Twitter Card meta tags.

Enter Your Meta Data

Fill in the details to see how your link will appear on social media

0/60

The title shown when shared. Keep it under 60 characters.

0/200

Summary text shown below the title. Keep it under 200 characters.

Recommended size: 1200x630 pixels for best display.

Generated Meta Tags

Copy and paste these tags into your HTML <head>

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com" />
<meta name="twitter:card" content="summary_large_image" />

Social Media Previews

See how your link appears on different platforms

1200 x 630 pixels

example.com

Your Page Title

Your page description will appear here.

Facebook Feed Preview

Recommended Image Sizes

Facebook
1200 x 630px
Twitter/X
1200 x 600px
LinkedIn
1200 x 627px

Universal Size

Use 1200 x 630 pixels for best results across all platforms. This size works well on Facebook, LinkedIn, and Twitter.

What is Open Graph and Why Does It Matter?

Open Graph (OG) is a protocol developed by Facebook that allows any web page to become a rich object in a social graph. When you share a URL on social media, Open Graph tags control what image, title, and description appear.

📈 Engagement Impact

2-3x

More clicks on posts with compelling OG images

👥 Social Reach

4B+

Users across platforms using OG tags

💡 Key Insight

Without Open Graph tags, social platforms will try to guess what to show—often with poor results. Custom OG tags give you control over your content's first impression when shared.

Essential Open Graph Tags Explained

Required
og:title

The title of your content. Keep it under 60 characters. This appears as the main headline when your link is shared.

Required
og:description

A brief summary of your content. Aim for 150-200 characters. Make it compelling to encourage clicks.

Required
og:image

The image URL displayed when shared. Use 1200x630 pixels. This is the most important tag for engagement—custom images get significantly more clicks.

Recommended
og:url

The canonical URL of your page. Ensures all shares point to the same URL, consolidating engagement metrics.

Recommended
og:type

The type of content: "website", "article", "product", etc. Helps platforms categorize and display your content appropriately.

Optional
og:site_name

Your website or brand name. Displayed above or below the title on some platforms.

Twitter Card Tags

Twitter uses its own card system but will fall back to Open Graph tags if Twitter-specific tags aren't present. For best results, include both.

twitter:card

Type of card: "summary", "summary_large_image", "player", or "app"

twitter:site

Your Twitter/X username (e.g., @yourbrand)

twitter:creator

The content creator's Twitter/X username

Summary Card

Smaller image with title and description. Good for articles.

120x120 to 1:1

Summary Large Image

Large image above title. Best for visual content.

1200x600 (2:1)

OG Image Best Practices

1

Use 1200 x 630 Pixels

This size works across all major platforms. Smaller images may appear blurry; larger ones may be cropped unexpectedly.

2

Include Text Sparingly

If adding text, keep it minimal and large enough to read on mobile. The title and description tags already provide context.

3

Keep Important Content Centered

Different platforms crop images differently. Keep key elements in the center to ensure they're always visible.

4

Use High Contrast

Images with good contrast stand out in feeds. Avoid overly busy or low-contrast images that won't catch attention.

✅ Use Absolute URLs

https://example.com/image.jpg (not /image.jpg)

✅ Use HTTPS

Some platforms block HTTP images

✅ Fast Loading

Optimize file size (aim for under 1MB)

✅ Use JPG or PNG

Avoid SVG, GIF, or WebP for best compatibility

Debugging & Testing Tools

Facebook Sharing Debugger

Validate and clear Facebook cache

developers.facebook.com

Twitter Card Validator

Test Twitter card appearance

cards-dev.twitter.com

LinkedIn Post Inspector

Preview and refresh LinkedIn cache

linkedin.com/post-inspector

⚠️ Caching Note

Social platforms cache OG data. After updating your tags, use the platform's debugging tool to clear the cache and see your changes immediately.

Frequently Asked Questions

Why isn't my OG image showing correctly?

Common reasons: (1) Image URL uses HTTP instead of HTTPS, (2) Image is too small (min 200x200), (3) Image URL is relative instead of absolute, (4) Platform cached old data—use their debugger to refresh, (5) Server blocks the platform's crawler.

Do I need both Open Graph and Twitter tags?

Twitter will use Open Graph tags as a fallback, so you technically only need OG tags. However, adding Twitter-specific tags (especially twitter:card and twitter:site) gives you more control over the Twitter display and enables features like analytics.

How do I update cached OG data?

Use each platform's debugging tool: Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector. Enter your URL and click "Scrape Again" or "Preview" to refresh the cache. Changes may take a few minutes to propagate.

What if different pages need different images?

Set unique og:image tags for each page. Many CMS platforms and frameworks let you set these per-page. You can also use dynamic OG image generators to create custom images for each page automatically.

Do OG tags affect SEO?

Not directly. Open Graph tags are for social sharing, not search rankings. However, compelling OG content increases social engagement, which can drive more traffic and backlinks—indirectly benefiting SEO.

Related Tools