🏷️ Meta Tag Generator

📋 Preset

🔍 Core SEO

{{ lengths.title }} / 60
{{ lengths.description }} / 160

📘 Open Graph

🐦 Twitter Card

📐 Schema.org JSON-LD (WebPage)

Emits a <script type="application/ld+json"> block with a WebPage graph derived from the title, description, canonical, language, and og:image fields.

⚠️ Warnings

  • {{ w }}

📤 Generated <head> block

{{ output || 'Fill in title and description to see the generated meta tag block.' }}

Paste this block directly inside your page's <head>. All attribute values are HTML-escaped.

⚠️

ℹ️ About Meta Tag Generator

What this tool generates

This tool assembles a complete <head> block of SEO-friendly meta tags from a structured form. The output is ready to paste into any HTML document and covers the canonical search-engine tags (<title>, meta description, rel="canonical", meta robots, viewport, charset, and theme-color), the most common social-share tags (Open Graph: og:title, og:description, og:image, og:type, og:url, og:site_name; and Twitter Cards: twitter:card, twitter:site, twitter:creator, twitter:image), and an optional schema.org WebPage block as <script type="application/ld+json">.

The page runs the same TypeScript module the API endpoint runs (Module-First pattern), so the preview is byte-identical to what you would get from POST /api/tools/seo/meta-tag-generator. Inputs are HTML-escaped before they are emitted, so it is safe to paste user-supplied copy.

Length limits Google and social platforms enforce

  • Title: Google truncates around 60 characters in desktop SERP (the exact pixel cap is ~600px so the character count is approximate). Keep the most important keyword in the first ~40 chars.
  • Meta description: Google truncates around 160 characters on desktop and ~120 on mobile. Use the description for the value proposition, not for a keyword stuff.
  • og:title: Facebook truncates around 90 characters in the share preview card.
  • og:description: Facebook truncates around 200 characters in the share preview card.
  • twitter:image: Recommended dimensions are 1200×675 for summary_large_image and 120×120 minimum for summary. JPEG, PNG, WEBP, GIF are accepted (no animated GIFs in the preview).

The tool surfaces a warning above the output whenever you exceed one of these thresholds.

Open Graph types worth knowing

  • website — generic landing or marketing page (default).
  • article — blog post, news article, or any time-stamped editorial content.
  • product — e-commerce product page (Facebook supports a richer product.* namespace for price/availability/etc.).
  • profile — a personal profile page (combine with profile:first_name, profile:last_name, profile:username for richer cards).
  • video.movie, video.episode, video.tv_show, music.song — media objects.

Robots directive cheat sheet

  • index, follow — the default; let crawlers index this page and follow its links.
  • noindex, follow — hide the page from the SERP but still crawl outgoing links. Common for filtered listing pages or staging.
  • index, nofollow — index but treat all outgoing links as untrusted.
  • noindex, nofollow — hide from SERP and ignore outgoing links. Used on internal tools and admin areas.
  • noarchive / nosnippet / noimageindex — finer-grained opt-outs that can be combined with the above.
  • max-snippet:N, max-image-preview:large|standard|none, max-video-preview:N — control the SERP rich-preview shape.

Why include JSON-LD?

The optional schema.org WebPage block is read by Google, Bing, and DuckDuckGo to enrich the SERP entry — knowledge panel hints, the "About this result" panel, and (for article pages) the rich article carousel. JSON-LD is the format Google recommends in its Structured Data documentation because it does not interfere with the rendered HTML.

The generated block includes @type: WebPage, name, description, url (from canonical), inLanguage, image (from og:image), and optional author / publisher references. Output is JSON-escaped so embedded < or & characters in your copy cannot break out of the surrounding <script> tag.

Source references

Limits and practical notes

  • Canonical URLs must be absolute. Search engines reject relative paths in rel="canonical" — the tool emits a warning if the canonical does not start with http:// or https://.
  • og:image and twitter:image must be absolute too. Social crawlers fetch the image at share time and do not resolve relative paths.
  • twitter:site and twitter:creator must start with @. Both fields expect a Twitter handle, not a URL.
  • Charset is forced to UTF-8 and emitted first in the <head> — the HTML parser needs the charset declaration in the first 1024 bytes to switch encoding.
  • The same algorithm runs in the browser and behind the API endpoint below. Use whichever fits your workflow.

API Usage Example:

POST /api/tools/seo/meta-tag-generator
Content-Type: application/json

{
    "title": "How HTTP/3 Changes the Web",
    "description": "A practical overview of HTTP/3 and QUIC.",
    "canonical": "https://example.com/blog/http3",
    "robots": "index, follow",
    "og": {
        "image": "https://example.com/og/http3.png",
        "type": "article"
    },
    "twitter": {
        "card": "summary_large_image",
        "site": "@example"
    },
    "jsonLd": true
}
Ready