The <meta> element
The <meta> tag gives browsers and search engines information about a page that has no other tag of its own. It sits in the <head> and usually pairs a name with a content value. The most important ones set the character set, make the page fit mobile screens (viewport) and provide the description shown in search results.
Last updated: October 3, 2026
Quick facts
| Category | Metadata content |
| Content model | Empty — it’s a void element |
| Tag omission | Void element — no end tag, ever |
| Permitted parents | A <head> element (meta with itemprop can also appear in the body) |
| DOM interface | HTMLMetaElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| charset | The page’s character encoding — always UTF-8, placed first in the head |
| name | What kind of information this is, e.g. description, viewport, robots, theme-color, author |
| content | The value that goes with name, http-equiv or property |
| http-equiv | Acts like an HTTP header, e.g. content-security-policy or refresh |
| media | Applies a theme-color only for a media query, e.g. dark mode |
| property | Not part of HTML itself: used by Open Graph social tags such as og:title and og:image |
Common examples
The essential meta tags
Every page should start with these three: the character set, the mobile viewport and a unique description.
Social sharing previews (Open Graph)
These tags control the title, text and image shown when someone shares your page on Facebook, LinkedIn, X or messaging apps.
Keep a page out of search results
A noindex robots tag tells search engines not to list the page — useful for thank-you pages or internal search results.
Browser color in light and dark mode
The theme-color tag tints the browser bar on phones, and the media attribute lets you choose a color for each mode.
meta robots vs robots.txt
They control different things. A robots.txt file tells search engines which addresses they may crawl (visit). A <meta name="robots" content="noindex"> tag tells them not to index (list) a page they have visited.
That difference matters: a page blocked in robots.txt can still appear in Google if other sites link to it, because Google never sees its noindex tag. To keep a page out of search results, allow crawling and use the meta robots tag — don’t combine noindex with a robots.txt block.
| meta robots | robots.txt | |
|---|---|---|
| Controls | Indexing (listing) | Crawling (visiting) |
| Applies to | One page | Whole site or folders |
| Keeps a page out of Google | Yes (noindex) | Not reliably |
Common mistakes to avoid
- The same description on every page. Each page needs its own; duplicates give search engines nothing useful to show.
- Blocking zoom.
maximum-scale=1oruser-scalable=noin the viewport stops people with low vision from zooming in. - A missing or late charset.
<meta charset="UTF-8">should be the very first thing in the head, or accented letters and symbols can break. - Stuffing keywords. The keywords meta tag is ignored by Google, and keyword-stuffed descriptions put people off clicking.
Accessibility & SEO tips
- Write descriptions of roughly 120–158 characters that say what the page offers and why someone should click.
- Use an Open Graph image of about 1200 × 630 pixels so shared links look good everywhere.
- Never disable zooming in the viewport tag — it’s one of the most common accessibility failures on mobile sites.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.
Tutorials: How to link CSS to HTML, How to make a responsive website