Meta Tag Generator
This free meta tag generator builds your title, description, Open Graph and Twitter card tags in the browser, with live previews. It measures the title in pixels rather than characters, because that is how Google decides where to cut, and it leaves out the tags that platforms ignore.
The basics
The blue line in Google, and the fallback for every social card.
Not a ranking factor. It is an advert for the click.
The address this page should be known by.
Leave as index, follow unless you mean otherwise.
Optional.
Tints the browser UI on mobile. Hex, like #1a1a1a.
Open Graph (Facebook, LinkedIn, WhatsApp, Slack)
Falls back to the page title when empty.
Falls back to the meta description.
Required by the Open Graph protocol.
Required. The canonical address of the thing being shared.
Required. Absolute URL, 1200x630 is the safe size.
This is the one button on the page that uses the network: your browser loads that image URL to read its size. Nothing else here leaves your device.
Describes the image for people using a screen reader.
The name of the site, not the page.
Such as en_US.
X / Twitter
The only twitter tag most pages actually need.
The site account, with the @.
The author account, with the @.
Only needed when it differs from og:title.
Only needed when it differs from og:description.
Only needed when it differs from og:image.
How it would look
https://example.com/tools/meta-tags
Free Meta Tag Generator With Pixel Width and Card Preview
Build the meta tags for your page, see the Google and social previews, and find out which tags actually do something.
Facebook, LinkedIn, WhatsApp, Slack
Example
Free Meta Tag Generator With Pixel Width and Card Preview
Build the meta tags for your page, see the Google and social previews, and find out which tags actually do something.
X / Twitter
example.com
Free Meta Tag Generator With Pixel Width and Card Preview
Build the meta tags for your page, see the Google and social previews, and find out which tags actually do something.
What actually matters here
Nothing missing, nothing wasted.
Every tag in the output does something, and the title fits Google's column.
What does this generator do?
It builds your meta tags with live previews, like the good ones do, and then answers the question none of them answer: which of these tags actually does something?
- Pixel width, not character count. The title is measured in the font Google renders, and the badge shows how close you are to the cut.
- It drops the tags that do nothing. A
twitter:titleidentical to yourog:titlenever reaches the output, and the page tells you why. - It checks your
og:imagefor real, loading it to read the true dimensions and ratio. - Previews for Google, Facebook/LinkedIn/WhatsApp/Slack, and X, each using that platform's own fallback rules.
- Audit mode. Paste the head you already have and get the same report.
- Copy or download the finished block.
Characters lie, pixels do not
Google truncates the blue headline by width, at roughly 580 pixels in the desktop column. So character limits are a rough proxy at best:
Both of these are exactly 50 characters, measured in the font Google renders:
| Title | Characters | Width | Room left |
|---|---|---|---|
| How Much Wood Would a Woodchuck Chuck? We Measured | 50 | 543px | 37px |
| Fitting little tips in a slim list, in plain print | 50 | 360px | 220px |
Same length, 183 pixels apart. One is a word away from being cut, the other has room for ten more characters. A capital W is about three times the width of an i, and that is why this page measures instead of counting.
For the meta description this page counts characters instead, and says so. Google does not publish a width for it, and inventing a number would be worse than admitting the limit.
The part nobody puts on the page
Before you spend an afternoon tuning a title to exactly 60 characters, the numbers from published studies:
| What | How often |
|---|---|
| Google rewrites your title | 61% to 76% |
| Google rewrites your description | around 70% |
| Title rewrites caused by Google removing your brand name | about 63% |
None of that means the tags are pointless. The title still tells Google what the page is about, and the description is still your advert for the click in the cases where it survives. It does mean chasing an exact character count is cargo cult, and that stuffing your brand into every title is the thing most likely to get rewritten.
Tags that generators still emit for no reason
| Tag | Verdict |
|---|---|
twitter:title identical to og:title | Redundant. X falls back to the og tag when the twitter one is absent |
twitter:description identical to og:description | Redundant, same rule |
twitter:image identical to og:image | Redundant, same rule |
meta keywords | Dead. Google stopped using it for ranking in 2009 |
This page leaves all of those out of the output. A twitter: tag only earns its place when the value genuinely differs.
What this tool does not do
- It does not fetch your page. There is no backend and no crawler, so you paste or fill in. Auditing a live URL is a different kind of tool.
- ⚠️ One thing here does use the network, and it should be said plainly. Checking an
og:imageloads that URL in your browser to read its size. It only happens when you press the button, it goes to the address you typed, and it is the only request this page makes. Everything else is local. Calling the whole page "100% offline" would be easier and untrue. - The pixel measurement is an approximation. It uses the font and size Google currently renders on desktop. Google changes that without announcing it, so treat the number as guidance.
- It cannot promise Google uses your title. Most of the time it does not, and the figures above are on the page for that reason.
- Reading a pasted head is a text scan, not a full HTML parser. For a head snippet, which is the real use, it is enough.
Is my data private?
Yes, with the one exception stated above. The form, the generated tags, the previews and the whole report run in JavaScript already loaded in your browser. Nothing is uploaded, logged or stored, and closing the tab clears it. The image check is opt-in, goes only to the image URL you entered, and reads nothing but width and height.
Frequently asked questions
How long should a title tag be?
Google cuts by width, not by character count, at roughly 580 pixels in the desktop column. A capital W is about three times the width of an i, so two titles of identical length can have different fates. This page measures the real width as you type.
Does Google rewrite title tags?
Very often. Published studies put it between 61% and 76% of results, and meta descriptions get rewritten around 70% of the time. The most common reason for a title rewrite is Google removing your brand name, which accounts for roughly 63% of them.
Do I need twitter:title if I already have og:title?
No. X falls back to the Open Graph tag when the twitter one is missing, so an identical copy is dead weight in your head. A twitter tag only earns its place when the value genuinely differs from the Open Graph one.
Are meta keywords still used for SEO?
No. Google announced in 2009 that it does not use the keywords meta tag for ranking, and that has not changed. It causes no harm, but generators that still emit it are adding noise rather than value to your page.
What size should an og:image be?
The usual recommendation is 1200 by 630 pixels, a ratio close to 1.91 to 1, with 600 by 315 as the practical minimum for a large card. This page can load your image and check its real dimensions against those numbers.
Which Open Graph tags are required?
The Open Graph protocol lists exactly four as required: og:title, og:type, og:url and og:image. Without them a shared link may render as a bare URL with no card at all. Everything else, including og:description and og:site_name, is an improvement rather than a requirement.
Why is my link preview not showing an image?
The three usual causes are a relative og:image path, an image below the minimum size a platform will accept, and a missing twitter:card when only twitter tags are present. Crawlers fetch the image from outside your site, so a path like slash img slash card dot png resolves to nothing at all.
Is the meta description a ranking factor?
No, and Google has said so directly and repeatedly. It influences whether somebody clicks your result, not where that result appears. Worth knowing before spending an afternoon counting characters, especially given that Google replaces roughly seven descriptions in ten with text of its own choosing.
Can I check meta tags I already have?
Yes. Switch to audit mode and paste the head of your page, or just the meta tags from it. The page reads every tag it recognises, fills the form with those values, and then gives you the same report on pixel width, redundant tags and anything required that is missing.
Does this tool send my page anywhere?
Only in one place, and only if you ask for it: the image check loads the og:image URL in your own browser to read its dimensions. Everything else, including the tag output, the previews and the whole report, runs locally, and nothing you type is uploaded, logged or stored anywhere.
Related tools
- DeveloperSchema Markup GeneratorJSON-LD that says whether Google still shows that rich result.
- DeveloperYAML to JSON ConverterConverts both ways, and says what changed meaning.
DeveloperSlugifyTurn any text into a clean URL slug, one or a whole list.
DeveloperJSON FormatterFormat, beautify, and validate JSON right in your browser.
DeveloperToken CounterCount tokens exactly, check the context window, estimate the cost.
Rate Meta Tag Generator & help shape it
This tool is free and still growing. Tell us what works, what you would change, and what is missing. Your feedback is what decides what we build next.
Last updated: September 20, 2026