<meta>

<meta> supplies metadata not represented by elements such as title or link. It is void and normally belongs in the document’s head.

Inspect the document, not a decorative effect

The UTF-8 declaration controls encoding. The viewport declaration sets a sensible mobile viewport; the description summarizes this example. The script makes that otherwise invisible description observable.

<h1>A small garden guide</h1>
<p id="metadata"></p>
<script>
  document.querySelector("#metadata").textContent = "Description: " + document.querySelector("meta[name=description]").content;
</script>

Attributes and limits

Use charset="utf-8" early: the encoding declaration must fit entirely within the first 1024 bytes. For a named metadata value, pair name with content. http-equiv supports specific directives; it does not turn every HTTP header into a working meta tag. HTTP server headers are still needed for many policies.

Set document language with lang on html, and a favicon with link. Do not describe them as arbitrary meta-tag functions. Keep mobile zoom available rather than setting restrictive maximum-scale or user-scalable values.

Search metadata

Google ignores meta name="keywords" for indexing and ranking. A useful description may inform a search snippet, but Google may select visible page content instead. Titles belong in title, and social platforms have their own metadata conventions.

Change the example’s description and update the result. The body heading stays unchanged; metadata does not rewrite visible article content.

Sources and browser support

MDN: meta describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

Google: supported metadata and title links explain search behavior without guaranteeing the displayed result.