Build the head. See what gets shared.
Fill in the tags you care about, watch the real SERP length limits in characters and pixels, get a plain-language audit of what is missing, and preview the exact card Google, X, LinkedIn, WhatsApp and Discord will render.
Page basics
Social & identity
Leave either field empty to simulate an image without declared dimensions.
Also used as the embed bar color in the Discord preview.
SERP length limits
—Width is measured for real with canvas measureText, not estimated from a character average, because Google truncates by pixels.
Audit
—Generated head tags
Social previews
What a crawler actually reads in your head
Every unfurl — a Google result, a Slack paste, a WhatsApp share — is produced from the same handful of tags, read in a fixed order by a bot with no JavaScript and no cookies. If a tag is missing, relative, or gated behind a login, the platform does not complain: it silently invents a worse card. That is why "it looked fine in the browser" is not a test.
Open Graph comes first: og:title, og:description, og:image and og:url. Twitter/X, LinkedIn, WhatsApp, Discord, Slack and Telegram all fall back to those tags when their own are absent — twitter:* exists mostly to override the card type and the handle. The practical rule is: write Open Graph properly, then add Twitter tags only where you want a different result.
Length limits are pixel limits
Google does not count characters; it measures rendered width and clips when the line no longer fits, which is why a string of 58 narrow letters can survive while 52 wide ones are cut. A title is rendered around 20px Arial and usually fits in roughly 580 px; a description sits near 14px and fits in roughly 920 px. This tool measures both with canvas.measureText, so the number you see is the number the search result will use — the classic "8.5 px per character" shortcut underestimates strings full of m, w and capitals.
Absolute URLs, or nothing
A canonical or og:image written as /img/og.png is meaningless to a crawler that never saw your HTML document — it has no base to resolve against. Always emit the full scheme, host and path. The same applies to protocol-relative URLs and to images served only to logged-in users: the crawler gets the login page, and the card degrades to a title with no image.
Frequently Asked Questions
Should the title tag match the h1?
They may match, but they do not have to and often should not. The h1 speaks to someone already on the page; the title competes in a list of ten results, so it usually benefits from the brand suffix and a concrete promise. Just avoid two completely different claims — that is how a page ends up with a disappointing click.
Does a meta description affect ranking?
Not directly. Google may ignore it entirely and generate a snippet from the page body, especially when the query matches body text. What it does affect is click-through rate: a description that states the outcome beats one that restates the title, and duplicated descriptions across a site make results look like boilerplate.
What image size should I use for social cards?
1200×630 px at a 1.91:1 ratio is the safe common denominator: it satisfies the large-card requirement on X, LinkedIn's recommended ratio and Facebook's preferred size. Keep the meaningful content inside the middle of the frame, since some platforms crop toward a square. You can generate one with the Open Graph image generator.
Why is my card cached with old text after I fixed the tags?
Platforms cache unfurls aggressively — hours to weeks. Force a refresh with the X Card Validator, Facebook's Sharing Debugger or LinkedIn Post Inspector, which re-scrape on demand. During development, adding a throwaway query string to the shared URL is a fast way to bypass the cache.
Is anything I type uploaded?
No. The audit is a few dozen lines of JavaScript, the pixel measurement happens on a hidden canvas, and the previews are plain DOM. There is no network request, no storage and no account.
Related tools
Open Graph image generator · WCAG contrast checker · All MousyTools
Hecho por MousyDev
Creo herramientas web que respetan tu privacidad: tus datos se procesan en tu propio navegador y nunca pasan por mis servidores.