Skip to content

Meta tag generator with Google SERP preview

Free · no sign-up · runs in your browser

Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.

322 px used of 580

582 px used of 920

Leave blank to reuse the page title.

1200 x 630. Must be absolute — crawlers do not resolve relative URLs.

Google result preview

example.com › tools

Free developer tools for the browser

Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored.

Widths are estimated from Arial metrics; real results vary by a few pixels.

Social card preview

example.com

Free developer tools for the browser

Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored.

Copy the head block

<head> tags

<title>Free developer tools for the browser</title>
<meta name="description" content="Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored." />
<link rel="canonical" href="https://example.com/tools" />
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#b9471b" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Free developer tools for the browser" />
<meta property="og:description" content="Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored." />
<meta property="og:url" content="https://example.com/tools" />
<meta property="og:site_name" content="Example" />
<meta property="og:image" content="https://example.com/og.png" />

<!-- X / Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Free developer tools for the browser" />
<meta name="twitter:description" content="Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored." />
<meta name="twitter:image" content="https://example.com/og.png" />

Search engines truncate a title by how wide it is, not by how many characters it has: "Illinois" and "Wallwork" are both eight letters and almost twice the width apart, which is why the "60 characters" rule passes titles that get clipped and flags ones that would have fitted. This measures the rendered width instead, shows you the result as Google would draw it, and hands back the full set of meta, Open Graph and X card tags ready to paste into your head.

How it works

  1. 01Type a title and description. Each is measured in CSS pixels using per-character widths for Arial, the face Google renders results in, rather than counted as characters.
  2. 02The preview shows the result the way a search page draws it: the URL as a breadcrumb, the title in blue, the snippet underneath — each truncated at the real limit, with an ellipsis, cut at a word boundary.
  3. 03A pixel counter under each field shows how much of the budget you have used, so you can fill the space without going over it.
  4. 04The canonical URL and Open Graph image are checked for being absolute. Crawlers do not resolve a relative URL in a meta tag the way a browser resolves one in an anchor, so a relative og:image is simply no image.
  5. 05Open Graph title and description fall back to the page title and description, which is what most pages want — fill them in only when the social copy should differ from the search copy.
  6. 06The output is the whole <head> block: title, description, canonical, robots, theme-color, the Open Graph set and the X card set, with every value escaped for an HTML attribute.

Use cases

  • Writing the head block for a new landing page and seeing the search result before it ships.
  • Checking whether a title that reads well in a CMS field will survive the cut on a results page.
  • Getting the Open Graph and X card tags right in one pass instead of debugging them in a link-preview debugger.
  • Auditing an existing page by pasting its current title and description in to see how much is being clipped.
  • Deciding between two headline options by comparing their rendered widths rather than their character counts.
  • Producing tags for a page whose social copy needs to differ from its search copy.

Frequently asked questions

How long should a meta title be?

Long enough to use the space and short enough not to be cut — which is a width, not a count. Google clips a desktop title at roughly 580 pixels, which is about 60 characters of average text but only about 45 of wide capitals, or nearly 90 of narrow lowercase. The counter above measures your actual text, and the preview shows where the cut lands.

How long should a meta description be?

Around 920 pixels, roughly 155 to 160 characters of typical text. Descriptions are not a ranking factor, but they are the sales copy on the results page, so a truncated one wastes the pitch and a very short one leaves space unused. Both are flagged above.

Why does Google show a different title than the one I set?

Google rewrites titles when it judges its own version more useful — commonly when the title is keyword-stuffed, boilerplate across many pages, or does not match the page's visible H1. A clear, specific, unduplicated title that matches the page content is the reliable way to keep yours. This tool cannot predict a rewrite; it shows what yours would look like if it is used.

Do I need separate Open Graph and Twitter tags?

Not usually. X falls back to Open Graph tags for title, description and image, so the only tag you really need is twitter:card to choose the layout. The full set is generated here anyway because some tools and crawlers read the twitter:* names specifically, and duplicating four tags costs nothing.

What size should the og:image be?

1200 x 630 pixels, a 1.91:1 ratio, is the safe default for a large card on every major platform. Keep it under about 5 MB, use an absolute https URL, and remember that crawlers do not execute JavaScript — the image has to exist at that URL when it is fetched.

Does a canonical tag have to be an absolute URL?

Yes. Relative canonicals are technically permitted but widely mishandled, and a wrong canonical is worse than none — it can point search engines away from the page you want indexed. Always use the full https URL including the domain. This tool flags a canonical that is not absolute.

Related reading

More tools