ZumaTools

Meta Tag Generator

Fill in the fields below to generate a complete set of head tags with live length checks and search and social previews.

Social overrides (og:title, og:description, og:image)
Generated head tags
<meta name="robots" content="index, follow" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

Favicon: also place favicon.ico in your site root or add <link rel="icon" href="/favicon.ico" /> yourself — this generator only covers meta tags.

Google result (approximate preview)

example.com

Your page title appears here

Your meta description appears here. Google shows roughly the first 160 characters on desktop and fewer on mobile.

Social share card (approximate preview)

og:image placeholder (1200 × 630 recommended)

example.com

Your share title appears here

Your share description appears here.

Networks render cards differently; this mock shows layout and truncation only. The image URL is never fetched.

How it works

  1. Enter your page title and meta description; the bars below each field show how close you are to the recommended display limits.
  2. Add the canonical URL, Open Graph title, description and image URL, then pick a Twitter card type and robots directive.
  3. Check the Google snippet and social card previews, then press Copy and paste the generated tags into the <head> of your HTML.

Frequently asked questions

What meta tags does this generator create?
It produces the standard SEO set: the title tag, meta description, robots directive, canonical link, Open Graph tags (og:title, og:description, og:image, og:url, og:type) and Twitter Card tags. These cover what Google reads for snippets and what Facebook, LinkedIn, X and most chat apps read when a link is shared.
How long should a title tag and meta description be?
Google truncates titles at roughly 600 pixels, which is usually around 55–60 characters, and descriptions at about 155–160 characters on desktop. The length bars in this tool approximate that pixel width from the characters you type, so a bar turning red means the end of your text will likely be cut off in results.
Are the Google and social previews exact?
No — they are honest approximations. Google rewrites snippets for many queries and each social network renders cards slightly differently, so the mocks here show layout and truncation behavior rather than a pixel-perfect copy. They are accurate enough to catch cut-off titles, missing images and weak descriptions before you publish.
What is the difference between summary and summary_large_image Twitter cards?
A summary card shows a small square thumbnail beside the text, while summary_large_image shows a full-width image above it, similar to an Open Graph share on Facebook. Use summary_large_image when you have a strong 1200×630 image; the large format gets noticeably more attention in feeds.
Is anything I type sent to a server?
No. The tags and previews are generated entirely in your browser with JavaScript, and no field is transmitted, logged or stored anywhere. The og:image URL is only placed into the output code as text — this page never fetches it, so you can safely draft tags for unpublished pages.

About this tool

This meta tag generator builds the head section every page needs for search engines and social networks: title, meta description, robots directive, canonical link, Open Graph tags and Twitter Card tags. Instead of copying a half-remembered template and hoping the lengths are right, you fill in a short form and get valid, correctly escaped HTML plus two live previews — a Google result snippet and a social share card — that update as you type.

The length bars under the title and description fields do more than count characters. Google truncates titles by pixel width, not character count, so the tool estimates the rendered width of your text (wide letters like W count more than i or l) against the roughly 600-pixel title limit and the ~160-character description limit. When a bar crosses the line it turns red, telling you the tail of your text will probably be replaced by an ellipsis in real results. The previews apply the same truncation so you can see exactly which words survive.

Everything runs client-side in your browser. Nothing you type is uploaded, and the og:image URL is inserted into the generated code as plain text without ever being fetched, which means you can prepare tags for staging pages, intranet sites or pages that do not exist yet. Special characters in your inputs are HTML-escaped automatically, so quotes and ampersands will not break your markup.

Practical tips: keep the primary keyword near the front of the title, write the description as a one-sentence pitch with a reason to click, and use a 1200×630 image for og:image so both Facebook and large Twitter cards render it sharply. Set the canonical URL on every page you publish — it is the cheapest defense against duplicate-content issues from URL parameters — and only switch robots away from index, follow on pages you genuinely want excluded from search.

Related tools