Meta tag and Open Graph generator
Write the tags that decide how your page looks in search results and when someone shares it, with character counters that warn before your title gets truncated and a preview that updates as you type.
- No signup
- Runs in your browser
- Works offline
- Nothing is uploaded
- Free
1200×630 pixels works everywhere.
Two short pieces of text do most of the work of getting a page clicked: the title that appears in search results and the description underneath it. Write them too long and they are cut off mid-sentence; leave them out and the search engine invents something from your page content, usually badly.
Open Graph tags do the same job for links shared in messaging apps and social networks. Without them a shared link is a bare URL; with them it becomes a card with a title, a summary and an image. This generates both sets, plus the Twitter Card equivalents, and shows you the result as you type.
How to use this tool
- Write the title. Aim for 30 to 60 characters — the counter turns amber outside that range, because much beyond 60 is usually truncated.
- Write the description. 70 to 160 characters is the useful range; it does not affect ranking directly but it heavily affects whether people click.
- Add the canonical URL. This tells search engines which version of a page is authoritative, which matters as soon as you start using UTM parameters.
- Add an Open Graph image. 1200×630 pixels is the standard size, and the tags assume that.
- Check the preview, then copy the generated block into the
<head>of your page.
Worked example
A product page
Title Leather Weekend Bag — Handmade in Florence is 46 characters, so it survives intact. The description names the material, the maker and the delivery promise in 140 characters. The Open Graph image is the product photo, so the link renders as a card when a customer sends it to a friend.
Fixing an ugly shared link
A blog post shared in a chat shows only the URL. Adding og:title, og:description and a 1200×630 og:image turns it into a proper card. Most platforms cache aggressively, so use their debug tool to force a refresh.
Common use cases
- New pages on a site that has no meta tags
- Landing pages built for a campaign
- Blog posts and articles that will be shared
- Product pages where the description drives clicks
- Fixing a link that previews badly in messaging apps
- Adding noindex to staging or thank-you pages
Common mistakes
- The same title on every page — Duplicate titles across a site waste the single strongest on-page signal. Every page needs its own.
- Stuffing keywords into the title — It reads badly to humans, which lowers clicks, and search engines often rewrite titles they judge unhelpful — so you lose control entirely.
- An Open Graph image that is the wrong shape — Anything far from 1200×630 gets cropped unpredictably. Keep important detail away from the edges.
- Relying on the meta keywords tag — No major search engine has used it for well over a decade. It does nothing.
Frequently asked questions
How long should a title be?
Between 30 and 60 characters. Search engines measure pixel width rather than characters, so the exact cut-off varies, but 60 is a safe working limit. Put the distinctive words first in case it is truncated.
Does the meta description affect ranking?
Not directly. It affects the click-through rate of a result that already ranks, which is worth a great deal. Write it as ad copy: say what the page gives the reader.
Why does my link still preview with the old image?
Social platforms cache Open Graph data aggressively. Use the platform's own debugging or sharing-inspector tool to force a re-fetch after you change the tags.
Do I need both Open Graph and Twitter Card tags?
X falls back to Open Graph when Twitter tags are absent, so strictly you can omit them. Including both is a few extra lines and gives you explicit control, so this generator outputs both.
What does the canonical tag do?
It names the authoritative URL for a page. It matters as soon as the same content is reachable at several addresses — with and without a trailing slash, with UTM parameters, or with sorting and filter parameters.
Is anything sent to a server?
No. Everything is generated in the page, which is useful when you are working on an unannounced page or a client site that is not live yet.
Last updated 2026-09-26