Meta Tag & Social Preview Tester

Built & maintained by the MatrixInn Solutions engineering team · Last reviewed June 2026

How to preview your meta tags and social cards

Type your title, description, page URL and image URL into the fields above — or paste your raw <head> HTML and click Extract from HTML.
Watch the Google, Facebook/Open Graph and Twitter/X previews update live as you edit.
Use Copy meta tags to grab a ready-to-paste block of <title>, meta description, og:* and twitter:* tags.

Everything runs inside your browser tab, so the previews update the instant you type and the Load sample button gives you a working set of tags to experiment with. Paste a full page if you like — the extractor reads only the <head> region it needs and ignores the rest, so you do not have to trim anything by hand.

Why use an Open Graph and Twitter card tester?

When your page is shared on Google, Facebook, LinkedIn or X, those platforms build a preview from your meta tags — not your live design. A missing Open Graph image, an over-long title, or a description that gets truncated mid-sentence can quietly tank your click-through rate. This meta tag preview tool shows a realistic SERP snippet plus social cards side by side, so you can spot truncation, fix missing og tags, and tune copy before you publish. Because it never fetches your URL and runs entirely in your browser, even staging, intranet and password-protected pages are safe to test.

Which meta tags actually matter

A handful of tags do almost all the work. The <title> and meta description drive your Google snippet; the og:* family controls how Facebook, LinkedIn, Slack, WhatsApp and Discord render a link; and the twitter:* tags fine-tune the X card. Open Graph is the de-facto standard, so when a Twitter tag is missing, X falls back to the matching Open Graph value — which means a solid set of og:* tags covers most platforms on its own.

Tag	Used by	What it controls
`<title>`	Google, browsers	SERP headline and the browser tab label
`meta description`	Google	The grey snippet text under your result
`og:title` / `og:description`	Facebook, LinkedIn, Slack, X (fallback)	Card headline and body when shared
`og:image`	Facebook, LinkedIn, X (fallback)	The large preview image (1200 × 630)
`og:url`	All Open Graph readers	The canonical link the card points to
`twitter:card`	X / Twitter	Card layout — `summary_large_image` here

Common use cases

Pre-launch QA — confirm a new landing page renders a clean card before you announce it.
Fixing a broken share — paste a live page's <head> to see exactly which tag is missing or malformed.
Tuning click-through — A/B different titles and descriptions against the 60- and 160-character cut-offs.
Generating boilerplate — fill four fields, hit Copy meta tags, and paste a complete tag block into your template.
Auditing a CMS template — verify that the tags your platform outputs actually map to the previews you expect.

Tips & gotchas

Use absolute image URLs. Open Graph crawlers do not resolve relative paths — always give og:image a full https:// address.
Platforms cache aggressively. After fixing a tag, re-scrape with Facebook's Sharing Debugger or repost on X to clear the old preview.
Front-load your title. Google truncates near 60 characters, so put the keyword and brand promise first.
Mind the image ratio. A 1.91:1 image fills the large card; square art gets letter-boxed or cropped.
This is a preview, not a crawler. Because it never fetches the URL, it cannot verify the image actually loads — check that separately if a card looks blank.

Frequently asked questions

Is this meta tag previewer free and private?

Yes — it is 100% free with no sign-up, and completely private. Your fields and pasted HTML are parsed and rendered directly in your browser; nothing is ever uploaded to a server and no URL is fetched.

Can I paste my raw <head> HTML?

Yes. Paste your page's <head> (or the whole page) and the tool extracts the title, meta description, Open Graph (og:*) and Twitter Card (twitter:*) tags automatically, then fills the fields so you can tweak them.

Does it fetch my live URL?

No. For privacy and security the tool never makes network requests — it works entirely from the values you type or paste, so previews are instant and your data stays on your device.

Why do Google, Facebook and Twitter previews look different?

Each platform uses different sources and truncation rules: Google builds a SERP snippet from the title and description, Facebook reads Open Graph tags, and Twitter/X reads twitter:* tags (falling back to Open Graph). This tool mirrors those rules so you can tune each one.

What is the ideal size for an Open Graph image?

Use 1200 × 630 pixels (a 1.91:1 ratio) for the large summary card used by Facebook, LinkedIn and X. Keep it under about 5 MB, use an absolute https URL, and avoid important text near the edges since platforms crop slightly. Square 1:1 images are only used by Twitter's smaller "summary" card.

How long should my title and description be?

Aim for a title around 50–60 characters and a meta description around 150–160 characters so Google rarely truncates them. Open Graph and Twitter titles can run longer (up to ~70–88 characters), but front-load the most important words so the message survives any cut.

Meta Tag Previewer