</>

Meta Tag Generator

Build the title, description, canonical, Open Graph and Twitter tags for your page head, with a live Google preview.

Basics
0 / 60 chars, about 0 / 580 px
0 / 155 chars
Open Graph

Empty title, description and URL fall back to the basics above.

Twitter / X card
Google preview

Desktop

example.com › page

Your page title appears here

Your meta description appears here. Write a short summary of the page.

Mobile

example.com › page

Your page title appears here

Your meta description appears here.

Google cuts titles by pixel width, not characters. Pixel figures here are an estimate for Arial 20px, and Google may rewrite titles and snippets anyway.

About this tool

Generate meta tags and preview them in Google

This meta tag generator turns a few form fields into the HTML you paste into a page's <head>: the title, meta description, canonical link, robots directive, viewport, charset, Open Graph tags and a Twitter card. While you type, you see how the page might look as a Google result on desktop and on mobile. Everything runs in your browser and nothing is sent anywhere.

How to use it

  1. Type the page title and meta description. The counters turn red when you pass the recommended limits.
  2. Add the canonical URL (a full address starting with https://). The preview uses it for the small breadcrumb line above the title.
  3. Choose a robots value if you need one, set the charset and language code, and keep or untick the viewport tag.
  4. Fill in the Open Graph fields (image, site name, type) and pick a Twitter card type.
  5. Click Copy and paste the snippet into the head of your page.

Limits the counters use

FieldLimit in the toolWhy
Title60 characters, about 580 pxGoogle cuts titles by pixel width, so wide letters use up space faster
Description155 charactersLonger text is often shortened in the snippet

The pixel figure is an estimate based on Arial at 20 px, not a measurement from Google. Google can also rewrite titles and descriptions, so treat the preview as a guide, not a guarantee.

What goes into the output

  • <meta charset> and the viewport tag (width=device-width, initial-scale=1).
  • <title>, meta name="description", meta name="robots" and link rel="canonical".
  • og:type, og:title, og:description, og:url, og:image and og:site_name. If you leave og:title, og:description or og:url empty, the tool reuses the title, description and canonical URL.
  • twitter:card, twitter:site, twitter:title, twitter:description and twitter:image (title, description and image come from the Open Graph values).
  • Quotes, ampersands and angle brackets in your text are escaped, so the snippet stays valid HTML.

Empty fields are left out of the snippet. The language code cannot live in the head, so it is printed as a comment reminding you to set it on your <html> tag.

Tips

  • Put the main keyword near the start of the title so it is not cut off.
  • Use noindex only on pages you really want kept out of search results.
  • Open Graph images work best at 1200 × 630 px and must be reachable by a public URL.
  • To check how a shared link looks on social networks, try the OG preview tool.

Frequently asked questions

How long should a title tag be?

Aim for about 60 characters or less. Google truncates by pixel width (roughly 580 px on desktop), so a title full of wide letters like W or M can be cut earlier than one full of narrow letters.

How long should a meta description be?

Around 155 characters is a common target. Google may show a different snippet taken from the page, so write a description that is useful on its own rather than stuffing it.

Does the tool send my text to a server?

No. The snippet and the preview are built in your browser as you type.

Is the Google preview exact?

No. It shows how a result is likely to look and where it may be cut, using an estimated pixel width. The real result depends on Google's own choices.

More to explore

Related Developer Tools

Browse all tools from the same category.

Showing 1-2 of 48