Describe your page with titles and metadata

One idea at a time

The head contains information about a document rather than its visible article. You already used title, character encoding, and the viewport setting. Now add a description that summarizes what this particular page offers. A useful description is a short explanation for a person, not a list of repeated keywords.

A title should identify this page and distinguish it from neighboring pages. Garden notebook is suitable for a homepage, while How I water basil describes a specific entry. Keep the visible h1 and the document title consistent in meaning, even though they do not need to be identical word for word.

Search engines decide what to display in their results. They may use a description or choose text from the page. Adding metadata does not guarantee indexing, ranking, or an exact snippet. This lesson's preview is an illustration of the information you supplied, not a live search result.

Recall the syntax: head wraps the page information, title wraps the browser-tab text, and meta is a void element with no closing tag. On a description meta element, name identifies the kind of information and content holds its value. It stays in head and does not create a visible paragraph. The earlier charset and viewport settings are meta elements too, with different attributes.

Separate the tab name from page settings

Walk through an example

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>How I water basil — Garden notebook</title>
  <meta name="description" content="My simple routine for checking basil soil and watering gently.">
</head>

The title names a specific entry and its notebook. The description explains what a reader will learn. Both belong in head. charset supports the text encoding, and viewport helps mobile browsers use an appropriate layout width. None of these elements inserts a visible paragraph into body.

See it happen: try a small change

<title>My page</title>
<meta name="description" content="Welcome to my website.">

Sharing information and search information are related

Metadata means information describing the page. Open Graph is a set of metadata fields understood by many sharing services. It can suggest the title, description, image, and URL used when a page is shared. Platforms can handle and cache these fields differently. For a published page, use the actual public URL and an accessible absolute image URL. A filename that only exists on your computer cannot become a working social preview image. The example.com addresses below are placeholders, not resources provided by this lesson; leave those optional fields out until you have real public URLs.

The sharing example still uses meta, not a new tag. property names an Open Graph field, such as og:title for the shared title or og:image for the image URL. content supplies that field's value. These sharing fields use property rather than the name attribute used by the ordinary page description.

A meta keywords tag is not a useful Google ranking technique. A meta refresh is not needed for an ordinary beginner page and can interrupt reading by reloading or redirecting it. Concentrate on clear titles, accurate descriptions, useful content, and links that work before exploring more specialized metadata.

The viewport setting alone does not solve narrow-screen layout problems. Content must still fit. Metadata also does not replace accessible headings, image alternatives, or form labels in the body. Each part of the document has a different job; use the appropriate place for the information you want to communicate.

<meta property="og:title" content="How I water basil">
<meta property="og:description" content="A simple soil-checking routine.">
<meta property="og:url" content="https://example.com/basil.html">
<meta property="og:image" content="https://example.com/images/basil.jpg">

Try it in your browser

Edit the existing head in your HTML document; do not paste a second head inside body. Replace its title and add one description meta element, keeping charset and viewport. Save and refresh to check the tab. Read the description in your editor; it does not become visible page text. Sharing URLs are optional and must describe a page you have actually published.

A common wrong turn

Do not treat the illustrative preview as a promise of what Google or a sharing app will display. Also avoid reusing one vague description on every page. Match the title and description to the actual content being offered.

Change one thing

Compare a vague title with a specific one in the preview. Then read only the description and predict the content. If the body does not deliver that content, revise the description.

Go to the source

• MDN: Describe your page with titles and metadata ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.