HTML Meta Tags Reference
Browse all HTML meta tags with syntax, valid values, SEO impact, and best practices — plus a meta tag generator and checker
Your page ranks on page 2 of Google and you want to move to page 1. You’ve optimized the content, but the <meta name="description"> is auto-generated gibberish from your CMS, og:title is missing so social shares show the URL instead of a headline, and there’s no robots tag so Google is indexing your staging pages. Meta tags are invisible to users but control how every external system sees your page.
Why This Reference (Not the HTML Meta Tag Reference)
PureDevTools has two meta tag references. This one focuses on syntax, valid values, SEO impact, and best practices — concise and practical. The HTML Meta Tag Reference includes browser support tables and more detailed examples. Use whichever matches what you’re looking for.
What Are HTML Meta Tags?
HTML meta tags are HTML elements placed inside the <head> section of a document. They provide metadata — information about the page rather than content displayed to users. Browsers, search engines, and social media platforms all read meta tags to understand, rank, and display your pages correctly.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Free online developer tools." />
<title>PureDevTools</title>
</head>
<body>...</body>
</html>Meta tags fall into several categories:
| Category | Attribute | Example |
|---|---|---|
| Essential | charset, name="viewport" | Character encoding, mobile layout |
| SEO | name="description", name="robots" | Snippet text, crawl control |
| Open Graph | property="og:*" | Social sharing previews |
| Twitter Card | name="twitter:*" | Twitter/X previews |
| App & Display | name="theme-color", name="color-scheme" | Browser chrome color |
| HTTP-Equiv | http-equiv="*" | CSP, redirects, IE compat |
Essential Meta Tags
charset
The charset attribute is not a name or http-equiv meta — it’s its own attribute that specifies the character encoding of the document.
<meta charset="UTF-8" />Why it matters: Without a charset declaration, browsers must guess the encoding. Incorrect guesses corrupt non-ASCII characters (accented letters, CJK characters, symbols). UTF-8 supports virtually all human writing systems and is the universal standard.
Placement rule: The charset meta must appear within the first 1024 bytes of the document — before any content containing non-ASCII characters. Place it as the very first element in <head>.
viewport
<meta name="viewport" content="width=device-width, initial-scale=1" />The viewport meta tells mobile browsers how to scale and display the page. Without it, mobile browsers render the page at desktop width and scale it down — producing tiny, unreadable text.
Google’s mobile-first indexing means the mobile version of your page is indexed and ranked. Missing this tag is a significant SEO mistake.
Accessibility warning: Avoid user-scalable=no or maximum-scale=1. These prevent users from zooming — a WCAG 2.2 (Success Criterion 1.4.4) violation that fails accessibility audits.
| Setting | Effect |
|---|---|
width=device-width | Sets viewport width to device screen width |
initial-scale=1 | Sets initial zoom to 100% |
maximum-scale=5 | Allows zooming up to 500% (accessibility-friendly) |
user-scalable=no | Disables zooming (accessibility failure — avoid) |
SEO Meta Tags
description
<meta
name="description"
content="Free online JSON formatter and validator. Paste JSON and instantly format, validate, and highlight syntax errors."
/>The meta description is the single most important SEO meta tag for click-through rate (CTR). Google often uses it as the snippet shown in search results. A compelling description can significantly increase clicks, which in turn signals relevance and improves rankings.
Length guide:
- Minimum: 50 characters — too short provides no value
- Optimal: 50–160 characters — fully displayed in most search results
- Maximum: Anything beyond ~160 characters gets truncated
<!-- Too short (12 chars) -->
<meta name="description" content="JSON tool." />
<!-- Good (98 chars) -->
<meta name="description" content="Free online JSON formatter. Format, validate, and fix JSON errors instantly in your browser." />
<!-- Too long (truncated) -->
<meta name="description" content="PureDevTools provides a completely free JSON formatter and validator with syntax highlighting, error detection, key sorting, minification, and much more..." />SEO note: Google may override your description with content extracted from the page if it determines that content better answers the search query. Write accurate descriptions — but know that Google has editorial control over snippets.
keywords
<meta name="keywords" content="json formatter, json validator, json beautifier" />Google officially ignores the keywords meta tag (confirmed in 2009). Bing still reads it but treats over-stuffed keywords as a spam signal.
This tag is a historical artifact from early search engines that used keyword frequency as the primary ranking signal. Modern search engines analyze page content directly.
When to include: Only if you have a legacy reason. Keep to 5–10 genuinely relevant terms.
robots
<meta name="robots" content="index, follow" />The robots meta tag controls how search engine crawlers interact with a page. It’s one of the most powerful on-page SEO directives.
Core directives:
| Directive | Effect |
|---|---|
index | Page may be indexed (default) |
noindex | Page must not be indexed |
follow | Links on page may be followed (default) |
nofollow | Links on page must not be followed |
noarchive | Do not show a cached copy in search results |
nosnippet | Do not show a snippet or cached copy |
max-snippet:-1 | Allow any length snippet (unlocks full rich snippets) |
max-image-preview:large | Allow large image previews in search results |
max-video-preview:-1 | Allow any length video preview |
Recommended for public pages:
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />Block specific bots using their name:
<meta name="googlebot" content="noindex" />
<meta name="bingbot" content="noindex" />robots.txt vs. meta robots:
- robots.txt: Prevents crawling (crawler never visits the page)
- meta robots: Allows crawling but controls indexing
- If a page is blocked in robots.txt, the
noindexmeta is never read
Open Graph Tags
Open Graph (OG) is a protocol created by Facebook (now Meta) that controls how pages appear when shared on social platforms — Facebook, LinkedIn, Discord, Slack, WhatsApp, and more.
Required Open Graph Tags
Every page should have these four:
<meta property="og:title" content="JSON Formatter & Validator | PureDevTools" />
<meta property="og:description" content="Free online JSON formatter. Format, validate, and fix JSON. 100% browser-side." />
<meta property="og:image" content="https://puredevtools.tools/og/json-formatter.png" />
<meta property="og:url" content="https://puredevtools.tools/json-formatter" />og:image Specifications
The image is the most impactful OG element — it’s what users see before they read the title.
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="JSON Formatter tool preview" />Platform image requirements:
| Platform | Minimum | Recommended | Format |
|---|---|---|---|
| 200×200px | 1200×630px | JPEG, PNG | |
| 200×200px | 1200×627px | JPEG, PNG | |
| Discord | Any | 1200×630px | JPEG, PNG, GIF |
| 300×200px | 1200×630px | JPEG, PNG |
Must be an absolute URL — relative paths are not supported.
og:type Values
<meta property="og:type" content="website" /> <!-- tools, landing pages -->
<meta property="og:type" content="article" /> <!-- blog posts, documentation -->
<meta property="og:type" content="profile" /> <!-- user profile pages -->
<meta property="og:type" content="video.movie" /> <!-- video content -->Using article unlocks additional properties:
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-02-26T00:00:00Z" />
<meta property="article:author" content="https://example.com/author" />
<meta property="article:section" content="Technology" />Twitter Card Tags
Twitter Cards control how pages appear when shared on Twitter/X. Twitter falls back to Open Graph tags if Twitter-specific tags are absent.
Card Types
<!-- Small thumbnail + title + description -->
<meta name="twitter:card" content="summary" />
<!-- Large image above title + description (most common) -->
<meta name="twitter:card" content="summary_large_image" />Complete Twitter Card Setup
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@puredevtools" />
<meta name="twitter:title" content="JSON Formatter — PureDevTools" />
<meta name="twitter:description" content="Free JSON formatter and validator. Works in your browser." />
<meta name="twitter:image" content="https://puredevtools.tools/og/json-formatter.png" />
<meta name="twitter:image:alt" content="JSON Formatter screenshot" />Fallback chain: If twitter:title is missing, Twitter uses og:title. If twitter:image is missing, Twitter uses og:image. Minimum setup is just twitter:card — everything else falls back to OG.
Image specifications for Twitter/X:
summary_large_image: Minimum 300×157px, recommended 1200×628px, max 5MBsummary: Minimum 144×144px, recommended 400×400px, max 5MB- Supported formats: JPEG, PNG, WEBP, GIF (static)
App & Display Meta Tags
theme-color
<meta name="theme-color" content="#4f46e5" />Sets the browser chrome color on supporting mobile browsers. Supported by Chrome for Android (v39+), Samsung Internet, and Safari 15.4+.
Light and dark variants:
<meta name="theme-color" content="#4f46e5" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#1e1b4b" media="(prefers-color-scheme: dark)" />color-scheme
<meta name="color-scheme" content="light dark" />Tells the browser which color schemes your page supports. This prevents a white flash when loading in dark mode and allows browsers to correctly style form controls (inputs, selects, checkboxes) for the active color scheme.
| Value | Meaning |
|---|---|
light | Page supports only light mode |
dark | Page supports only dark mode |
light dark | Supports both, prefers light |
dark light | Supports both, prefers dark |
only light | Force light mode — opt out of automatic dark mode |
HTTP-Equiv Meta Tags
HTTP-Equiv meta tags simulate HTTP response headers. They allow setting certain headers via HTML when you cannot control the server’s response headers.
Content-Security-Policy
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-inline'"
/>CSP controls which resources the browser may load. It’s the primary defense against Cross-Site Scripting (XSS) attacks.
Limitations of meta CSP (compared to HTTP header CSP):
- Does not support
frame-ancestors— use headers instead - Does not support
report-uriorreport-todirectives - Does not support the
sandboxdirective
Prefer HTTP headers for full CSP support. Use meta CSP only when server configuration is not possible (e.g., static file hosting without header control).
Meta Refresh / Redirect
<!-- Redirect immediately to another URL -->
<meta http-equiv="refresh" content="0;url=https://example.com/new-page" />
<!-- Refresh the current page after 30 seconds -->
<meta http-equiv="refresh" content="30" />SEO consideration: Use server-side 301 redirects instead of meta refresh when possible. 301s pass full link equity (PageRank) and are processed faster. Meta refresh redirects:
- Pass less link equity to the destination
- Are slower (browser must load the page, parse the meta tag, then redirect)
- Non-instant refreshes may trigger WCAG 2.2.1 (Pause, Stop, Hide) accessibility failures
Complete Meta Tag Template
A production-ready meta tag setup for any public web page:
<!doctype html>
<html lang="en">
<head>
<!-- Essential -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- SEO -->
<title>Page Title | Brand Name</title>
<meta name="description" content="50–160 character page description with primary keyword." />
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<link rel="canonical" href="https://example.com/page-url" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page-url" />
<meta property="og:title" content="Page Title | Brand Name" />
<meta property="og:description" content="Compelling description for social sharing." />
<meta property="og:image" content="https://example.com/og/page-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />
<meta property="og:site_name" content="Brand Name" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourbrand" />
<!-- App & Display -->
<meta name="theme-color" content="#4f46e5" />
<meta name="color-scheme" content="light dark" />
</head>
<body>...</body>
</html>Common Meta Tag Mistakes
1. Missing or duplicate descriptions
Every page must have a unique meta description. Duplicate descriptions across your site are flagged as a quality issue by Google Search Console.
2. Relative URLs in og:image
<!-- Wrong — relative URL not supported -->
<meta property="og:image" content="/images/og.png" />
<!-- Correct — absolute URL required -->
<meta property="og:image" content="https://example.com/images/og.png" />3. noindex on pages you want indexed
A noindex directive will remove the page from Google’s index within days. Double-check that production pages don’t have leftover noindex tags from staging.
4. Viewport with maximum-scale=1
<!-- Fails WCAG 1.4.4 — users can't zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Correct -->
<meta name="viewport" content="width=device-width, initial-scale=1" />5. Meta refresh instead of server-side redirect
If your hosting allows it, always use a server-side 301. Meta refresh is a fallback of last resort.
6. Missing twitter:card when you have og tags
Twitter requires twitter:card to activate Twitter Card rendering. Without it, Twitter shows only a basic link with no preview, even if you have og:image.
Frequently Asked Questions
Does meta description directly affect Google rankings?
No — Google has confirmed that the meta description is not a ranking factor. However, a compelling description improves click-through rate (CTR), and CTR data may indirectly influence rankings through user engagement signals.
What’s the difference between robots.txt and meta robots?
robots.txt controls whether a crawler can visit a page. Meta robots (and the X-Robots-Tag HTTP header) control whether a crawler can index a page it has visited. If a page is blocked in robots.txt, the crawler never reads the meta robots tag.
Do I need both og:title and twitter:title?
Not necessarily. Twitter falls back to og:title if twitter:title is missing. Add twitter:title only if you want different text on Twitter versus other social platforms.
What is the correct og:image size?
1200×630 pixels is the gold standard that works across Facebook, LinkedIn, Discord, and Slack. Use PNG or JPEG format. Always use an absolute URL with https://.
Should I use meta keywords?
No. Google has ignored meta keywords since 2009. Bing reads them but treats excessive keywords as a spam signal. Omit the tag entirely for modern SEO.
When should I use noindex?
Use noindex on: thank-you pages after form submission, search result pages, admin/dashboard pages, staging/preview environments, duplicate content pages (prefer canonical instead), and pages with thin or low-quality content you don’t want indexed.
What is the color-scheme meta tag for?
It tells browsers which color modes your page supports. When set to light dark, browsers apply the correct default styles to system UI elements (scrollbars, form controls, focus rings) immediately — before your CSS loads. This prevents a visible flash of incorrectly styled elements.