Skip to main content

Meta tag & OG previewer

See how your page will appear in Google search and on social platforms. Edit the fields on the left — previews and the generated meta tag HTML update live.

Flags title and description length issues. Generates complete meta tag HTML for Google, Open Graph, and Twitter Card ready to paste into your <head>.

Meta tag previewer

Page meta

0

Optimal: 50–60 chars

0

Optimal: 150–160 chars

Recommended: 1200 × 630 px

Google search snippet

yoursite.com
Page Title
Page description will appear here…

Social card (OG / Twitter X / LinkedIn)

No OG image set · 1200 × 630

YOURSITE.COM

Page Title

Page description…

Generated meta tags


Where to paste these tags

Copy the generated HTML and paste it inside the <head> element of your page — before the closing </head> tag. In most CMS platforms, there is a "Head scripts" or "SEO settings" field where you can paste raw HTML. In Next.js, use the Metadata API or next/head.

After deploying, use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and the Twitter Card Validator (cards-dev.twitter.com/validator) to force a re-fetch of your updated meta tags, since both platforms cache OG data aggressively.

About this tool

This tool generates a live preview of how your page will appear in Google search results and on social platforms (Twitter/X, LinkedIn, Facebook) based on the meta tags you set. Enter a page title, meta description, canonical URL, and Open Graph image URL to see the rendered snippet and social card update in real time. It also generates the meta tag HTML ready to paste into your page's head element. All processing runs in your browser — no data is sent anywhere.

Frequently asked questions

What length should my title and description be?

Google truncates page titles at roughly 600px of rendered width, which corresponds to about 50–60 characters in most fonts. Descriptions are typically displayed up to around 155–160 characters, though Google may rewrite the description snippet from your page content if it judges that more relevant. For Open Graph and Twitter cards, titles up to 70 characters and descriptions up to 200 characters are generally shown in full, though this varies by platform.

What is the correct OG image size?

The recommended Open Graph image size is 1200 × 630 pixels (1.91:1 ratio). This displays well across Facebook, LinkedIn, Twitter/X, and most other platforms that read og:image. Twitter also accepts 800 × 418 for summary_large_image. Images below 600px wide may display as a small thumbnail instead of a large card on some platforms.

Why might my social card look different in practice?

Platforms cache Open Graph tags aggressively. Facebook caches for up to 24 hours; Twitter/X caches for up to 7 days. After updating your meta tags, use each platform's card validation tool (Facebook Sharing Debugger, Twitter Card Validator) to force a re-fetch and see the current live preview.

Do I need both og: and twitter: tags?

Twitter/X falls back to og: tags if twitter: tags are absent, so the minimum is a complete set of og: tags. Setting explicit twitter: tags lets you customise the Twitter card independently — for example using a different description or specifying twitter:card to control the card layout. For maximum compatibility, include both sets as generated by this tool.

Share this tool