What Is a Meta Tag?

Meta tags are small snippets of HTML that live inside a page's <head> section and describe the page to browsers, search engines, social networks, and other machines that parse web pages. Unlike the content that users read on screen, meta tags are invisible to visitors but send signals that shape how a page is indexed, how it appears in search results, how it behaves on mobile devices, and how it looks when shared on social media.

The name "meta" comes from Greek, meaning "about." Meta tags are, literally, tags about the page — metadata. The HTML specification has supported meta tags since the earliest versions of HTML, and while individual tags have come and gone, the basic pattern has stayed the same for three decades: a <meta> element with a name (or property, for Open Graph) and a content attribute.

This guide walks through every meta tag that matters in 2026: the ones search engines use for ranking and display, the ones that control browser and mobile behaviour, the ones that drive social sharing previews, and the ones you can safely ignore. Along the way we cover syntax, examples, common mistakes, and tools for checking meta tags on your own pages — starting with the free meta tag checker.

Check your meta tags now: Use the free meta tag checker to see every meta tag on any URL, or run a full SEO audit to check meta tags alongside 30+ other on-page signals.

Meta Tag Syntax

The basic meta tag syntax is straightforward: a self-closing <meta> element with attributes. The most common attributes are:

name — the name of the meta tag (e.g. description, viewport, robots)
content — the value of the meta tag
property — used by Open Graph and some other protocols instead of name
http-equiv — simulates an HTTP response header (rarely used today)
charset — the character encoding (only used on the <meta charset> tag)

A typical page's head might look like this:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example Page - Brand Name</title>
  <meta name="description" content="A concise summary of the page for search results.">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com/example-page">
  <meta property="og:title" content="Example Page">
  <meta property="og:description" content="Summary for social shares.">
  <meta property="og:image" content="https://example.com/og-image.png">
</head>

Meta tags only work inside <head>. Placed in the body, they are ignored by every major parser.

The Title Tag

Technically the <title> element is not a <meta> element, but it lives in the head alongside meta tags and is almost always discussed with them. The title tag is the single most important on-page SEO element and has its own dedicated guide: see what is a title tag and what is a meta title.

<title>How to Write Title Tags - RankNibbler</title>

The title appears in three critical places:

Browser tab
Google search results (as the blue, clickable headline)
Social share previews (if no Open Graph title is set)

Check your title with the title tag checker. For copy formulas and character limits, see how to write title tags.

Meta Description

The meta description summarises the page in 120-160 characters. It does not directly influence rankings — Google confirmed this as far back as 2009 — but it heavily affects click-through rate from search results.

<meta name="description" content="A concise, compelling summary of what this page offers, written in 140-160 characters to fit in Google's SERP snippet.">

Google may display the description you wrote, or it may generate its own from page content. Either way, a well-written description influences how often users click. Use the meta description checker to verify length and check for issues. See how to write meta descriptions for copy formulas.

Meta Robots

The meta robots tag controls how search engine crawlers handle the page. It is one of the most important meta tags because a single misconfigured robots tag can remove your entire site from Google's index.

<meta name="robots" content="index, follow">

Common values:

Value	Effect
`index`	Allow indexing (default)
`noindex`	Prevent indexing
`follow`	Follow links on the page (default)
`nofollow`	Do not follow links on the page
`noarchive`	Do not show cached copy
`nosnippet`	Do not show a snippet in SERP
`max-snippet:[N]`	Limit snippet length to N characters
`max-image-preview:[size]`	Control image preview size (`none`, `standard`, `large`)
`max-video-preview:[N]`	Limit video preview length in seconds
`unavailable_after:[date]`	De-index after a specified date

You can target specific crawlers by replacing robots with a bot name:

<meta name="googlebot" content="noindex">
<meta name="bingbot" content="noindex">

Check your robots directives with the robots directives checker.

Meta Viewport

The viewport meta tag controls how a page is displayed on mobile devices. Without it, mobile browsers assume the page is designed for a desktop screen and render it at a zoomed-out scale, making text tiny and forcing users to pinch to zoom.

<meta name="viewport" content="width=device-width, initial-scale=1">

