Skip to main content
toolk.site

Meta Tag Previewer & Open Graph Checker

Paste your page's HTML and see exactly how it renders in Google search, X (Twitter), Facebook, and LinkedIn previews — with title and description length checks, missing-tag detection, and per-rule SEO advice. Free, 100% in your browser, works on staging URLs.

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

A meta tag previewer reads the <head> of a page and shows how its title, description, and social tags will look. Paste rendered HTML and this tool extracts every standard, Open Graph, and Twitter Card tag, checks lengths against Google's limits, and draws live Google, X, Facebook, and LinkedIn cards. It runs 100% in your browser — free and safe for staging URLs no scraper can reach.

How to preview your meta tags

  1. 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.
  2. Paste the HTML (full document or just the <head>) into the textarea. Parsing happens instantly with the browser DOMParser API.
  3. Read the Google SERP card: titles over ~60 chars and descriptions over ~160 chars are flagged before they cost click-through.
  4. Check the X, Facebook, and LinkedIn cards for a missing og:image, og:type, or twitter:card value.
  5. 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, and og: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.

TagSweet spotTool flags atRendered by
title50–60 chars> 70 = major, > 60 = minor, < 30 = minorGoogle SERP (~600 px)
meta description120–160 chars> 320 = major, > 160 = minor, < 70 = minorGoogle (~920 px desktop, ~680 px mobile)
og:image1200×630 (1.91:1)Absent = major (with other og:*)Facebook, LinkedIn, Slack
twitter:cardsummary_large_imageAbsent = minor, invalid value = majorX (1200×628, 2:1, < 5 MB)
canonicalabsolute https:// URLMissing or relative = majorGoogle (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.

Runs 100% in your browser

Your HTML never leaves your device. Extraction, length validation, Open Graph rule checks, and every preview card are computed locally with the native DOMParser API — no uploads, nothing leaves your device. That is the whole point: you can paste staging, pre-launch, or internal-tool HTML that a public scraper could never fetch. I tested this against full documents and bare <head> fragments, missing-tag heads, over-length titles, relative og:image URLs, and an unknown twitter:card value — each produced the expected severity. The only network calls are your browser loading public og:image and twitter:image URLs to render the cards.

Frequently asked questions

Is this meta tag previewer free?

Yes — 100% free, no signup, and no usage cap. Every check and every preview card runs in your browser, so you can analyze staging or pre-launch HTML safely.

Does my HTML get uploaded anywhere?

No. Parsing and validation run locally with the browser DOMParser API. No HTML is POSTed to a server, so unreleased pages stay private. The only network requests are your browser fetching public og:image and twitter:image URLs to draw the cards.

What is the ideal title and description length?

Aim for a title of 50–60 characters (~600 px) and a description of 120–158 characters. Google fits ~158 chars on desktop and only ~120 on mobile. This tool flags a title over 70 chars and a description over 320 as major issues.

Why is my og:image not showing on Facebook or LinkedIn?

Usually because og:image is a relative URL (it must be absolute https://), the image is under 200×200 px, the URL returns a non-200 status, or the platform cache is stale. Re-scrape with Facebook's Sharing Debugger. This tool flags a missing og:image immediately.

Does Google still read the keywords meta tag?

No. Google stopped using <meta name="keywords"> for ranking in 2009. This tool lists it for completeness but never flags its absence as an issue.

Related SEO & web publishing tools

Open Graph Generator

Build the og:* tags this tool previews

Favicon Generator

Add the icon tags your head is missing

URL Slug Generator

Keep og:url clean and keyword-aligned

HTML Formatter

Pretty-print the <head> before committing

JSON Formatter

Validate inline JSON-LD structured data

HTML Entity Converter

Escape special chars in titles & descriptions

HTML to JSX

Convert head markup for React components

JavaScript Minifier

Shrink scripts to lift Core Web Vitals

CSS Minifier

Compress stylesheets for faster loads

Markdown TOC

Generate anchor links from your headings

Image Compressor

Shrink og:image files under the size cap

Token Counter

Count tokens for AI-written descriptions

Word Counter

Measure title & description length

Guide: Open Graph Meta Tags

Read the full social-card walkthrough

All Tools

Browse the full Toolk toolbox

Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.

Need a different tool?

Browse all 89 free, in-browser tools — or tell us what we should build next.

Browse all tools