Free Tools Grid

Meta Tag Generator

SEO Tools

Build a complete set of HTML meta tags — basic SEO, Open Graph, Twitter Cards, and viewport/theme — from a single form. Live output ready to paste into <head>.

Runs entirely in your browser
Loading tool...

About Meta Tag Generator

Meta tags are how every search engine and social platform understands your page when there's no human present. Title and description drive your Google search-result appearance and click-through rate; Open Graph tags power link previews on Facebook, LinkedIn, iMessage, Slack, and most other places URLs get shared; Twitter Card tags do the same for X; theme-color and viewport tune the mobile experience. Getting them right matters; getting any one wrong is usually invisible until you spot-check.

This generator gives you a form for every commonly-used meta tag, with live character-count warnings tied to the actual limits search engines display (Google truncates titles around 60 characters, descriptions around 155–160). Open Graph and Twitter fields fall back to your basic title/description when blank, so you fill them in once. The output is plain HTML you paste between `<head>` tags — no library lock-in, no JavaScript dependency, just the standard markup every modern parser understands. All field state lives in your browser; nothing is sent anywhere.

How to use

  1. 1

    Fill in Basic fields

    Title (under 60 chars), description (under 160 chars), canonical URL, and optional keywords/author. The output panel updates live.

  2. 2

    (Optional) Override Open Graph

    Switch to the Open Graph tab. Empty fields inherit from Basic — fill them only when you want a different message for social shares than for search.

  3. 3

    (Optional) Override Twitter Card

    X uses a separate tag namespace. Card type defaults to `summary_large_image`. Override title/description/image if you want X-specific copy.

  4. 4

    Tune viewport, theme color, and robots

    The Other tab covers theme-color (the mobile browser chrome color), viewport (rarely changed from the default), and the robots directive (default `index, follow`).

  5. 5

    Copy the output

    Click Copy on the output panel. Paste between your `<head>` tags.

Examples

Minimal valid set

Output

<title>About — Free Tools Grid</title>
<meta name="description" content="44 free, browser-based developer tools…">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Open Graph -->
<meta property="og:title" content="About — Free Tools Grid">
<meta property="og:description" content="44 free, browser-based developer tools…">
<meta property="og:type" content="website">

Frequently asked questions

Why does Google sometimes ignore my title?+

Google reserves the right to rewrite titles when it thinks your title is misleading, keyword-stuffed, or too generic. The first defense is to write titles that are honest, specific, and under 60 characters. The second is making sure your H1 and surrounding content reinforce the same message.

Does meta keywords still matter?+

Google has ignored the keywords meta tag since 2009. Bing also stopped using it. Other search engines (Yandex, Baidu) may still read it lightly. Including it costs you nothing, but don't expect ranking benefit.

Why both Open Graph AND Twitter Card tags?+

Most platforms read Open Graph (Facebook, LinkedIn, Slack, Discord, iMessage). X also reads OG but prefers its own `twitter:*` namespace when present. Without Twitter Card tags, X falls back to OG; with them, you can show different copy or images on X specifically.

What size should the og:image be?+

1200×630 pixels (1.91:1 aspect ratio) is the standard. That looks great on Facebook, LinkedIn, and as Twitter's `summary_large_image`. Going smaller risks the platform refusing to use it; going much larger wastes bandwidth.

Do I need theme-color?+

It's nice-to-have, not required. On mobile Chrome and Safari, theme-color sets the browser chrome (URL bar background). Without it, the browser uses a default white or system color. For PWAs, it also affects the splash screen.

Is anything sent to a server?+

No. The output is generated entirely in your browser from your form inputs.