Meta Tag Generator

This meta tag generator turns a short form — page title, description, URL, image, site name, Twitter handle, and theme color — into a ready-to-paste block of <head> tags, with live Google and social-card previews and one-click copy. It is aimed at site owners and developers who know the tags matter but do not want to look up every attribute name each time.

What the Generator Actually Outputs

The tool writes five groups of tags, in this order:

1. A <title> element and a <meta name="description"> tag.
2. A <meta name="theme-color"> tag, but only when the theme color field is filled in.
3. Open Graph tags: og:title, og:description, og:url, og:type fixed to website, plus og:image and og:site_name when those fields are not empty.
4. Twitter Card tags: twitter:card always set to summary_large_image, twitter:title, twitter:description, twitter:image when an image is set, and twitter:site.
5. Nothing else.

That scope matters. The output does not include a canonical <link>, a robots directive, hreflang alternates, or structured data. Those are separate concerns, and a page carrying only these tags can still be indexed under the wrong URL if its canonical link is missing.

Reading the Character Counters

The title field caps at 120 characters and the description at 320, but the counters beside each label are 60 and 160. The color change at those marks is a display hint, not a limit.

Field	Counter turns orange	Hard input cap	Typically displayed
Title	over 60 characters	120	~50–60 characters
Description	over 160 characters	320	~150–160 characters

Both counters count every character, including spaces. Google truncates titles by pixel width rather than a fixed character count, so a title in all capitals can cut off earlier than the same text in mixed case.

Worked Example: A Recipe Blog Post

Suppose you enter:

• Title: Fresh Sourdough Bread Recipe
• Description: A beginner-friendly sourdough recipe with a 24-hour rise, a crisp crust, and a soft, open crumb. Includes a printable checklist.
• URL: https://example.com/sourdough-bread/
• Image: https://example.com/img/sourdough-1200x630.jpg
• Site name: Example Kitchen
• Twitter handle: @examplekitchen

The title counter reads 28 and the description counter reads 133, so both stay gray. The generated block starts like this:

<title>Fresh Sourdough Bread Recipe</title>
<meta name="description" content="A beginner-friendly sourdough recipe..." />
<meta property="og:title" content="Fresh Sourdough Bread Recipe" />
<meta property="og:description" content="A beginner-friendly sourdough recipe..." />
<meta property="og:url" content="https://example.com/sourdough-bread/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/img/sourdough-1200x630.jpg" />
<meta property="og:site_name" content="Example Kitchen" />
<meta name="twitter:card" content="summary_large_image" />

The Google preview panel renders the blue title, the green URL, and the gray snippet. The social card below it shows the image above the domain and description — roughly how Facebook and LinkedIn lay it out.

How Search Previews and Social Cards Differ

Search engines read the <title> and the meta description, then generate their own snippet when the description is missing or unhelpful. Social platforms read the Open Graph tags first and fall back to page content only when those are absent. Twitter/X prefers its own card tags. Because the two consumers read different tags, a page can look perfect in Google while unfurling as a bare link in a chat app — the usual cause of a missing og:image.

Common Mistakes and Card Choices

• Using a relative image URL. og:image must be absolute, because the crawler resolves it away from your page. A path like /img/card.png often fails silently.
• Pointing og:url at a different page. If you share a parameterized or paginated URL but write the canonical URL into og:url, shares credit the wrong address.
• Writing a description that restates the title. The description’s job is to earn the click, not repeat the headline.
• Forgetting the theme-color field. It is the one tag that changes browser chrome on mobile; left blank, it is simply omitted.
• Assuming the counter truncates. It never does, so an over-long title reaches production exactly as typed.

Choosing a Card Type and Image

summary_large_image is fixed in the output because it renders a wide banner, which suits articles, products, and homepage shares. A square or small image under roughly 300 × 200 pixels will look stretched in that slot, so either supply a wide image or replace the card value with summary after copying. Keep the image under 5 MB — several platforms silently drop anything larger, leaving a preview with text and no picture.

Testing the Tags Before Shipping

The live preview reflects what you typed, not what a crawler will fetch. After deploying, confirm the real result:

• Paste the URL into a social card debugger and force a re-scrape; cached previews often persist after you fix a tag.
• View the page source and search for og:image to confirm an absolute URL, not a relative path, made it into the HTML.
• Load the image URL directly in a browser tab; if it 404s or redirects, the crawler sees the same failure.
• Check that the title in the source matches the one in the tool, since a CMS template may append the site name automatically.

A five-minute check after the first deploy prevents the most common symptom: a share that shows a title but no image.

Related Tools

• Favicon Generator
• Text to Slug
• HTML Encoder