Meta Tag Generator
Generate title, description, Open Graph and Twitter Card tags, with a live Google-style preview and pixel-accurate length warnings.
Google result preview
Why length is measured in pixels, not characters
Google truncates titles by width, not character count. Illinois Wallpaper and lllllllll ll have the same character count and nowhere near the same width.
The preview above measures the rendered width and warns when you’re near the cut. As rough guidance: titles get about 580px (typically 50–60 characters) and descriptions about 920px (roughly 150–160 characters). Mobile shows less.
Going over isn’t fatal. The tail is simply replaced with an ellipsis, so put what matters first.
The description doesn’t affect ranking
It hasn’t for years. It affects whether someone clicks, which is the point.
Google also rewrites descriptions most of the time — it will pull a passage from the page if that passage matches the query better than your tag. Write the description as the answer to “why should I click this rather than the other nine”, not as a keyword container.
Open Graph is what makes links look right
Without og:title, og:description and og:image, a link shared into Slack, WhatsApp, LinkedIn or a group chat renders as a bare grey box. With them it renders as a card.
og:image should be 1200×630 and under about 1MB, and it must be an absolute URL — a relative path silently fails everywhere. Test with each platform’s own debugger, because they all cache aggressively and none of them re-fetch on their own.
Only one canonical, and point it at yourself
Every page needs <link rel="canonical"> naming its own preferred URL. Two very common ways to break it:
- Copying a canonical from a template and leaving another page’s URL in it. That tells Google this page is a duplicate and it should be dropped.
- Pointing at
http://when the site serveshttps://, or at thewwwversion when the site is non-www. Match it to what the site actually serves — see the .htaccess generator for making that consistent.