<meta> - The Metadata Element

The `<meta>` Element

Metadata HTML 2.0

The meta element provides structured metadata about the HTML document. This metadata is not displayed on the page but is used by browsers, search engines, social media platforms, and other web services to understand and present your content.

Quick Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A beginner's guide to HTML metadata">
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>The meta tags above define character encoding, viewport settings, and a description.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A beginner's guide to HTML metadata">
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>The meta tags above define character encoding, viewport settings, and a description.</p>
</body>
</html>

Syntax

<meta charset="UTF-8">
<meta name="name" content="value">
<meta http-equiv="directive" content="value">
<meta property="property" content="value">

Meta elements are void elements (self-closing) and must be placed inside the <head> element. They use different attribute combinations to define different types of metadata.

Attributes

Core Attributes

Attribute	Description	Example Values
`charset`	Character encoding for the document	`UTF-8` (recommended)
`name`	Name of the metadata property	`description`, `keywords`, `author`, `viewport`
`content`	Value of the metadata property	Varies by `name` or `http-equiv`
`http-equiv`	HTTP header directive	`refresh`, `content-type`, `content-security-policy`
`property`	Property for Open Graph/RDFa	`og:title`, `og:image`, `og:description`

Attribute Combinations

Different meta tags use different attribute combinations:

Charset declaration: <meta charset="UTF-8">

Named metadata: <meta name="..." content="...">

HTTP equivalents: <meta http-equiv="..." content="...">

Open Graph/RDFa: <meta property="..." content="...">

Common Use Cases

Character Encoding Declaration

Always declare UTF-8 encoding as the first element in <head>:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Character Encoding Example</title>
</head>
<body>
<p>This page supports Unicode: ✓ ♥ ★ 日本語 中文 العربية</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Character Encoding Example</title>
</head>
<body>
<p>This page supports Unicode: ✓ ♥ ★ 日本語 中文 العربية</p>
</body>
</html>

Viewport for Responsive Design

