<meta>

Allows you to define metadata on an HTML page.

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).

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>&lt;meta&gt;</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