HTML & CSS reference

<meta>

Page metadata: encoding, phone settings, a description for search engines.

Syntax

<meta name="description" content="text">

Attributes

Parameter	Type	Description
charset	utf-8	The encoding of the page.
name	description \| viewport \| robots \| …	Which property of the page the tag describes.
content	text	The value of that property.
property	og:title \| og:image \| …	Open Graph properties for previews in social networks and messengers.

Examples

The most needed <meta> tags:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Fresh coffee and cakes in the city centre.">
    <title>The Bean</title>
  </head>
  <body>
    <p>Meta tags are invisible but read by browsers and search engines.</p>
  </body>
</html>

A link preview for social networks (Open Graph):

<meta property="og:title" content="The Bean coffee shop">
<meta property="og:image" content="https://example.com/cover.jpg">
<p>These tags change how a shared link looks.</p>

Notes

Put charset first in <head>, otherwise the browser may misread the letters. Without viewport a phone shows a shrunken copy of the desktop version, and media queries do not work. The tag is single — it has no closing part.

Related recipes

In the tutorial

Meta tags and SEO — What goes into head — title, meta description, viewport, Open Graph for social networks, the site icon, canonical and robots.

Thanks for reading!