Essential for mobile-friendly websites:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page</title>
<style>
  body { font-family: system-ui; padding: 1rem; }
  .box { background: #e0e7ff; padding: 1rem; border-radius: 8px; }
</style>
</head>
<body>
<div class="box">
  <h1>Responsive Design</h1>
  <p>The viewport meta tag ensures this page scales properly on mobile devices.</p>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page</title>
<style>
  body { font-family: system-ui; padding: 1rem; }
  .box { background: #e0e7ff; padding: 1rem; border-radius: 8px; }
</style>
</head>
<body>
<div class="box">
  <h1>Responsive Design</h1>
  <p>The viewport meta tag ensures this page scales properly on mobile devices.</p>
</div>
</body>
</html>

Common viewport values:

Basic responsive: width=device-width, initial-scale=1.0

Prevent zoom: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no (not recommended for accessibility)

Minimal UI on iOS: width=device-width, initial-scale=1.0, minimal-ui

SEO Description

The description appears in search engine results:

<meta name="description" content="Learn HTML meta tags with comprehensive examples covering SEO, social media, and responsive design. Beginner-friendly guide with code samples.">

Keywords Meta Tag

<meta name="keywords" content="HTML, meta tags, SEO, web development">

Author and Creator Information

<meta name="author" content="Jane Doe">
<meta name="creator" content="Jane Doe">
<meta name="publisher" content="Example Publishing">

Search Engine Directives (Robots)

Control how search engines crawl and index your page:

<!-- Allow indexing and following links (default) -->
<meta name="robots" content="index, follow">

<!-- Prevent indexing but allow following links -->
<meta name="robots" content="noindex, follow">

<!-- Prevent indexing and following links -->
<meta name="robots" content="noindex, nofollow">

<!-- Prevent showing cached version -->
<meta name="robots" content="noarchive">

<!-- Prevent showing description from DMOZ/ODP -->
<meta name="robots" content="noodp">

<!-- Prevent image indexing -->
<meta name="robots" content="noimageindex">

<!-- Combined directives -->
<meta name="robots" content="noindex, nofollow, noarchive">

Target specific search engines:

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

Open Graph tags control how your content appears when shared on Facebook, LinkedIn, and other platforms:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta property="og:title" content="Amazing Web Development Guide">
<meta property="og:description" content="Master HTML with our comprehensive guide">
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:url" content="https://example.com/guide">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Web Dev Tutorials">
<title>Amazing Web Development Guide</title>
</head>
<body>
<h1>Open Graph Example</h1>
<p>When shared on social media, this page will display the title, description, and image defined in the Open Graph meta tags.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta property="og:title" content="Amazing Web Development Guide">
<meta property="og:description" content="Master HTML with our comprehensive guide">
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:url" content="https://example.com/guide">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Web Dev Tutorials">
<title>Amazing Web Development Guide</title>
</head>
<body>
<h1>Open Graph Example</h1>
<p>When shared on social media, this page will display the title, description, and image defined in the Open Graph meta tags.</p>
</body>
</html>

Essential Open Graph properties:

og:title — Title of the content (appears as the main headline)

og:description — Brief description (appears below the title)

og:image — Image URL (displays as thumbnail, recommended 1200x630px)

og:url — Canonical URL of the page

og:type — Type of content (website, article, video.movie, etc.)

og:site_name — Name of the overall site

Additional properties for articles:

<meta property="article:published_time" content="2024-01-15T09:00:00Z">
<meta property="article:author" content="https://example.com/authors/jane">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="HTML">

Twitter Cards

Twitter uses its own meta tags (though it falls back to Open Graph):

<!-- Summary card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Amazing Web Development Guide">
<meta name="twitter:description" content="Master HTML with our comprehensive guide">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">

<!-- Large image card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:creator" content="@author">
<meta name="twitter:title" content="Amazing Web Development Guide">
<meta name="twitter:description" content="Master HTML with our comprehensive guide">
<meta name="twitter:image" content="https://example.com/large-image.jpg">

Card types:

summary — Title, description, and small square image

summary_large_image — Similar to summary but with a large prominent image

app — Mobile app promotion card

player — Video/audio player card

Theme Color for Mobile Browsers

Set the browser UI color on mobile devices:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#4f46e5">
<title>Theme Color Example</title>
<style>
  body {
    margin: 0;
    padding: 2rem;
    background: #4f46e5;
    color: white;
    font-family: system-ui;
  }
</style>
</head>
<body>
<h1>Theme Color</h1>
<p>On mobile browsers, the address bar color matches the theme-color meta tag (#4f46e5).</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#4f46e5">
<title>Theme Color Example</title>
<style>
  body {
    margin: 0;
    padding: 2rem;
    background: #4f46e5;
    color: white;
    font-family: system-ui;
  }
</style>
</head>
<body>
<h1>Theme Color</h1>
<p>On mobile browsers, the address bar color matches the theme-color meta tag (#4f46e5).</p>
</body>
</html>

Support media queries for light/dark mode:

<meta name="theme-color" content="#4f46e5" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1e1b4b" media="(prefers-color-scheme: dark)">

HTTP Equivalent Directives

The http-equiv attribute provides HTTP header directives:

Refresh/Redirect:

<!-- Refresh page every 30 seconds -->
<meta http-equiv="refresh" content="30">

<!-- Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://example.com/new-page">

Content Type (Legacy):

<!-- Old way (use charset attribute instead) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Modern way -->
<meta charset="UTF-8">

Content Security Policy:

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

X-UA-Compatible (IE):

<!-- Force IE to use latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Here’s a comprehensive example combining all major meta tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character encoding (must be first) -->
  <meta charset="UTF-8">

  <!-- Viewport for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO basics -->
  <meta name="description" content="Comprehensive guide to HTML meta tags covering SEO, Open Graph, Twitter Cards, and responsive design. Expert tips for web developers.">
  <meta name="keywords" content="HTML, meta tags, SEO, Open Graph, web development">
  <meta name="author" content="Jane Doe">
  <meta name="robots" content="index, follow">

  <!-- Open Graph for Facebook, LinkedIn, etc. -->
  <meta property="og:title" content="Complete HTML Meta Tags Guide">
  <meta property="og:description" content="Comprehensive guide to HTML meta tags covering SEO, Open Graph, Twitter Cards, and responsive design.">
  <meta property="og:image" content="https://example.com/images/meta-guide-social.jpg">
  <meta property="og:url" content="https://example.com/guides/html-meta-tags">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="Web Dev Academy">
  <meta property="article:published_time" content="2024-12-11T10:00:00Z">
  <meta property="article:author" content="Jane Doe">

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@webdevacademy">
  <meta name="twitter:creator" content="@janedoe">
  <meta name="twitter:title" content="Complete HTML Meta Tags Guide">
  <meta name="twitter:description" content="Comprehensive guide to HTML meta tags covering SEO, Open Graph, Twitter Cards, and responsive design.">
  <meta name="twitter:image" content="https://example.com/images/meta-guide-twitter.jpg">

  <!-- Mobile browser theme -->
  <meta name="theme-color" content="#4f46e5">

  <!-- Page title -->
  <title>Complete HTML Meta Tags Guide | Web Dev Academy</title>
</head>
<body>
  <h1>Complete HTML Meta Tags Guide</h1>
  <p>Your content here...</p>
</body>
</html>

SEO Impact

How Search Engines Use Meta Tags

Meta Description: Appears as the snippet text in search results below the page title. While not a direct ranking factor, a compelling description improves click-through rates, which can indirectly boost rankings.

Meta Robots: Directly controls whether search engines index and crawl your page. Use noindex for duplicate content, admin pages, or private sections.

Meta Keywords: Ignored by Google and most search engines since the early 2000s due to spam. Historical artifact with no modern SEO value.

Viewport: Required for mobile-friendliness, which is a ranking factor. Pages without proper viewport settings may be penalized in mobile search results.

Open Graph and Twitter Cards: Not ranking factors but improve social sharing, which can drive traffic and indirect SEO benefits.

<meta name="description" content="Learn Python programming with 50+ interactive tutorials. Master data structures, algorithms, and web development. Start your coding journey today.">

Clear value proposition, includes key topics, compelling call-to-action, and stays under 160 characters.

<meta name="description" content="Python tutorials. Learn Python. Best Python course. Python programming. Python lessons. Free Python.">

Keyword stuffing, repetitive, no clear value, reads poorly, and may be ignored by search engines.

Testing Your Meta Tags

Validate how your meta tags appear:

Google Search Results: Use Google Search Console to see how Google renders your pages.

Facebook Sharing: Test with Facebook Sharing Debugger.

Twitter Cards: Validate with Twitter Card Validator.

Open Graph: Use OpenGraph.xyz to preview all social platforms.

Accessibility Considerations

Viewport and Zoom

Good
Avoid

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

Allows users to zoom and pan. Accessible to users with low vision who need magnification.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Disables zoom, which violates WCAG 2.1 Level AA accessibility guidelines. Users with low vision cannot magnify content.

Meta Refresh Accessibility Issues

Automatic page refreshes can be disorienting and problematic:

Screen reader interruption: Content being read is suddenly replaced, losing the user’s position.

Seizure risk: Unexpected content changes can trigger seizures in photosensitive users.

Lost form data: Users filling out forms may lose their input when the page refreshes.

If refresh is absolutely necessary, provide adequate warning and allow users to disable it:

<!-- Give users 120 seconds to read/disable -->
<meta http-equiv="refresh" content="120; url=https://example.com/updated">

Better approach with JavaScript that can be paused:

<script>
  // Allow user control over refresh
  let autoRefresh = true;
  setTimeout(() => {
    if (autoRefresh) window.location.href = 'https://example.com/updated';
  }, 120000);
</script>
<button onclick="autoRefresh = false">Disable Auto-Refresh</button>

Language and Character Encoding

Always combine <meta charset> with the lang attribute on the <html> element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accessible Page</title>
</head>

This combination ensures screen readers pronounce content correctly and browsers render characters properly.

Browser Support

Browser	Version	Notes
Chrome	1+	Full support including viewport, theme-color
Firefox	1+	Full support
Safari	1+	Full support, theme-color since Safari 15
Edge	12+	Full support
IE	3+	Basic support, limited Open Graph support

Charset: Universally supported since HTML 4.

Viewport: Supported by all mobile browsers since iOS Safari 3 and Android 2.1.

Theme-color: Chrome 39+, Safari 15+, Edge 79+. Ignored by browsers that don’t support it.

Open Graph: Not browser-specific, consumed by social media platforms.

HTTP-equiv refresh: Widely supported but discouraged for accessibility and SEO.

Container for metadata elements. All meta tags must be placed inside the head element. Learn more →

</span> </p> <div class="body astro-v5tidmuc"><p>Defines the document title shown in browser tabs and search results. Required in every HTML document. <a href="/elements/document-structure/title/">Learn more →</a></p></div> </article> <article class="card sl-flex astro-v5tidmuc"> <p class="title sl-flex astro-v5tidmuc"> <svg aria-hidden="true" class="icon astro-v5tidmuc astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.333em;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/></svg> <span class="astro-v5tidmuc"><link></span> </p> <div class="body astro-v5tidmuc"><p>Links external resources like stylesheets, icons, and canonical URLs. Another critical metadata element. <a href="/elements/document-structure/link/">Learn more →</a></p></div> </article> <article class="card sl-flex astro-v5tidmuc"> <p class="title sl-flex astro-v5tidmuc"> <svg aria-hidden="true" class="icon astro-v5tidmuc astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.333em;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/></svg> <span class="astro-v5tidmuc"><base></span> </p> <div class="body astro-v5tidmuc"><p>Specifies base URL for relative links. Affects how URLs in the document are resolved. <a href="/elements/document-structure/base/">Learn more →</a></p></div> </article> </div> <div class="sl-heading-wrapper level-h2"><h2 id="specifications">Specifications</h2><a class="sl-anchor-link" href="#specifications"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Specifications”</span></a></div> <ul> <li><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element">WHATWG HTML Living Standard</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta">MDN Web Docs: meta element</a></li> <li><a href="https://ogp.me/">Open Graph Protocol</a></li> <li><a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitter Card Documentation</a></li> </ul> </div> <footer class="sl-flex astro-3yyafb3n"> <div class="meta sl-flex astro-3yyafb3n"> </div> <div class="pagination-links print:hidden astro-u2l5gyhi" dir="ltr"> <a href="/elements/document-structure/title/" rel="prev" class="astro-u2l5gyhi"> <svg aria-hidden="true" class="astro-u2l5gyhi astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg> <span class="astro-u2l5gyhi"> Previous <br class="astro-u2l5gyhi"> <span class="link-title astro-u2l5gyhi"><title> - Document Title Element</span> </span> </a> <a href="/elements/document-structure/link/" rel="next" class="astro-u2l5gyhi"> <svg aria-hidden="true" class="astro-u2l5gyhi astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg> <span class="astro-u2l5gyhi"> Next <br class="astro-u2l5gyhi"> <span class="link-title astro-u2l5gyhi"><link> - The External Resource Link Element</span> </span> </a> </div> </footer> </div> </div> </main> </div> </div> </div> </div> </body></html>

<meta> - The Metadata Element

The <meta> Element

Quick Example

Syntax

Attributes

Core Attributes

Attribute Combinations

Common Use Cases

Character Encoding Declaration

Viewport for Responsive Design

SEO Description

Keywords Meta Tag

Author and Creator Information

Search Engine Directives (Robots)

Open Graph Tags for Social Media

Twitter Cards

Theme Color for Mobile Browsers

HTTP Equivalent Directives

Complete SEO and Social Media Example

SEO Impact

How Search Engines Use Meta Tags

Writing Effective Meta Descriptions

Testing Your Meta Tags

Accessibility Considerations

Viewport and Zoom

Meta Refresh Accessibility Issues

Language and Character Encoding

Browser Support

Related Elements

The `<meta>` Element