Meta Tag Previewer for Search and Social Cards
Paste HTML metadata to inspect title, description, and social-card previews. Use the preview to spot missing fields and long text.
Meta Tag & Open Graph Previewer workspace
Live Google SERP Preview
See the exact title, URL, and description Google will show, with realistic truncation at 60 / 160 characters. Catches over-long titles before they cost you click-through.
X, Facebook & LinkedIn Cards
Live previews of how your page renders when pasted into X (Twitter), Facebook, LinkedIn, Slack, and Discord. Detects missing og:image, og:type, and twitter:card values.
Per-Rule SEO Validation
Severity-graded issues: critical (missing title/description), major (no canonical, no OG image, viewport missing), minor (suboptimal length, missing image:alt), info (noindex flag).
100% Client-Side
Parse your staging site, internal docs, or unreleased landing pages — no URL fetch, no scraper, no log. Use DOMParser locally so even pre-launch HTML stays private.
Meta Tag Previewer & Open Graph Checker: see your tags before you ship
Paste HTML metadata to inspect title, description, and social-card previews. Use the preview to spot missing fields and long text. These previews are approximations, not live Google or social-platform results. Search engines may choose different title links and snippets, and platforms can cache older metadata. Check the published page and the destination platform after changing tags.
How to use the meta tag previewer
- Open your live page, then grab the rendered HTML — right-click → View Source, or in Chrome DevTools open the Elements panel, right-click
<html>→ Edit as HTML → Copy. Use rendered output, not the source template. - Paste the HTML (full document or just the
<head>) into the textarea. Parsing happens instantly with the browserDOMParserAPI. - Read the Google SERP card: titles over ~60 chars and descriptions over ~160 chars are flagged before they cost click-through.
- Check the X, Facebook, and LinkedIn cards for a missing
og:image,og:type, ortwitter:cardvalue. - Resolve every critical and major issue, then re-paste to confirm the list clears before you push to production.
What are meta tags, Open Graph, and Twitter Cards?
Three layers of <meta> tags share one <head>. Standard SEO tags— title, description, robots, viewport, and rel=canonical— tell search engines how to rank and display the page. Open Graph tags (og:*) tell social platforms how to build a preview card. Twitter Card tags (twitter:*) override Open Graph on X when present.
The Open Graph protocol is built on RDFa and was published by Facebook in 2010. Per the official ogp.me specification, exactly four properties are required on every page:
"The four required properties for every page are:og:title,og:type,og:image, andog:url."— The Open Graph protocol, ogp.me
Google does not display the raw tag — it renders the title to roughly 600 pixels (about 60 characters) and the description to about 920 pixels on desktop (~158 chars) or 680 pixels on mobile (~120 chars), cutting to the nearest whole word and adding an ellipsis. Google still uses the HTML title for ranking even when it rewrites the displayed one. For deeper context on the social layer, read our Open Graph meta tags guide.
Worked examples: input → verdict
Title 58 chars · description 152 chars
Both inside the optimal bands — no issue raised. The Google card renders fully with no ellipsis.
Title 74 chars
Flagged major: over the 70-char cap — "Google truncates around 60 chars; rewrite to fit the keyword in the first 60."
All five og:* tags present, but no og:image:alt
Flagged minor: "og:image is present but og:image:alt is missing — accessibility loss for screen readers and AI scrapers."
Edge case · staging noindex left on
A <meta name="robots" content="noindex"> tag is graded only info, not an error — because noindex is sometimes intentional. The tool surfaces it ("Page is set to noindex — it will NOT appear in search results") so an accidental staging tag never silently ships to production.
SERP & social length reference (2026)
Sweet-spot and cap values reflect Google's render widths and the validation thresholds this tool enforces. Open Graph and Twitter image sizes follow the platform specs.
| Tag | Sweet spot | Tool flags at | Rendered by |
|---|---|---|---|
| title | 50–60 chars | > 70 = major, > 60 = minor, < 30 = minor | Google SERP (~600 px) |
| meta description | 120–160 chars | > 320 = major, > 160 = minor, < 70 = minor | Google (~920 px desktop, ~680 px mobile) |
| og:image | 1200×630 (1.91:1) | Absent = major (with other og:*) | Facebook, LinkedIn, Slack |
| twitter:card | summary_large_image | Absent = minor, invalid value = major | X (1200×628, 2:1, < 5 MB) |
| canonical | absolute https:// URL | Missing or relative = major | Google (dedup signal) |
The fifth Open Graph tag the spec does not require
ogp.me lists four required properties (og:title, og:type, og:image, og:url), but this tool treats og:description as a fifth requirement — its rule set is ogRequired = ['title', 'description', 'url', 'image', 'type']. A page that passes the bare ogp.me spec will still raise a major "Missing og:description" issue here, because Facebook and LinkedIn cards look broken without it.
One detail that trips people up: if zero Open Graph tags exist, you get a single combined "No Open Graph tags present" warning — not five separate ones. The per-tag Missing og:* messages only appear once at least one og:* tag is found, so a half-finished head is graded more harshly than an empty one. The tool also ignores <meta name="keywords"> entirely — Google dropped it for ranking in 2009, so its absence is never flagged.
Related SEO & web publishing tools
Build the og:* tags this tool previews
Favicon GeneratorAdd the icon tags your head is missing
URL Slug GeneratorKeep og:url clean and keyword-aligned
HTML FormatterPretty-print the <head> before committing
JSON FormatterValidate inline JSON-LD structured data
HTML Entity ConverterEscape special chars in titles & descriptions
HTML to JSXConvert head markup for React components
JavaScript MinifierShrink scripts to lift Core Web Vitals
CSS MinifierCompress stylesheets for faster loads
Markdown TOCGenerate anchor links from your headings
Image CompressorShrink og:image files under the size cap
Token CounterCount tokens for AI-written descriptions
Word CounterMeasure title & description length
Guide: Open Graph Meta TagsRead the full social-card walkthrough
All ToolsBrowse the full Toolk toolbox
Last updated: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Is unreleased page HTML exposed when I preview it?
The HTML itself is parsed locally with the browser DOMParser, and Toolk’s page analytics do not receive it — so pre-launch pages stay private. The one exception is images: your browser fetches public og:image and twitter:image URLs to draw the cards, which platforms would do anyway.
What title and description lengths fit search results?
Aim for a title of roughly 50–60 characters (about 600 pixels) and a description of 120–158 characters — Google fits around 158 characters on desktop but only about 120 on mobile, so front-load what matters. This tool flags a title over 70 characters or a description over 320 as major issues.
Why is my og:image missing on Facebook or LinkedIn?
Usually one of four things: the URL is relative instead of absolute https://, the image is under 200×200 pixels, the image URL returns a non-200 status, or the platform’s cache is stale. Re-scrape through Facebook’s Sharing Debugger after fixing; this tool flags a missing og:image immediately.
Does Google still read the keywords meta tag?
No — it has ignored <meta name="keywords"> since 2009 because the field was spammed into uselessness. The previewer lists it for completeness but never flags its absence as an issue, and adding one today has no ranking effect.