This is the modern recommended value. It tells the browser: use the device's actual width, and start at 1x zoom. Without this tag (or with misconfigured values like maximum-scale=1, user-scalable=no), Google will flag the page as not mobile-friendly and rankings will suffer.

Other viewport options:

minimum-scale=1.0 — prevent zooming below 100%
maximum-scale=5.0 — allow up to 5x zoom
user-scalable=yes — allow pinch-zoom (recommended for accessibility)

Avoid user-scalable=no — it harms accessibility and is flagged by the accessibility checker.

Meta Charset

The charset meta tag declares the character encoding of the page. In virtually every modern site, this is UTF-8.

<meta charset="UTF-8">

This must be one of the first elements in <head> — within the first 1,024 bytes of the HTML — so browsers know how to decode the rest of the page. Missing or wrong charset declarations cause special characters (accented letters, em dashes, smart quotes) to render as gibberish.

The older syntax using http-equiv="Content-Type" still works but is unnecessary in HTML5:

<!-- Old, still valid but verbose -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Canonical Tag

Although technically a <link> element rather than a <meta> tag, the canonical tag is essential metadata and is covered in depth in our canonical tag guide.

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

Check your canonical with the canonical URL checker.

Open Graph Tags

Open Graph is a protocol developed by Facebook and now used by virtually every social platform to generate rich preview cards when a URL is shared. Without Open Graph tags, social shares display plain text and often no image, drastically reducing click-through.

<meta property="og:title" content="Page Title for Social Shares">
<meta property="og:description" content="Description for the social share preview.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Brand Name">
<meta property="og:locale" content="en_US">

Key properties:

Property	Purpose	Notes
`og:title`	Share card headline	Falls back to title tag if absent
`og:description`	Share card body text	Falls back to meta description
`og:image`	Share card image URL	1200x630 recommended, absolute URL required
`og:url`	Canonical URL	Helps when shared with tracking params
`og:type`	Content type	`website`, `article`, `product`, etc.
`og:locale`	Language/region	Format: `en_US`, `fr_FR`

For full details see the Open Graph guide. Check your OG tags with the Open Graph checker.

Twitter Card Tags

Twitter (now X) originally used its own card protocol. While Twitter now falls back to Open Graph, explicit Twitter tags give finer control.

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

Card types:

summary — small square thumbnail with title and description
summary_large_image — large rectangular image above title (recommended for most content)
app — mobile app card
player — embeddable video or audio

Other Useful Meta Tags

Theme colour

<meta name="theme-color" content="#0a0a0a">

Sets the colour of the mobile browser's UI chrome on supported devices (Chrome on Android, Safari on iOS in PWA mode).

Format detection

<meta name="format-detection" content="telephone=no">

Prevents mobile browsers from auto-linking sequences of digits as phone numbers.

Apple-specific tags

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="App Name">

Control how the page behaves when added to an iOS home screen.

Referrer policy

<meta name="referrer" content="strict-origin-when-cross-origin">

Controls what referrer information the browser sends when users click outbound links.

Content Security Policy

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Better set as an HTTP header, but supported via meta for pages without server control.

Meta Tags That Do NOT Affect SEO

Some meta tags are widely used but have no impact on search rankings. They are either ignored by modern search engines or serve purposes unrelated to SEO.

Meta keywords

Once important in the 1990s, Google has ignored the meta keywords tag since 2009. Bing, Yandex, and most other search engines also ignore it. Adding keywords here is harmless but pointless. Some SEO teams still fill them in for internal documentation; that is a bad habit because it sometimes exposes keyword strategy to competitors via view-source.

Meta author

<meta name="author"> is informational only. It does not influence rankings. Author information that does affect SEO lives in structured data (schema.org Person or Author on Article schema).

Meta generator

Identifies the CMS or static site generator (e.g. WordPress 6.5 or Hugo 0.133). No SEO value. Some admins remove it for security through obscurity.

Meta revisit-after

A legacy tag meant to tell crawlers how often to re-crawl. Never honoured by Google and effectively dead.

Meta distribution

A legacy tag with values like global or local. Never used by modern search engines.

Meta rating

A legacy tag meant to declare content rating. Superseded by modern content filtering at the OS and browser level.

Meta Tag Priority and Conflicts

