About Meta Tags / OG Previewer

Preview how meta tags and OpenGraph data appear on social platforms. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

• Previewing social share cards before publishing blog posts
• Verifying Open Graph images render correctly on Facebook and LinkedIn
• Checking meta descriptions fit within Google search result limits
• Testing Twitter Card markup for correct summary or large image display

Tips

• Preview how your page appears in Google, Twitter, and Facebook
• Check og:image dimensions meet platform recommendations
• Verify title and description lengths avoid truncation on social

Fun Facts

• The Open Graph protocol was created by Facebook in 2010, and its og: prefix stands for 'Open Graph.'
• Twitter Cards were introduced in 2012 and use their own twitter: meta tag namespace separate from Open Graph.
• Google typically displays 50-60 characters of a title tag and 150-160 characters of a meta description in search results.

FAQ

Which platforms are simulated?

Twitter/X, Facebook, LinkedIn, Slack, Discord, iMessage. Each has slightly different preview rules (image aspect, text length, fallbacks).

What meta tags does it check?

Standard <meta>, OpenGraph (og:*), Twitter Cards (twitter:*). Plus the less-used `name="description"` for search engines.

Are aspect ratios enforced?

Recommended ratios are highlighted: Facebook 1200×630 (1.91:1), Twitter summary_large_image same, LinkedIn 1200×627. Wrong aspect gets cropped or letterboxed.

Can it fetch a live URL?

Paste the HTML. For live fetching use the OpenGraph Image Debugger or platform-specific debuggers (Facebook Sharing Debugger, Twitter Card Validator).