In this article
The <meta> tag plays a crucial role in the transmission of metadata for an HTML page.
Always placed in the <head> section of an HTML document, it provides information about the page, such as:
- its encoding;
- its description;
- its keywords;
- or specific instructions for search engines (such as
noindex, which we will see below).
Good to know
Although the <meta> tag does not directly affect the visible content of the page, it is essential for SEO, accessibility, and the performance of web pages.
Structure and syntax of the <meta> tag
Basic structure and syntax
The <meta> tag is a self-closing tag (it closes itself) that follows a simple syntax. It uses attributes to specify the metadata.
Here is its general structure:
HTML
<meta [attribute="value"] />
Usage example
Let's take an example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A concise description of the page.">
<meta name="keywords" content="HTML, meta, SEO, tags">
<meta name="author" content="Louis-Nicolas">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of meta tag</title>
</head>
<body>
<h1>Welcome</h1>
<p>Explore the <strong><meta></strong> tag.</p>
</body>
</html>As we can see, there are several types of names (name) for a <meta> tag:
| Value | Description |
|---|---|
author | Indicates the author of the page. |
description | Provides a description of the page, useful for SEO. |
keywords | List of keywords associated with the page, also for SEO. |
viewport | Specifies how the page should adapt to different screens and devices, for responsive design. |
robots | Gives instructions to search engines (index, noindex, follow, nofollow). |
refresh | Allows the page to be automatically reloaded after a certain delay. |
generator | Indicates the software or platform that generated the content. |
rating | Specifies a classification for the content (general, mature). |
theme-color | Defines the theme color used by browsers. |
Attributes
The <meta> tag can use many attributes to define the metadata.
Attributes of the <meta> tag
| Attribute | Description | Example |
|---|---|---|
charset | Defines the character encoding. | <meta charset="UTF-8"> |
name | Specifies the name of the metadata. | <meta name="author" content="Louis-Nicolas"> |
content | Provides the value associated with the name or http-equiv attribute. | <meta name="description" content="Description of the page"> |
http-equiv | Provides specific information to the browser (e.g., cache, content type). | <meta http-equiv="refresh" content="30"> |
property | Used for specific metadata like Open Graph. | <meta property="og:title" content="Title for social media"> |
Compatibility
| Browser | Compatibility with <meta> |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | Yes |