When multiple signals conflict, search engines apply a priority order. Understanding this order prevents accidental deindexing.

HTTP header overrides meta tag — an X-Robots-Tag: noindex HTTP header overrides any <meta name="robots" content="index"> in HTML.
More restrictive directive wins — if two meta robots tags exist with conflicting values, the more restrictive (noindex over index) is usually honoured.
Canonical is a hint — unlike robots directives, canonicals are hints. Google may pick a different canonical if other signals conflict.
Disallowed pages cannot be noindexed — if robots.txt blocks the URL, Google cannot crawl it and therefore cannot see the meta noindex tag. The URL may still appear in SERPs without a snippet.

How Meta Tags Affect Different Parts of SEO

Indexing

Meta robots controls whether pages enter the index at all. See our guide on what is indexing.

Ranking

Title tag content is a ranking factor. Meta description content is not, directly, but affects CTR which in turn affects rankings indirectly.

Display

Title, description, image preview, and date are all controlled by or influenced by meta tags.

Mobile

Viewport determines whether Google's mobile-friendly test passes.

Social

Open Graph and Twitter cards control share appearance.

Security

CSP, referrer policy, and X-Content-Type-Options affect security posture.

Common Meta Tag Mistakes

Missing viewport tag — causes mobile-friendliness issues.
Duplicate title or description tags — usually from a CMS plugin conflict.
Noindex on production accidentally — classic deploy mistake; staging config leaks to prod.
Meta tags in the body — ignored by crawlers.
Open Graph image without absolute URL — social platforms cannot resolve relative paths.
Open Graph image too small — Facebook requires at least 600x315; 1200x630 recommended.
Title and OG title identical and generic — wastes the opportunity to tailor for social.
Using user-scalable=no — harms accessibility.
Charset not UTF-8 — causes encoding issues with special characters.
Conflicting robots directives — multiple robots tags with different values.
Canonical to a 404 or 301 — invalid canonical, ignored by Google.
Too many meta tags — bloat does not hurt rankings but slows parsing on very large pages.

Auditing Meta Tags

Single-page check

Use the meta tag checker to fetch any URL and see every meta tag it declares, formatted cleanly and with notes on any missing or problematic tags.

Title and description specifics

Use the title tag checker and meta description checker for character counts, pixel widths, and truncation warnings.

SERP preview

Use the SERP snippet generator to see how title and description will appear in Google results.

Social share preview

Use the Open Graph checker to preview how shares will appear on Facebook, LinkedIn, and Twitter.

Full site scan

A site audit crawls every page and reports meta tag issues at scale — missing descriptions, duplicate titles, invalid robots directives, missing OG images.

Generate new tags

Use the meta tag generator to produce a full set of optimised meta tags for a new page.

Implementation in CMS Platforms

WordPress

SEO plugins (Yoast, Rank Math, All in One SEO) add a metabox to every post/page for title, description, robots, OG, and Twitter tags. Only use one SEO plugin at a time to avoid duplicate tags.

Shopify

Shopify generates basic meta tags automatically. For finer control, edit the theme's theme.liquid file or install a dedicated SEO app.

Next.js

Use the Metadata API in the app router or next/head in the pages router.

export const metadata = {
  title: 'Page Title',
  description: 'Page description.',
  openGraph: {
    title: 'OG Title',
    description: 'OG Description',
    images: ['https://example.com/og.png'],
  },
};

Static sites (Hugo, Eleventy, Astro)

Configure meta tags in layout templates with front matter overrides per page.

Meta Tags for Different Page Types

Homepage

Broad, brand-focused title. Description that summarises the site's purpose. Open Graph with brand logo/hero image.

Blog post

Article-focused title with keyword. Description that previews the article. og:type="article". Author, published date, and modified date via structured data.

Product page

Product name + key attribute in title. Benefit-focused description. og:type="product". Product schema via JSON-LD.

Landing page

Campaign-specific title. CTA-driven description. Rich OG image for social shares. See our guide on what is a landing page.

Category page

Category name + scope in title. Description summarising the category. Self-referencing canonical.

Case Study: A Meta Tag Cleanup

