Home >Web >HTML reference – elements and attributes >meta – metadata

meta – metadata

<meta name="name" content="value">

Information about the page that has no element of its own: the character encoding, settings for mobile display, a description for search engines or instructions for robots. One element carries one piece of information – either charset, or a pair name + content (or http-equiv + content).

Default display: display: none
End tag: none – a void element, it has no content and no end tag
Content: nothing
Where it can be used: head (charset within the first 1024 bytes of the document)
DOM interface: HTMLMetaElement

Attributes

charset – the encoding of the document, today always utf-8.
name + content – a named piece of information: viewport, description, robots, theme-color, color-scheme, author, referrer…
http-equiv + content – a substitute for an HTTP header: refresh (redirect or reload after N seconds), content-security-policy.
media – with theme-color: a color only for the light or dark mode ((prefers-color-scheme: dark)).
property – not part of HTML; Open Graph uses it (og:title, og:image) for link previews on social networks.

Examples

The basis of every page – the encoding and the mobile display:

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

A description for search results, an instruction for robots and the color of the browser bar on phones:

<meta name="description" content="Sourdough bread and pastries from our own oven in Springfield. Open daily from 6 am.">
<meta name="robots" content="noindex, follow">
<meta name="theme-color" content="#8bc34a">
<meta name="theme-color" content="#1b2a10" media="(prefers-color-scheme: dark)">

A link preview on social networks (Open Graph):

<meta property="og:title" content="Sourdough bread">
<meta property="og:image" content="https://www.example.com/img/bread.jpg">

Things to watch out for

<meta charset="utf-8"> should come first in the head – the browser looks for it only in the first 1024 bytes. If it does not find it and the server does not send the encoding in an HTTP header, accented characters may come out garbled.
Without viewport a phone shows the page as on a desktop (about 980 px wide) and scaled down. Do not use user-scalable=no or maximum-scale=1 – they prevent people with poorer eyesight from zooming in on the text.
description is no guarantee – Google often shows a different snippet from the page in results. Google does not use keywords for ranking (as of October 2026).
Firefox on desktop does not support theme-color yet (Chrome 73, Safari 15, as of October 2026); the page works the same without it.
A redirect via http-equiv="refresh" is slower than a redirect on the server (301) and bothers screen readers – use it only when there is no other way.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 1, Safari 1. As of October 2026 (MDN browser-compat-data).