Generate SEO-optimized HTML meta tags with live Google SERP preview and social media card mockups. Covers title, description, Open Graph, Twitter Cards, canonical URLs and robots directives.
Meta tags are the API your page exposes to search engines and social platforms. Every Google search result, every Slack unfurl, every iMessage link preview is a render of the meta tags in your <head>. Most of the SEO traffic you can win or lose without touching a line of body content lives in this section. This guide is the working reference: which tags to ship, what character limits Google enforces, how Open Graph differs from Twitter Cards, and which legacy tags to stop wasting bytes on.
If you ship only six meta tags, ship these:
<title> — the page title. 50–60 characters. The single biggest SEO lever.<meta name="description"> — 150–160 characters. Influences click-through rate, not ranking directly.<link rel="canonical"> — the URL Google should index. Solves duplicate content automatically.<meta name="viewport" content="width=device-width, initial-scale=1"> — required for mobile-first indexing.<meta property="og:image"> — the preview image when shared. 1200 × 630 px.<meta name="twitter:card" content="summary_large_image"> — gates the large Twitter card.Everything else in the head is incremental polish. These six are the baseline.
Google rewrites titles 60%+ of the time, but the title you ship is still the strongest input. The current rules (May 2026):
| Element | Pixel limit (desktop) | Approx. character cap | If you exceed |
|---|---|---|---|
| Title | ~580 px | 50–60 chars | Truncated with ellipsis or rewritten by Google. |
| Description | ~920 px | 150–160 chars (920px desktop / 130 mobile) | Truncated; Google may pull from page body instead. |
| URL | ~580 px | ~75 chars after the domain | Path collapsed with breadcrumbs. |
Two writing rules that compound: put the primary keyword in the first 30 characters of the title, and write descriptions as a two-sentence pitch, not a keyword stuff. Google's 2025 spam updates penalize obvious keyword stuffing.
Open Graph was Facebook's invention but is now the de-facto standard for every link-preview surface that is not Twitter. The required tags:
| Tag | Purpose | Notes |
|---|---|---|
og:title | Card title | Can differ from <title> for SEO vs social split. |
og:description | Card body text | ~200 chars before truncation in most surfaces. |
og:url | Canonical URL for the share | Set this even if you have <link rel="canonical"> — different consumers. |
og:image | Preview image URL | 1200 × 630 px ideal; minimum 600 × 315; under 5 MB. |
og:image:alt | Image alt text | Accessibility win; LinkedIn surfaces it. |
og:type | website / article / product | Affects Facebook crawler heuristics. |
og:site_name | Brand name | Shown above the title on Facebook. |
og:locale | e.g. en_US | Useful for multilingual sites. |
Twitter (now X) reads its own twitter: namespace and falls back to og: tags when those are missing. The minimum:
twitter:card — set to summary_large_image for the wide visual card. summary is the smaller default.twitter:title — falls back to og:title.twitter:description — falls back to og:description.twitter:image — falls back to og:image.twitter:site — your brand handle (optional but appears next to the card).The image rules differ from Open Graph: Twitter wants a 2:1 aspect ratio (e.g. 1200 × 600) for large cards, and a 1:1 image (240 × 240 minimum) for summary. The picker outputs both; you can ship either size and X will scale.
If the same content lives at multiple URLs (with/without trailing slash, with tracking params, on a different domain), Google can split your link equity across them all. The <link rel="canonical"> tag tells Google which URL is the master copy. Rules:
https://freedevtool.org/page, not /page.?utm_source=… URLs should canonicalize to the no-param URL.The robots meta tag controls indexing at the page level. robots.txt blocks crawling; the meta tag blocks indexing. They are different — a URL blocked in robots.txt can still appear in search results without a snippet because Google never crawls it but trusts external links.
| Directive | Effect |
|---|---|
index, follow | Default. Index this page, follow its links. |
noindex | Do not index. Use for staging, admin, search results pages. |
nofollow | Do not pass link equity through any link on this page. |
noarchive | No cached copy. |
nosnippet | No description in SERP. |
max-snippet:N | Cap snippet length. |
max-image-preview:large|standard|none | Controls SERP thumbnail size. |
<meta name="keywords"> — Google has not used this since 2009. Bing also ignores it.<meta name="author"> — not a ranking signal. Use Schema.org Person/Article markup instead.<meta name="generator"> — adds bytes, no ranking value.<meta name="revisit-after"> — never used by any major engine.<meta name="distribution"> — same.<meta name="rating"> — only matters for SafeSearch context.Meta tags handle the basics; structured data (Schema.org JSON-LD) unlocks rich results — review stars, FAQ accordions, breadcrumb trails, recipe cards. The high-value schemas in 2026:
{Page} | Site Name work; Site Name on every page is a self-inflicted ranking hit.robots.txt, set to noindex in meta, and self-canonical to a different URL is a mess. Pick one strategy." breaks the attribute parser. Use HTML entities or ".Search results for "meta tag generator", "html meta tag generator", and "seo meta tag tool" return many tools that produce broken or incomplete output: missing canonical, no Twitter Card fallback, deprecated <meta name="keywords">, no live SERP preview. Three things actually matter when picking one in 2026: live preview accuracy (matches what Google and platforms actually render), inclusion of the modern essentials (canonical + OG + Twitter Card + structured-data hints), and whether the output is complete and copy-ready. Here is how the most-used meta tag generators compare in 2026:
| Tool | SERP preview | OG + Twitter Card | Canonical + robots | Includes deprecated tags | Cost |
|---|---|---|---|---|---|
| FreeDevTool Meta Tag Generator | Google + FB + X live | Both, with Card variants | Yes | No (clean output) | Free |
| metatags.io | FB + X + Slack + Pinterest | Both | Yes | No | Free + paid |
| seoptimer.com/meta-tag-generator | Limited | OG only | Partial | Yes (still emits keywords) | Free, lead-gen |
| sistrix.com/free-tools/snippet-generator | Google only | No | No | No | Free |
| mangools.com/free-seo-tools/serp-simulator | Google only | No | No | No | Free |
Six tags cover 99% of pages. One: <meta charset="UTF-8"> — must be in the first 1024 bytes of the head. Two: <meta name="viewport" content="width=device-width, initial-scale=1.0"> — required for mobile rendering and Core Web Vitals. Three: <title> ≤60 chars (Bing strict limit) — the strongest on-page SEO signal. Four: <meta name="description"> ≤155 chars — controls SERP snippet. Five: <link rel="canonical" href="https://..."> — solves duplicate content and HTTP/HTTPS variants. Six: <meta property="og:title">, og:description, og:image, og:url, og:type — handles all social shares (X reads OG fallback). Add <meta name="twitter:card" content="summary_large_image"> for the X large card layout. Skip: <meta name="keywords"> (Google ignored since 2009, treated as spam signal by some Bing scoring), <meta name="revisit-after"> (never honored), <meta name="author"> (low signal — use schema.org Person/Organization instead).
Three concrete numbers and where they come from. Title: Google truncates around 580 pixels on desktop, 920px on mobile — this varies by character width, so the safer rule is "stay under 60 characters". Bing has a hard 60-character truncation. Tools like this generator show character count with color coding (green <55, yellow 55-60, red >60). Description: Google shows ~158 characters on desktop, ~120 on mobile in 2026. Bing shows ~155. The safe target: 150-155 chars. Going longer doesn't hurt rankings but the snippet truncates with ellipsis. OG image: 1200×630 pixels (aspect ratio 1.91:1) is the universal recommendation. Below 600px wide → small thumbnail on Facebook. Below 200×200 → no image at all. File size cap: 8 MB on Facebook, 5 MB on X. The live previews in this tool use the exact same character-width calculation Google uses, so the truncation you see matches the SERP truncation.
<meta name="keywords"> or revisit-after. This tool excludes deprecated tags and only emits what Google, Bing, and social platforms actually parse in 2026.Pair the meta tag generator with the Open Graph Preview for cross-platform card mockups, the URL Slug Generator for clean canonical URLs, the SEO Tools hub for the broader on-page SEO toolkit, and the Web Performance Guide for Core Web Vitals coverage.
<head> section that provide metadata to search engines and social platforms. The title tag and meta description directly influence click-through rates from search results. Open Graph tags control social sharing appearance, while canonical URLs prevent duplicate content penalties. Well-optimized meta tags can significantly improve your organic traffic and social media engagement.og:) tags control how URLs appear when shared on Facebook, LinkedIn, and other platforms. Twitter Card (twitter:) tags do the same for Twitter/X. Twitter falls back to OG tags if twitter-specific tags aren't present. Both require images of at least 200×200px, with 1200×630px recommended for large cards. Key tags: og:title, og:description, og:image, twitter:card.All tools run in your browser, no signup required, nothing sent to a server.