An online magazine with 14,000 articles was stuck at an organic plateau despite high-quality content. A full site audit revealed the issues: 3,200 pages had duplicate meta descriptions copied from an old template, 1,800 had no OG image, and an accidental <meta name="robots" content="noindex"> in the shared sidebar template was blocking 2,400 older articles from being indexed. After a 3-week cleanup — fixing the noindex, generating unique descriptions for the duplicates, and auto-generating OG images from article titles — organic traffic grew 46% in the following quarter.

The lesson: meta tag issues are often silent. Pages do not throw errors when their meta tags are wrong; they just underperform. Regular audits catch these problems before they compound.

Meta Tag Best Practices

Every page has a unique title and description — no duplicates across the site.
Title tag under 60 characters, description 140-160 — fits Google's display limits.
Include a <meta charset="UTF-8"> as the first element in head — within the first 1,024 bytes.
Always include the modern viewport tag — required for mobile-friendliness.
Self-referencing canonical on every indexable page — see canonical tag guide.
Explicit robots directive only when non-default — most pages do not need a robots tag at all.
Full Open Graph set on any shareable page — title, description, image, url, type.
OG image is 1200x630, under 5MB, on an absolute URL — maximises platform compatibility.
Twitter card tag for fine-tuned Twitter behaviour — summary_large_image in most cases.
Do not use meta keywords — useless and potentially competitive-intelligence exposure.
Monitor with a regular audit — duplicate descriptions and noindex leaks are easy to miss.

Frequently Asked Questions

Are meta tags still important in 2026?

Yes — title, description, robots, viewport, canonical, and Open Graph tags all remain essential. Only a handful of legacy tags (keywords, revisit-after, distribution) have been deprecated.

What is the difference between a meta tag and a title tag?

Strictly, the title tag is a <title> element, not a <meta> element. But both live in <head> and are informally grouped as "metadata." See what is a meta title.

Do meta keywords still work?

No. Google has ignored meta keywords since 2009. Bing has also confirmed it does not use them for ranking. They are dead.

How many meta tags should I have?

As many as are needed for your page type. A basic page needs 6-8 (charset, viewport, title, description, robots, canonical, OG basics). Content-heavy sites often have 15-25.

Where do I put meta tags?

Inside the <head> section of the HTML document. Tags outside head are ignored.

Can I have multiple of the same meta tag?

Generally no. Duplicate title, description, or robots tags lead to unpredictable behaviour. Open Graph allows multiple og:image tags for multiple image options.

Do meta tags affect page speed?

Negligibly. The few hundred bytes of meta tags have no measurable impact on load time.

Do I need meta tags for PDFs?

PDFs cannot have HTML meta tags, but they have their own metadata (title, author, subject, keywords) that search engines read. For canonicalisation, use the HTTP Link header.

What is the difference between name and property attributes?

Standard HTML meta tags use name. Open Graph and some other protocols use property. Functionally similar; just a convention difference.

Do meta tags differ between desktop and mobile?

No, meta tags are identical across devices. Responsive design is handled in CSS, not meta tags (except for viewport, which applies only to mobile).

Are hreflang tags meta tags?

Technically they are <link> elements, not <meta> elements. But they live in head alongside meta tags and serve the same general purpose of describing the page.

Do meta tags affect structured data?

No directly. Structured data is a separate system (JSON-LD, Microdata, RDFa). See what is structured data.

Can meta tags be set via JavaScript?

Yes, but risky for SEO. Crawlers may not execute JavaScript in time to see meta tags set dynamically. Server-render meta tags when possible.

What is the most important meta tag?

The title tag. Runner-up: meta robots (because a single wrong value can deindex everything).

Meta Tag Evolution Over Time

Meta tags have evolved significantly across HTML's history. Tracing the evolution helps explain why certain tags are still widely seen but no longer useful, and which newer tags have taken their place.

Early HTML (1995-2005)

The original meta tag specification focused on document metadata: author, keywords, description, generator. Search engines used meta keywords as a direct ranking signal. This led to mass keyword stuffing and ultimately the deprecation of the keywords tag.

SEO maturity era (2005-2012)

Google shifted to content-based ranking, deprecated meta keywords, and began placing weight on title tags and content quality. Robots meta tag became the primary way to control indexation. Meta description became primarily a CTR lever.

