Meta Tag Generator

This tool generates HTML meta tags for the <head> of a page. The tags describe the page to search engines, social-media link previewers, and the browser itself. Not all meta tags do something useful — this page covers which ones matter.

The ones that always matter

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
<meta name="description" content="A 150–160 character description that may appear under the title in search results.">

• <meta charset="UTF-8"> — declares the character encoding. Must be in the first 1024 bytes of the document (browsers stop sniffing after that). Without it, text with non-ASCII characters can render wrong.
• <meta name="viewport"> — controls how the page renders on mobile. Without it, mobile browsers render the page at desktop width and zoom out, producing tiny text. The shown form is the universal modern default.
• <title> — not technically a meta tag but lives in the same context. The most-important SEO and UX tag. Keep it under ~60 characters; longer titles get truncated in search results.
• <meta name="description"> — what search engines may show under the title. Keep it under ~160 characters. Google sometimes ignores this in favor of an extracted snippet, but it’s still the right thing to include.

These four are the bare minimum for any page.

Open Graph (social previews)

When someone shares a URL on Facebook, LinkedIn, Slack, Discord, iMessage, or most other modern platforms, the platform reads Open Graph tags to render the preview card.

<meta property="og:title" content="Page title">
<meta property="og:description" content="A description for the social card.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/canonical-url">
<meta property="og:type" content="website">

• og:image is the most important. Without it, social cards are text-only and look bad. The image should be 1200×630 pixels (the standard Open Graph aspect ratio).
• og:url is the canonical URL. Useful when the same content has multiple URLs (campaign tracking, redirects); the canonical is what gets shared.
• og:type is website for general pages, article for blog posts, video.movie for video, etc. Most platforms ignore the difference; just use website unless your CMS does something special.

Twitter has its own variant, twitter:card, but it falls back to Open Graph if Twitter-specific tags are absent. For most sites, Open Graph alone is enough.

For the dedicated Open Graph generator, see Open Graph generator.

Twitter-specific

If you want Twitter cards specifically (large summary image, app card, etc.):

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description for Twitter.">
<meta name="twitter:image" content="https://example.com/twitter-image.png">

summary_large_image is the modern default — a big image card. The older summary is a small thumbnail.

Theme color

<meta name="theme-color" content="#000000">

Sets the color of the browser chrome (Android Chrome address bar, iOS Safari status bar) when on this page. Optional. Useful for branded sites that want the browser to blend with the page.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

The media attribute lets you set different colors for light and dark mode.

Canonical URL

<link rel="canonical" href="https://example.com/canonical-url">

Not a <meta> tag — a <link> — but lives in the same context. Tells search engines the canonical URL when the same content is reachable at multiple URLs (with/without trailing slash, with/without UTM parameters, mobile/desktop variants). Critical for SEO; otherwise the same content competes with itself.

The legacy ones

These exist but mostly don’t matter anymore:

<meta name="keywords" content="...">          <!-- Ignored by Google since ~2009 -->
<meta name="author" content="...">             <!-- Has no impact on search ranking -->
<meta name="generator" content="Hugo 0.x">     <!-- Tells the world your CMS; mostly invisible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- For IE 8–10; obsolete -->
<meta name="robots" content="index,follow">   <!-- Default behavior; only set when you want noindex -->

keywords was abused so heavily in the early SEO era that all major search engines now ignore it. Including it does no harm; it does no good.

X-UA-Compatible was specifically for forcing IE to render in standards mode instead of compatibility mode. IE is dead; this tag does nothing in modern browsers.

robots is worth setting only when you want non-default behavior:

• <meta name="robots" content="noindex"> — keep this page out of search results.
• <meta name="robots" content="nofollow"> — don’t follow links on this page.

Favicon and app icons

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

These belong in the <head> next to your meta tags. See favicon generator.

What the tool generates

The tool above takes inputs (title, description, image URL, etc.) and produces:

• The core tags: charset, viewport, title and description (plus optional keywords and author).
• Open Graph tags.
• Twitter Card tags.
• Optional theme-color and canonical link, and a noindex, nofollow robots tag if you untick “Allow indexing”.

Favicon links aren’t included — the favicon generator produces those. If you fill in an image URL, the generator also writes og:image:width 1200 and og:image:height 630; change those two numbers if your image is a different size.

Paste the result into your <head> and you’ve got a complete, modern meta-tag setup.

Common pitfalls

• Missing og:image. The single most-impactful tag for social sharing. Without it, your shared links are unappealing.
• Wrong og:image size. 1200×630 is the standard. Smaller images are scaled up (blurry); much larger images may be rejected by some platforms.
• Description too long. Truncated by search engines. ~160 characters is the practical ceiling.
• Forgetting the viewport tag. Mobile renders the page at desktop width. Looks bad on phones.
• Setting robots: index,follow on every page. It’s the default. Only set the meta robots tag when the value is something other than the default.
• Stale Open Graph caches. Facebook, LinkedIn, Twitter cache the Open Graph data. After updating your tags, use each platform’s debugger to refresh the cache.

For the dedicated Open Graph generator, see Open Graph generator. For favicons, favicon generator.