Meta tag generator

Fill in one form and get the title, description, canonical, Open Graph and X card tags a page needs, with a proof of how it will look in Google and when the link is shared.

Page basics
0 charactersestimated pixel fit
Desktop: 0 px of ~600empty
Phone: 0 px of ~660empty
0 charactersestimated pixel fit
Desktop: 0 px of ~1200empty
Phone: 0 px of ~990empty
Share image
1200 × 630 px works everywhere. Make one or read the size guide.
Open Graph
X (Twitter) card
Indexing and extras

Your entries are saved in this browser only, so they are still here next visit.

proof · Google
example.comhttps://example.com

Previews are close approximations. Each platform changes its layout from time to time, and Google may rewrite titles and snippets.

Your tags

Paste inside <head>. Tags without a value are left out.

<!-- fill in the form to generate tags -->

What each tag in the output does

<title>

The single most visible tag. Google uses it as the main source for the blue title link, browsers show it on the tab, and most social platforms fall back to it. Google recommends a title that is descriptive and concise, unique to the page, and not stuffed with keywords. If several pages share a brand, put the brand at the start or end, separated by a pipe or hyphen.

meta name="description"

A short pitch for the page. Google may show it as the snippet when it describes the page better than any passage of visible text. Write one per page and include the concrete facts a searcher is scanning for: what the page offers, for whom, and any specifics such as a price range, a date or an author.

link rel="canonical"

Tells search engines which URL is the main version when the same content appears at several addresses, for example with tracking parameters. Use an absolute URL. See the canonical tag checker for the common mistakes.

Open Graph and X cards

When someone pastes your link into Facebook, LinkedIn, Slack, Discord, iMessage or WhatsApp, the app fetches your page and reads its og: properties to build the preview. The protocol marks four as required: og:title, og:type, og:image and og:url.

X reads its own twitter: tags first and falls back to the Open Graph ones. Set twitter:card to summary_large_image to get the wide image; without it, X shows a compact card.

The image is what earns the click. A 1200 × 630 pixel PNG or JPG with the important content kept away from the edges survives every platform's crop. Try the crop overlay on the OG image size guide before you commit to a design.

Good share previews work the way good diagrams do: the whole idea lands before anyone reads a word. For a lesson built on that same picture-first instinct, try ahaboo’s narrated explainer on why the Moon has phases.

Questions

Which meta tags does a page actually need?

For search: a unique <title>, a meta description, a viewport tag and a charset declaration. Add a canonical link when the same content is reachable at several URLs, and a robots tag only when you want to restrict indexing. For social sharing: og:title, og:type, og:image and og:url (the four the Open Graph protocol marks as required), plus twitter:card if you want the large-image layout on X.

Is there a character limit for titles and descriptions?

Google does not publish one. Its documentation says there is no limit on the length of a <title> or meta description, but that results are truncated as needed to fit the device width. Truncation is measured in pixels, so a title full of wide letters like W and M is cut sooner than one full of i and l. The pixel meters here estimate that fit for a desktop and a phone layout.

Do I need both Open Graph and Twitter tags?

Not always. X reads og:title, og:description and og:image when the matching twitter: tags are missing. The one tag with no Open Graph equivalent is twitter:card, which chooses between the small summary card and summary_large_image. This generator writes both sets so you can edit them independently later.

Does Google use the meta keywords tag?

No. Google lists meta keywords among the tags it ignores. It does no harm, but it does nothing for ranking, so this generator leaves it out.

Why does Google show a different title or snippet than my tags?

Google generates title links and snippets automatically and may use on-page text, headings or anchor text when it judges them a better match for the query. A specific, accurate title and description that match the visible page make it more likely your version is used.

Is my data sent anywhere?

The generator runs entirely in your browser. Your entries are saved in localStorage on this device so they survive a reload, and you can clear them with the Clear form button or from the privacy page.

Sources