Social and mobile era (2010-2020)

Open Graph (2010, Facebook), Twitter Cards (2012), and viewport tags (2010-2011) became essential. Mobile-friendliness became a ranking factor, making viewport mandatory.

Modern era (2020-present)

Core Web Vitals and page experience signals matter alongside meta tags. Structured data has taken over many signalling roles. Theme color, referrer policy, and format-detection tags address browser-level behaviour.

The trajectory is clear: meta tags are moving from ranking signals (largely deprecated) to display and behaviour signals (still active). A modern page uses meta tags for display (title, description, OG), behaviour (viewport, robots, referrer), and browser integration (theme-color, apple-specific), while relying on structured data and content for ranking.

Meta Tags and Crawler Behaviour

Different crawlers interpret meta tags slightly differently. Knowing the differences helps prevent surprises.

Directive	Googlebot	Bingbot	Other
`noindex`	Respected	Respected	Most respect
`nofollow`	Respected	Respected	Most respect
`noarchive`	Respected	Respected	Most respect
`max-snippet`	Respected	Respected	Varies
`unavailable_after`	Respected	Supported	Varies
`noimageindex`	Respected	Respected	Varies
Canonical	Hint	Hint	Hint (when supported)
Meta keywords	Ignored	Ignored	Yandex partial

For most sites, optimising for Googlebot covers Bing as well. Edge cases come up in markets where Yandex, Baidu, or Naver have meaningful share — each has its own robot with slightly different directive interpretation.

Server-Side vs Client-Side Meta Tag Rendering

Meta tags must be present in the initial HTML response for crawlers to reliably see them. Client-side rendering, where JavaScript modifies meta tags after page load, is risky.

Google does execute JavaScript when crawling, but with a delay: first pass is HTML-only, second pass (after rendering) incorporates JavaScript-generated content. Meta tags changed only after first pass may be missed for important signals like noindex, canonical, and robots directives.

Server-side rendering patterns:

Next.js App Router

// app/page.tsx
export const metadata = {
  title: 'Page Title',
  description: 'Page description',
  robots: { index: true, follow: true },
  openGraph: { images: ['/og.png'] }
};

Astro

---
const title = 'Page Title';
const description = 'Page description';
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
</head>

WordPress

Template rendering is server-side by default. SEO plugins inject meta tags into the wp_head hook, which fires during PHP rendering before the HTML reaches the client.

Meta Tags for Rich Results

While structured data handles most rich-result eligibility, several meta tags influence rich result display:

max-image-preview:large — enables large image thumbnails in SERP
max-snippet:-1 — allows unlimited snippet length (Google chooses what to show)
max-video-preview:-1 — allows unlimited video preview

A modern, SEO-optimised robots meta tag often looks like:

<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">

This tells Google to index the page, follow links, and display rich previews without artificial length limits.

Meta Tags for Privacy and Compliance

Privacy regulations (GDPR, CCPA, CPRA) require careful handling of how pages describe themselves and collect data. Several meta-level considerations:

Referrer policy

The referrer meta tag controls what referrer information the browser sends when users navigate away. Strict policies (no-referrer-when-downgrade, strict-origin-when-cross-origin) protect user privacy:

<meta name="referrer" content="strict-origin-when-cross-origin">

Robots meta for sensitive pages

Login pages, user dashboards, checkout flows, and error pages should be noindexed. Accidental indexing of these pages can leak user data via SERP snippets.

Content Security Policy via meta

While CSP is best delivered as an HTTP header, it can be set via meta for sites without server control:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://cdn.example.com">

Meta Tags and AI/LLM Crawlers

A new category of crawlers has emerged: LLM training crawlers (GPTBot, ClaudeBot, PerplexityBot) and AI search crawlers (Google-Extended, CCBot, PerplexityBot-Search). Site owners increasingly want granular control over whether pages are included in AI training or AI-generated answers.

Current directives:

<meta name="robots" content="noai, noimageai">
<meta name="GPTBot" content="noindex">
<meta name="Google-Extended" content="noindex">

Industry consensus on these directives is still forming. Some crawlers respect noai/noimageai; others require their own named directive. Most authoritative control is via robots.txt rather than meta tags, but both layers can help.

