<meta> Metadata
Page metadata such as the charset, viewport and description.
<meta> is a void element that lives in the head and describes the page. Two of them belong on every page: <meta charset="utf-8">, placed early in the head, and the viewport tag, which makes the layout fit a phone screen.
A name and content pair adds things like a description for search results or a theme color. Social media previews read Open Graph tags, which use a property attribute such as og:title. Major search engines ignore meta keywords.
The meta element section of the HTML standard (opens in a new tab) defines every standard name value and every http-equiv state. The two tags most pages need are covered step by step in the Viewport and Description lesson.
Void element: it has no content and no closing tag.
Syntax
<meta charset="utf-8">
<meta name="description" content="Short summary of the page">When to use it
Meta tags talk to software. They set the encoding, control how the page scales on phones, give search results a summary, color the browser interface and pass instructions such as noindex to crawlers. Each meta does one job, picked by its charset, name, http-equiv or property attribute.
Some of those jobs have better tools. A permanent redirect belongs on the server, not in http-equiv="refresh". Security headers are stronger when the server sends them, and only some of them work in a meta tag at all. Stylesheets and icons use <link>, never meta.
One rule breaks pages without any warning. <meta charset> has to appear within the first 1024 bytes of the file, and a long comment or a big inline script above it can push it too far down. The browser may then guess the wrong encoding and turn accented letters into garbage. For crawler instructions, Google documents every value of the robots meta tag (opens in a new tab) it supports.
Attributes
| Attribute | What it does |
|---|---|
charset | Character encoding. Always utf-8. |
name | Kind of metadata: viewport, description, author, theme-color... |
content | The value for name or http-equiv. |
http-equiv | Acts like an HTTP header, such as content-security-policy. |
media | Media query that limits the tag, used with theme-color. |
Live example
Edit the code and watch the preview.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Fresh bread and cakes baked every morning.">
<title>Sunny Bakery</title>
</head>
<p>Meta tags are invisible but tell browsers and search engines about the page.</p>More examples
Open Graph tags for sharing
When someone shares this page in a chat app or social network, the preview card is built from these og: tags, defined by the Open Graph protocol (opens in a new tab). Note the property attribute instead of name, and the absolute URLs.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fluffy Pancakes - Sunny Bakery</title>
<meta property="og:title" content="Fluffy pancakes in 15 minutes">
<meta property="og:description" content="Our family recipe, step by step.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://sunny.example/pancakes/">
<meta property="og:image" content="https://sunny.example/images/pancakes.jpg">
</head>
<body>
<h1>Fluffy pancakes</h1>
<img src="pancakes.svg" alt="A stack of pancakes" width="200" height="150">
</body>
</html>Keeping a page out of search results
A thank-you page shown after a sign-up has no value in search results. The robots meta tag with noindex asks search engines not to list it. The page still works normally for visitors, and its links can still be followed.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<title>Thanks for signing up - Sunny Bakery</title>
</head>
<body>
<h1>Thank you!</h1>
<p>Check your inbox to confirm your email address.</p>
</body>
</html>Tip: Every head starts with <meta charset="utf-8"> and the viewport tag.
Browser support
The meta element works in every browser and has since the early days of HTML; the short charset form came with HTML5 and is supported everywhere. Support for individual names varies: viewport matters mainly on mobile, and theme-color is used by some browsers only, as the theme-color support table (opens in a new tab) shows.
Accessibility
Leave user-scalable=no and maximum-scale=1 out of the viewport tag, because people need to zoom text (WCAG 1.4.4). Delayed meta refresh redirects are a bad idea too: they can pull readers away mid-sentence. Why zoom has to stay available is explained in the W3C note Understanding Resize Text (opens in a new tab).
Common mistakes
Wrong
<meta name="viewport" content="width=device-width, user-scalable=no">Right
<meta name="viewport" content="width=device-width, initial-scale=1">With zoom disabled, people with low vision cannot enlarge the page.
Frequently asked questions
Which meta tags does every HTML page need?
Two, plus one that is strongly recommended. Start the head with <meta charset="utf-8"> (within the first 1024 bytes) and add <meta name="viewport" content="width=device-width, initial-scale=1"> so phones display the page properly. Then write a <meta name="description">, since search engines often show it as the snippet under your link. The HTML Cheat Sheet head and Open Graph templates (opens in a new tab) collect the usual head and Open Graph tags in one place.
Does the meta keywords tag help SEO?
No. Google and the other major search engines stopped using <meta name="keywords"> for ranking years ago, after it was heavily abused. It does no harm. It also does nothing. Spend that time on a clear <title>, a useful meta description and good headings and content. Google's documentation on supported meta tags (opens in a new tab) lists the ones it reads, and keywords is not on it.
Practise it
- The Page Skeleton (Module 1: First Page)
- Head and Body (Module 1: First Page)
- Project: Hello World Page (Module 1: First Page)
- Title and Charset (Module 7: Head and Metadata)
- Viewport and Description (Module 7: Head and Metadata)
- Favicon and Social Previews (Module 7: Head and Metadata)