OpenReplay Logo
12k

Meta tag previewer

Preview how your page looks on Google, Facebook, LinkedIn and X, and audit your title, description and Open Graph tags — parsed locally in your browser.

Parsed locally
Paste your <head> markup (or a full HTML page) to preview your search and social cards.

About this tool

A meta tag previewer parses the &lt;head&gt; of a page and reconstructs how search engines and social platforms will render it. It reads the title, meta description, canonical link, favicon, viewport, and the Open Graph (og:) and Twitter (twitter:) tags, then applies the same fallback chains the real platforms use — Open Graph falls back to the base title and description, and Twitter falls back to Open Graph — so the previews reflect what users actually see, not just what you typed.

Use it to catch the small mistakes that quietly break link sharing: a title that gets truncated past ~60 characters in Google, a missing og:image that leaves a blank Facebook card, a relative og:image path that fails when a scraper fetches it, or a missing twitter:card that defaults to the wrong layout. Paste your head markup, eyeball the Google, Facebook/LinkedIn and X cards side by side, and work down the audit checklist before you ship or share the URL.

Everything is parsed in your browser with the built-in DOMParser — no markup or URLs are uploaded, and remote images load straight from their source for an accurate preview.

Frequently asked questions

What is the ideal length for a title and meta description?

Aim for a title of 50–60 characters and a meta description of 140–160 characters. Beyond those limits Google truncates the text with an ellipsis in search results, so the end of your message can get cut off.

Why does my og:image not show up when I share the link?

The most common cause is a relative path like /og.png. Facebook, LinkedIn and X fetch the image from outside your site, so og:image must be an absolute https:// URL. The tool flags relative or missing og:image values in its audit.

What is the difference between twitter:card summary and summary_large_image?

summary renders a small square thumbnail to the left of the text, while summary_large_image renders a large image across the top of the card. If twitter:card is missing or unrecognized, X falls back to the smaller summary layout.