Meta tag generator with a live search and social preview
Write a title, a description and one image URL, and watch the Google result, the Open Graph card and the X card redraw as you type. The character counters show how much of your text survives a desktop result — as a target, not a hard limit, because the real cut is by pixel width. The one mistake this page is built to catch is a relative og:image, which is ignored silently and ships a card that looks exactly like having no tag at all. Nothing is uploaded or saved.
- Nothing is uploaded or saved
- Works offline
No robots tag is written unless one of these is on. “index, follow” is what a crawler already assumes, so a tag saying it changes nothing — it is filler, and this page does not print filler.
Purely cosmetic — it tints browser chrome where it is supported, and support is uneven. Nothing about search or sharing depends on it.
A cold brew method with exact grind size, water ratio and steeping time, plus the three mistakes that turn a batch sour. Made in a jar, no equipment needed.
Clipped at the approximate budgets above. Google cuts by pixel width, and it rewrites titles and descriptions when it judges something else fits the query better — so treat this as the best case, not a promise.
One set of og: tags feeds all of these. They lay the card out differently, and several of them cache what they fetched the first time, so a fix can take a re-scrape to show up.
Only twitter:card is written. X falls back to og:title, og:description and og:image when the twitter: equivalents are absent, so duplicating them buys nothing and gives you two places to update.
<!-- Document basics --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Search --> <title>How to Make Cold Brew Coffee at Home — 12-Hour Method</title> <meta name="description" content="A cold brew method with exact grind size, water ratio and steeping time, plus the three mistakes that turn a batch sour. Made in a jar, no equipment needed." /> <link rel="canonical" href="https://example.com/guides/cold-brew-coffee" /> <!-- Open Graph — Facebook, LinkedIn, WhatsApp, Slack --> <meta property="og:title" content="How to Make Cold Brew Coffee at Home — 12-Hour Method" /> <meta property="og:description" content="A cold brew method with exact grind size, water ratio and steeping time, plus the three mistakes that turn a batch sour. Made in a jar, no equipment needed." /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://example.com/guides/cold-brew-coffee" /> <meta property="og:site_name" content="Example Coffee Guides" /> <meta property="og:image" content="https://example.com/images/cold-brew-card.png" /> <meta property="og:image:alt" content="A glass jar of cold brew concentrate beside a scale and a bag of coarse-ground coffee" /> <meta property="og:locale" content="en_US" /> <!-- X (Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <!-- Extras --> <meta name="theme-color" content="#1f2933" />
Paste this inside the <head> of the page. The charset tag has to be within the first 1024 bytes of the document, which is why it is written first.
Other things you set once per page and then forget: Slug Generator, Color Converter and JSON Formatter.
How it works
- 1
Write the title and description for a human
The title is the clickable line in a search result and the headline on every card. The description does not affect ranking — Google has said so publicly — but it is your only chance to choose the sentence under that line, so it is worth the two minutes. The counters below each field mark the range that usually survives on a desktop result, and they turn amber rather than red when you go past it, because going past it is a judgement call and not an error.
- 2
Give the canonical URL, absolutely
One absolute address, including https://, naming the version of this page you want indexed. It is also written as og:url, because a card that points somewhere different from the canonical is a page arguing with itself. A relative canonical is worse than none: Google resolves it against the current URL, so a typo can quietly point a page at an address that does not exist, and nothing on the page looks wrong.
- 3
Point og:image at a real, absolute URL
Then look at the card. If the image did not load in the preview, it will not load for a scraper either — that is the whole point of drawing it here rather than describing it. This page checks that the address is absolute and tells you when it is not, which is the failure that produces a blank card with nothing in the console and nothing in a validator to explain it.
- 4
Choose a card type that matches what you have
summary_large_image gives the wide banner; summary gives the small square thumbnail beside the text. Only twitter:card is written out, because X falls back to og:title, og:description and og:image when the twitter: versions are absent — duplicating them gives you two sets of tags to keep in step and no extra behaviour.
- 5
Paste the block into your <head>
Copy it in one piece and put it inside the head element. If you included the basics, the charset tag is first for a reason: the HTML specification requires it within the first 1024 bytes of the document, and a title with an accent in it can render as mojibake when the browser has to guess instead.
Frequently asked questions
What are the real character limits for a title and a description?
There are none, and every generator that draws a hard red line at 60 is telling you something that is not true. Google truncates a snippet by the pixel width of the rendered text, not by a character count, so a narrow title of 63 characters can survive where a wide one of 57 does not — and the width available differs between desktop and mobile. The 50–60 and 150–160 ranges this page shows are useful targets drawn from where Latin text usually fits, nothing more. The practical rule that does hold: put the words that matter at the front, where they survive either way.
Will these tags improve my ranking?
No, and that is worth saying plainly on a page that generates them. The meta description is not a ranking signal — Google has stated that publicly and repeatedly; it influences the snippet a searcher reads and therefore whether they click. The title is shown in results and is used by Google as one input among many, but Google also rewrites titles when it judges another line on your page fits the query better. Open Graph and Twitter tags are not search signals at all; they control what a link looks like when someone shares it. These tags decide how your page is presented. Whether it deserves the position is a different question that no generator can answer.
My link preview shows no image. The tag is there.
Start with whether the URL is absolute. og:image is the one Open Graph value that scrapers do not resolve against the page it was found on, so /images/card.png is ignored — silently, with no error anywhere, producing a card identical to one with no tag. Second: the image has to be publicly fetchable, so anything behind a login, a firewall or a staging password will fail. Third, and the most common once the tag is right: caching. Facebook, LinkedIn and Slack keep what they fetched the first time, so a fix will not show up until the URL is re-scraped through their own debugging tool. The preview on this page fetches the image with your own browser, so it is a check on the first two, not the third.
Do I need twitter:title and twitter:description as well?
Not usually. X falls back to the Open Graph values when the twitter: equivalents are absent, so the same title and image are used either way. The case for adding them is when you genuinely want different copy on X from the copy on LinkedIn — a shorter headline, a different image crop. The case against is the ordinary one for duplicated data: two places to edit and one of them will be forgotten. This page writes twitter:card and, if you give one, twitter:site, and leaves the rest to the fallback.
What is the difference between a canonical tag and noindex?
A canonical says “several addresses show this same page, index this one”. noindex says “do not index this page at all”. They answer different questions and using both on one page sends a muddle — one nominates the page as a preferred version, the other withdraws it. There is also a trap with noindex worth knowing: a crawler has to fetch the page to read the tag, so blocking the same URL in robots.txt stops it ever seeing the instruction, and the page can stay in the index on the strength of links pointing at it. Use one or the other.
Does the order of tags in the head matter?
For nearly all of them, no — a scraper reads the whole head. The one that does matter is charset: the HTML specification requires the declaration inside the first 1024 bytes of the document, because the browser has already started decoding bytes into characters by then. Miss it and a page with accents or non-Latin text can render as mojibake until the browser guesses correctly. That is why it is written first in the block above, ahead of the title.
Does the meta keywords tag do anything?
Not for Google. It announced in 2009 that it does not use the keywords meta tag in web search ranking, and nothing has changed since. It is not harmful, it is just inert, which is why this page does not offer it — a generator that emits tags nobody reads is teaching a habit rather than solving a problem.
What image size should I use for og:image?
The card slots on Facebook and X are laid out around a 1.91:1 rectangle, which is where the common 1200×630 recommendation comes from, and the preview above uses that ratio. Two practical points beyond the number: keep any text in the image well inside the middle, because different platforms crop the edges differently and one of them will cut your last word off; and remember the file has to be fetched by a scraper on a slow connection, so a 4 MB export is a poor idea even when the dimensions are right.
Is what I type here sent anywhere?
No. The tags are built in the JavaScript this page already loaded, and nothing is written to localStorage, so closing the tab leaves nothing behind. The one network request is your own browser fetching the image URL you typed, direct from that host, so the preview can show you whether it actually loads — the same request a scraper would make. Leave that field empty and the page makes no request at all.