<meta>
The <meta> element represents metadata about the page used by the browser or search engines, including description, keywords, and character sets. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The <meta> element represents metadata about the page used by the browser or search engines, including description, keywords, and character sets. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML attribute | ||||||
charset | 1 | 12 | 1 | 3 | 18 | 2 |
| The content attribute specifies the value of a metadata name defined by the name attribute. It takes a string as its value, and the expected syntax varies depending on the name value used. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The http-equiv attribute of the meta element allows you to provide processing instructions for the browser as if the response that returned the document included certain HTTP headers. The metadata is document-level metadata that applies to the whole page. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The name attribute of the meta element provides metadata in name-value pairs. When a element has a name attribute, a content attribute defines the corresponding value. The metadata is document-level metadata that applies to the whole page. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| The HTMLMetaElement interface contains descriptive metadata about a document provided in HTML as elements. This interface inherits all of the properties and methods described in the HTMLElement interface. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLMetaElement.content property gets or sets the content attribute of pragma directives and named meta data in conjunction with HTMLMetaElement.name or HTMLMetaElement.httpEquiv. For more information, see the content attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLMetaElement.httpEquiv property gets or sets the pragma directive or an HTTP response header name for the HTMLMetaElement.content attribute. For more details on the possible values, see the http-equiv attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLMetaElement.media property enables specifying the media for theme-color metadata. | 93 | 93 | 106 | 15 | 93 | 15 |
| The HTMLMetaElement.name property is used in combination with HTMLMetaElement.content to define the name-value pairs for the metadata of a document. The name attribute defines the metadata name and the content attribute defines the value. | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
html.elements.meta.http-equiv.content-type http-equiv="content-type" | ≤59 | 12 | 1 | ≤10.1 | ≤59 | ≤10.3 |
html.elements.meta.http-equiv.refresh http-equiv="refresh" | 1 | 12 | 1 | 1 | 18 | 1 |
| The referrer value for the name attribute of the meta element controls the HTTP Referer header of requests sent from the document. If specified, you define the referrer using a content attribute in the element as a keyword value. | 17 | 79 | 36 | 11.1 | 18 | 12 |
- Until Chrome 46, `content` values weren't constrained to the values listed in the spec.
- The `referrer` value wasn't taken into account when navigation was happening via the context menu or middle click until Firefox 39.
- Until Chrome Android 46, `content` values weren't constrained to the values listed in the spec.
Syntax
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの説明文">
<meta name="robots" content="index, follow">
<meta property="og:title" content="OGPタイトル">Live demo
Metadata vs content
Use a card to separate invisible metadata from visible document content.
Meta checklist
Keep metadata concise and focused on document behavior and discovery.
Use cases
Strengthen structure
Use <meta> to make the document outline, grouping, or semantics more explicit.
Improve meaning
Apply <meta> when clearer HTML structure helps users and tools understand the content.
Cautions
- Test <meta> in your target browsers and input environments before depending on it as a primary behavior.
Accessibility
- Prefer semantic structure that improves navigation and interpretation for assistive technologies, not just visual organization.
Related links
Powered by web-features