Meta Tag Troubleshooting

When meta tags do not behave as expected, the diagnosis is usually one of:

Duplicate tags

Multiple SEO plugins, template layers, or A/B testing scripts inserting competing meta tags. Check source for multiple <title>, <meta name="description">, or <link rel="canonical">.

Meta tag in body

Content that breaks out of the head (usually invalid HTML) can cause parsers to consider the body started early, ignoring any meta tags that follow.

Wrong attribute

Confusing name and property attributes. Open Graph uses property; standard meta uses name. Mixed usage is silently ignored.

Cached response

CDN or browser caching serving stale HTML with old meta tags. Purge cache after meta tag updates.

JavaScript rewriting after render

Template engines that rewrite meta tags after initial render create a race condition with crawlers. Check rendered-vs-source HTML via Chrome devtools.

Improper escaping

Meta content with unescaped special characters (&, ", <) can break parsing. Use HTML entities or proper escaping.

Meta Tag Budget and Priority

On any given page, meta tags add up. A site with 25+ meta tags per page is not uncommon. While size rarely matters for performance, clarity does — cluttered heads are harder to maintain.

Tier-one meta tags every page should have:

Charset (UTF-8)
Viewport
Title
Description
Canonical
Robots (when non-default)

Tier-two for most pages:

Open Graph (title, description, image, url, type)
Twitter card
Theme color

Tier-three situational:

Apple-specific PWA tags
Referrer policy
Format detection
CSP via meta
Hreflang link tags

Prioritise tier-one across every page. Add tier-two where social sharing and mobile integration matter. Tier-three only where specifically required.

Tools for Working with Meta Tags

Tool	Purpose
Meta Tag Checker	Inspect all meta tags on any page
Meta Tag Generator	Generate a full set of meta tags for a new page
Title Tag Checker	Check title length, pixel width, keyword placement
Meta Description Checker	Check description length and CTR potential
Open Graph Checker	Preview social share cards
Canonical URL Checker	Verify canonical tag setup
Robots Directives Checker	Verify robots meta tag
SERP Snippet Generator	Preview SERP appearance
Site Audit	Find meta tag issues across the whole site

Meta Tags in Headless and Decoupled Stacks

Modern web architectures increasingly separate content management from rendering. Headless CMSes (Contentful, Sanity, Strapi, DatoCMS) store content, while decoupled frontends (Next.js, Nuxt, Astro, SvelteKit) render pages. Meta tags in this model are typically defined in the frontend framework using per-page metadata APIs, with values sourced from the CMS.

Common patterns in headless setups:

CMS provides SEO fields per content type (title, description, OG image, canonical override)
Frontend reads these fields and renders meta tags in the head
Defaults and fallbacks handle missing fields
Site-wide defaults (theme color, twitter:site handle) are hard-coded in the frontend

Pitfalls unique to headless stacks:

CMS preview URLs accidentally indexable (missing noindex on preview environments)
Meta tags defined only in frontend, missing when API returns unexpected data
Static-site-generated pages with stale meta tags until rebuild
Image CDN URLs in OG tags expiring or rotating

Meta Tags and Edge Rendering

Edge rendering (Vercel Edge Functions, Cloudflare Workers, Netlify Edge) lets meta tags be personalised per request without the latency of a full server round-trip. Use cases include A/B testing title tags, localising OG images, or showing different robots directives based on the request origin.

Example: an edge function that sets noindex for geography-restricted content based on the visitor's country:

export default async function handler(request) {
  const country = request.geo?.country;
  const html = await fetch(origin).then(r => r.text());

  if (RESTRICTED_COUNTRIES.includes(country)) {
    return new Response(
      html.replace('<head>', '<head><meta name="robots" content="noindex">')
    );
  }

  return new Response(html);
}

Powerful but requires care: inconsistent meta tags across regions can confuse crawlers. Use with deliberate intent, not as a workaround for other issues.

Meta Tags and Accessibility

Several meta tags have direct accessibility implications that go beyond SEO.

Viewport scaling

Avoid user-scalable=no — it prevents users with low vision from zooming. Accessibility auditors flag this immediately.

Language declaration

The lang attribute on the <html> element (not a meta tag but closely related) tells screen readers which language pronunciation rules to use. Missing or wrong language causes screen readers to read content with the wrong accent and pronunciation.

Title tag

Screen readers announce the title when the page loads. Clear, descriptive titles help users orient themselves. Generic or empty titles ("Untitled Document") are accessibility failures.

Meta description

Not directly read by screen readers, but good descriptions improve search result usability for assistive technology users who scan SERPs.

Run the accessibility checker to surface meta-tag-related accessibility issues.

Meta Tags for Progressive Web Apps

Progressive Web Apps (PWAs) extend the browser with app-like capabilities: installable to home screen, offline support, push notifications. Several meta tags configure PWA behaviour.

<!-- iOS PWA -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="App Name">

<!-- Theme color for browser chrome -->
<meta name="theme-color" content="#0a0a0a">

<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.json">

<!-- iOS splash screens -->
<link rel="apple-touch-startup-image" href="/splash.png">

<!-- iOS icons -->
<link rel="apple-touch-icon" href="/apple-icon.png">

Modern PWAs use the Web App Manifest for most configuration, but iOS still requires the legacy Apple-specific meta tags for optimal support.

Meta Tags and Performance Budgets

Meta tag markup is tiny — typically 1-3KB total — and has no measurable impact on page performance. But the assets meta tags reference can have significant impact.

Common performance issues tied to meta tag references:

OG image too large — 1200x630 at high compression should be under 200KB; many sites ship 1-2MB OG images
Favicon variants — some sites reference 10+ favicon variants, all fetched on first load
Apple touch icons — multiple sizes fetched even on non-iOS devices
External canonical URLs — extra DNS lookup if canonical points to different hostname

Optimise by consolidating icon references, using SVG where possible, and compressing referenced images aggressively.

Future of Meta Tags

Meta tags continue to evolve. Trends to watch:

AI-specific directives — noai, noimageai, and similar tags for controlling LLM training
Enhanced Open Graph — new OG types for video, audio, and interactive content
Privacy-focused defaults — browser vendors are tightening referrer and tracking behaviour by default
Structured data expansion — JSON-LD continues to absorb signals that were once in meta tags
Server-side replaces client-side — frameworks increasingly push meta tag rendering to the server for reliability

Keeping meta tag usage current is a small but ongoing task. Review every 6-12 months against current best practice.

Meta Tags and Site Migrations

Site migrations are one of the riskiest moments for meta tag integrity. Whether you are moving to a new domain, switching platforms, or restructuring URLs, every meta tag on every page needs to survive the transition.

Pre-migration audit:

Document current titles, descriptions, and canonicals on all indexable pages
Export the site's meta tag state via a full crawl
Map each old URL to its new URL with redirect rules
Verify new platform supports all needed meta tag types

Common migration failures:

New CMS adds duplicate meta tags that old CMS did not
Staging environment meta tags leaked to production (noindex on live pages is catastrophic)
Default template meta tags overriding custom overrides
Open Graph images pointing to old CDN that was decommissioned
Canonical URLs still pointing to old domain after DNS switch

Run a full meta tag audit within 48 hours of migration launch, then weekly for the first month. The site audit tool surfaces meta tag issues at scale quickly.

Final Thoughts

Meta tags are the connective tissue between your page and the machines that consume it — search engines, social platforms, browsers, and every other system that fetches HTML and reads its head. Get them right and your pages index correctly, display well in SERPs, share cleanly on social, and render properly on every device. Get them wrong and pages disappear from Google, share cards look broken, and mobile rendering breaks.

The good news: the meta tags that matter are a short list. Title, description, robots, viewport, charset, canonical, and a handful of Open Graph and Twitter tags covers 95% of what most sites need. Getting those right on every page, keeping them unique, monitoring for duplicates and accidental noindex, and auditing regularly is the entire meta tag playbook.

Start by running the meta tag checker on your homepage and a few key pages, then use the meta tag generator to build any missing tags, and finish with a full site audit to find issues at scale.

Next step: Run the free meta tag checker on any URL to see every meta tag, or use the SEO audit tool to check meta tags alongside 30+ other on-page signals.

Last updated: March 2026