Meta tag generator with a live preview.
fill in a title, a description, a canonical URL and a share image, and get the exact block to paste into your head. it previews the search result and the social card as you type, meters the two lengths that get truncated, and escapes quotes so the tags do not silently break. nothing is uploaded.
fill in a page title to start building the block
How it will look
both of these are approximations. google renders results differently by query, device and country, and it rewrites the description a lot of the time, so treat the snippet below as the shape rather than the guarantee. the card is closer, since platforms read the tags directly.
Your page title appears here
your meta description appears here, cut off at the point google usually stops showing it.
Why 60 and 155 are not really the limits
google does not count your characters, it measures pixels. the title line on a desktop result gets roughly 580 pixels and the snippet gets roughly 920, so what fits depends on which letters you used. a title in wide capitals, or one full of m and w, runs out well before 60 characters. a title full of i, l and t can go past it and survive. 60 and 155 are the numbers that fit most of the time, which is why every tool uses them, and they are a rule of thumb rather than a rule.
the practical version: put the thing that matters in the first 50 characters of the title and the first 110 of the description, then treat everything after that as a bonus some people will see. mobile cuts at a different point again, and more of your traffic is there than you think. the meters here turn red at 60 and 155 because past those you are gambling on letter widths.
the other half of the rule is that you should never pad to reach a number. a 42 character title that says the thing beats a 59 character one with a suffix bolted on to fill the meter, and a short description that promises something specific beats a long one that summarises the page to nobody in particular.
Google rewrites your description more often than it uses it
the meta description is a suggestion, not a setting. google replaces it with a passage lifted from the page whenever it thinks that passage answers the actual query better, which is often, because one sentence cannot fit every query that lands on a page. writing it is still worth doing. expecting it to appear verbatim is not.
it also does not rank you. the description has not been a ranking input for a long time, so optimising it for a keyword is wasted effort. its real job is the click: it is the only line on that page where you fully control the intent, so write it the way you would write ad copy, with a reason to choose your result over the four around it.
the title is a different case. google rewrites titles too, but far less, and the title genuinely carries weight. if you only have attention for one field, spend it there. and keep <title> and og:title saying the same thing, which this tool does by default, so a shared link and a search result are not describing two different pages.
og:image decides whether a shared link looks real
when someone pastes your URL into slack, whatsapp, LinkedIn or a group chat, the platform fetches the page and looks for og:image. find one and you get a card with a picture, a headline and a line of description. find nothing and you get a grey rectangle or a bare url, and a link that looks broken does not get clicked no matter how good the copy above it is.
1200 by 630 is the size to use. it is the ratio the large twitter card and the facebook card both want, it downscales cleanly for the smaller layouts, and it clears the 600 by 315 minimum below which facebook drops the big format and falls back to a small square thumbnail. jpg or png is the safe choice, since scraper support for webp is inconsistent.
the url has to be absolute, with the protocol on the front, and reachable without a cookie or a login. /og.png works perfectly in your browser and fails in every scraper, because the scraper has no page context to resolve it against. that single mistake is the most common reason a share looks empty, which is why this tool warns on a relative image and on a missing one. if you need to make the image itself, the word counter will keep the headline you put on it inside a sane length.
Tags are the easy half. Getting the click is the other one.
if the page is tagged properly and still gets scrolled past in the results, that is a positioning problem rather than a markup one. bring one page to the breakdown call.
Common questions
What meta tags does a page actually need?
four that matter and a handful that pay for themselves. <title>, meta description, link rel=canonical and og:image are the four. after that, og:title, og:description, og:url, og:type and og:site_name control how the link looks when it is shared, and twitter:card set to summary_large_image is what turns a small square thumbnail into a full width one. this tool writes all of them.
How long should a title tag and a meta description be?
aim for about 50 to 60 characters on the title and 120 to 155 on the description. shorter than 20 on a title usually means it is too vague to click, and shorter than about 70 on a description wastes the space. those are pixel limits underneath, so treat the meters as a warning light rather than a hard stop.
Do meta keywords still do anything?
no. google said publicly in 2009 that it ignores the keywords meta tag for ranking, and nothing has changed since. the only thing it reliably does now is show your keyword list to competitors who view your source. this tool does not generate one on purpose.
Why does my link show no image when I share it?
usually one of three things: there is no og:image, the url is relative rather than absolute, or the image sits behind a login or a firewall the scraper cannot get through. the fourth possibility is that the platform cached the page before you added the tag, in which case the tag is fine and you need to re-scrape the url in that platform's own debugger to clear it.
Do I need both og: and twitter: tags?
not strictly. X falls back to the open graph tags when the twitter ones are missing, so the og set alone will usually render something. the one worth keeping is twitter:card, because that is what decides between a large image card and a small thumbnail, and the difference in how the link reads is large.
Is anything I type here sent anywhere?
no. the tags are built in your browser with javascript, there is no account, nothing is stored and nothing is uploaded. the one request the page makes is your own browser loading the image url you paste, because that is the only way to draw the card preview, and it is sent with no referrer. leave that field empty and the page makes no requests at all.