Meta Tag Generator

What It Generates

• Basic SEO meta — title, description, canonical, author, keywords, theme-color, viewport, robots.
• Open Graph — og:type, og:title, og:description, og:url, og:site_name, og:image (with width / height / alt), og:locale.
• Twitter Card — twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image.
• Schema.org JSON-LD — minimal WebPage, Article, Product, or Organization block (name / description / url / image).

Example: the Pre-filled Output

The form opens with sample values for this site. With nothing changed, the copied block is:

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZeroTool — Free browser-based dev utilities</title>
<meta name="description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<link rel="canonical" href="https://zerotool.dev/">
<meta name="author" content="ZeroTool Workshop">
<meta name="keywords" content="dev tools, meta tags, open graph, twitter card">
<meta name="theme-color" content="#5b3d20">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="ZeroTool — Free browser-based dev utilities">
<meta property="og:description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<meta property="og:url" content="https://zerotool.dev/">
<meta property="og:site_name" content="ZeroTool">
<meta property="og:image" content="https://zerotool.dev/og/json-formatter.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="ZeroTool cover image">
<meta property="og:locale" content="en_US">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@zerotooldev">
<meta name="twitter:creator" content="@zerotooldev">
<meta name="twitter:title" content="ZeroTool — Free browser-based dev utilities">
<meta name="twitter:description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<meta name="twitter:image" content="https://zerotool.dev/og/json-formatter.png">

It contains the four properties ogp.me requires on every page (og:title, og:type, og:image, og:url), and og:image:alt, which the protocol says a page with og:image should have. twitter:image repeats the og:image because the Twitter image field was left empty. Replace every sample value before you publish; the keywords tag can go, since Google does not use it.

Example: a Blog Post With JSON-LD

Enter a title with quotes and an ampersand, a description with a <, choose og:type article and Schema.org type Article, and fill in the author. To reproduce the block below, press Ctrl/⌘+L to clear the sample text, untick the viewport tag, and replace the two sample URLs:

<title>Build &quot;Notes&quot; &amp; tips</title>
<meta name="description" content="Five habits that keep a notes app useful (&lt;10 minutes a day).">
<link rel="canonical" href="https://example.com/blog/notes-tips/">
<meta name="author" content="Jane Doe">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:title" content="Build &quot;Notes&quot; &amp; tips">
<meta property="og:description" content="Five habits that keep a notes app useful (&lt;10 minutes a day).">
<meta property="og:url" content="https://example.com/blog/notes-tips/">
<meta property="og:site_name" content="Example Blog">
<meta property="og:image" content="https://example.com/og/notes-tips.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Build &quot;Notes&quot; &amp; tips">
<meta name="twitter:description" content="Five habits that keep a notes app useful (&lt;10 minutes a day).">
<meta name="twitter:image" content="https://example.com/og/notes-tips.png">

<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "name": "Build \"Notes\" & tips",
  "description": "Five habits that keep a notes app useful (\u003c10 minutes a day).",
  "url": "https://example.com/blog/notes-tips/",
  "image": "https://example.com/og/notes-tips.png",
  "author": {
    "@type": "Person",
    "name": "Jane Doe"
  }
}
</script>

Quotes, ampersands and angle brackets are escaped in every attribute, so og:title becomes content="Build "Notes" & tips". The JSON-LD block gets name, description, url, image and an author object of type Person, and the < in the description is written as \u003c so text such as a closing script tag cannot break the page you paste it into. A JSON parser reads \u003c back as <.

Limits

• Minimal JSON-LD. The block has only name, description, url, image and (for Article) author. Google’s Article guide recommends headline and datePublished, and a Product is eligible for product rich results only with offers, review or aggregateRating; add those by hand and check the page in Google’s Rich Results Test.
• Card and type options without their fields. The player and app card types need twitter:player or twitter:app:* tags the tool does not write, and product is not one of the og:type values defined on ogp.me. There are no article:published_time, og:image:type or hreflang tags.
• robots is always written. index, follow is what crawlers assume anyway; delete the line unless you switch to noindex or nofollow.
• Counters are guides. The 60 and 160 character counters are rough limits; search results cut titles by pixel width, not a fixed character count.
• Previews are approximations of each platform’s card layout. When Canonical URL is empty, the preview invents a domain from the site name, or shows example.com when the name has no ASCII letters or digits. To see the real card, share the URL or use the platform’s own debugger after the page is live.
• Network: your tags stay in the browser, but the Facebook, Twitter and Discord previews load the image URLs you enter, so those image hosts see a request from you. The Google preview, shown first, has no image.
• Ctrl/⌘+L clears text only. Text fields (including og:locale and the theme color text) are emptied; URL and number fields, selections and the viewport checkbox stay, and the head is rebuilt from what is left.

Image Specs Cheat Sheet

Where to Paste the Output

The generated block goes inside <head>, ideally near the top — after <meta charset> and before any third-party scripts. Order does not matter for crawlers, but keeping social meta together makes audits easy.

For separate work that ships in the same SEO stack, see Robots.txt Generator for crawl rules and Favicon Generator for the icon set.