HTML <meta> Tag

The <meta> tag carries metadata — information about the page rather than content shown on it. Browsers, search engines, and social networks read this metadata to decide how to render the page, how to index it, and how to display it when it is shared. Nothing inside a <meta> element appears on the page itself.

A document can contain several <meta> tags, and almost every modern page needs at least a couple of them (character encoding and the viewport). All <meta> tags live inside the <head> element, alongside the <title> and <link> tags.

This page covers the meta tags you will actually use day to day: encoding, the viewport, the SEO description, the http-equiv header simulation, and the Open Graph / Twitter tags that control how links look when shared.

Syntax

The <meta> tag is a void element — it has no content and no closing tag. In XHTML it must be self-closed (<meta />).

A <meta> tag uses one of two patterns:

A name/content pair (or property/content for Open Graph) — name is what kind of metadata it is, content is its value.
A standalone charset attribute, or an http-equiv/content pair that simulates an HTTP response header.

You must supply the content attribute whenever name or http-equiv is present. The content attribute is not used together with charset.

Character encoding: `<meta charset>`

This tag tells the browser which character encoding to use when decoding the document. It should be the first thing inside the <head>, and it should always be UTF-8:

<meta charset="UTF-8">

Why UTF-8? It can represent every character in every language — accents, emoji, currency symbols, CJK scripts — using a single, universal encoding. Without a declared (or correctly guessed) encoding, characters like é, —, or ” can turn into garbled "mojibake". UTF-8 is the encoding of the modern web; the HTML standard requires it for new documents.

Place it early so the browser knows the encoding before it parses any text.

The viewport meta tag

The viewport tag is what makes a page responsive on phones and tablets. Without it, mobile browsers assume the page was built for a desktop and render it at roughly 980px wide, then shrink the result — leaving tiny, zoomed-out text. Add this and the page adapts to the device:

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

What each part does:

width=device-width — set the layout viewport to the device's own width (e.g. 390px on a phone) instead of a fake 980px desktop width.
initial-scale=1.0 — start at a 1:1 zoom level, so one CSS pixel maps to one device-independent pixel on load.

This single line is required for any site that intends to look good on mobile. Avoid adding user-scalable=no or a maximum-scale below 5 — it blocks pinch-zoom and hurts accessibility for low-vision users.

SEO: the `description` meta tag

The description is the summary search engines often show under your page title in results, and that social platforms fall back to. Aim for a concise, compelling sentence of roughly 150–160 characters — longer text gets truncated with an ellipsis.

<meta name="description" content="Learn how the HTML meta tag controls encoding, the viewport, SEO, and social sharing — with copy-paste examples.">

The description does not directly boost rankings, but a clear, relevant summary improves click-through rates from the results page.

Other `name`/`content` values

The name attribute names the kind of metadata; content holds its value. Common values:

<!-- Author of the page -->
<meta name="author" content="Jane Doe">

<!-- Software that generated the page -->
<meta name="generator" content="Next.js">

<!-- Control how search engines crawl and index this page -->
<meta name="robots" content="index, follow">
<!-- ...or keep a page out of search results -->
<meta name="robots" content="noindex, nofollow">

<!-- Tint the mobile browser UI to match your brand -->
<meta name="theme-color" content="#10b981">

<!-- Limit the referrer information sent to other sites -->
<meta name="referrer" content="strict-origin-when-cross-origin">

Note: The keywords meta tag (<meta name="keywords" content="…">) is ignored by all major search engines today and can safely be left out. The old scheme attribute was removed in HTML5 and should not be used.

Simulating HTTP headers: `http-equiv`

The http-equiv attribute lets a <meta> tag stand in for an HTTP response header. The most common values:

<!-- Declare the content type and encoding (legacy alternative to charset) -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Auto-refresh the page every 60 seconds -->
<meta http-equiv="refresh" content="60">

<!-- ...or redirect to another URL after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://www.w3docs.com">

Accessibility caveat: Avoid http-equiv="refresh". An auto-refreshing or auto-redirecting page can disorient users, interrupt screen readers, and trap people who need more time to read — it fails WCAG success criteria. Prefer a real server-side HTTP redirect, or a visible link the user clicks.

When someone shares your link on Facebook, LinkedIn, Slack, or X, those platforms read Open Graph tags to build the preview card (title, summary, image). Open Graph tags use the property attribute instead of name:

<meta property="og:title" content="HTML meta Tag — Full Guide">
<meta property="og:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">
<meta property="og:url" content="https://www.w3docs.com/learn-html/html-meta-tag.html">
<meta property="og:type" content="website">

X (Twitter) layers its own tags on top, using name:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML meta Tag — Full Guide">
<meta name="twitter:description" content="Encoding, viewport, SEO, and social meta tags explained with examples.">
<meta name="twitter:image" content="https://www.w3docs.com/images/meta-preview.png">

Provide an absolute og:image URL (around 1200×630px) so previews show a large, sharp image rather than a tiny thumbnail or none at all.

A complete `<head>` example

Here is how these tags fit together in a real document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML meta Tag — Full Guide</title>
    <meta name="description" content="Encoding, viewport, SEO, and social meta tags explained with copy-paste examples.">
    <meta name="author" content="Jane Doe">
    <meta name="theme-color" content="#10b981">

    <!-- Open Graph -->
    <meta property="og:title" content="HTML meta Tag — Full Guide">
    <meta property="og:description" content="Everything the meta tag controls, with examples.">
    <meta property="og:image" content="https://www.w3docs.com/images/meta-preview.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Page content goes here</h1>
  </body>
</html>

Attributes

Attribute	Value	Description
`charset`	character_set	Defines the character encoding of the document (use `UTF-8`).
`content`	text	Defines the value of the `name`, `property`, or `http-equiv` attributes.
`http-equiv`	content-type, default-style, refresh	Simulates an HTTP response header and determines its processing.
`name`	application-name, author, description, generator, keywords, robots, theme-color, referrer, viewport	Names the metadata held in `content`.
`property`	og:title, og:description, og:image, …	Names an Open Graph property (used by social platforms).

The <meta> tag also supports the Global Attributes and the Event Attributes.

<head> — the container for all metadata.
<title> — the page title shown in tabs and search results.
<link> — links external resources such as stylesheets and favicons.
<base> — sets a base URL for all relative links on the page.
<style> — embeds CSS directly in the head.

Practice

What is the purpose of a meta tag in HTML?

It provides metadata about the HTML document, such as character set, description, and viewport settings.It displays the webpage content to the user.It is the main container for visible page elements.It is used to display images on the webpage.

Syntax

Character encoding: <meta charset>

The viewport meta tag

SEO: the description meta tag

Other name/content values

Simulating HTTP headers: http-equiv

Social sharing: Open Graph and Twitter cards

A complete <head> example