Encodera

Thanks for reading!

Donate to the site — we work hard for you.

How to set the page title and description

Short answer

Add <title> and <meta name="description"> to <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Fresh coffee in the city centre — The Bean</title>
    <meta name="description" content="Specialty coffee, cakes and breakfast all day. Open daily from 8 am to 10 pm.">
  </head>
  <body>
    <p>The title is shown on the browser tab, not on the page.</p>
  </body>
</html>

Where it shows

<title> is the browser tab text, the bookmark name and the blue link in search results. Search engines often show the description under that link. They decide whether a person clicks on your result.

How to write them

  • The title — up to about 60 characters, the most important part first, the site name at the end.
  • The description — 120–160 characters: what the page is about and why to visit it.
  • Every page has its own title and description.

Search engines may replace the description with a fragment of the page text if they find it more accurate — but they readily use a good description.

Common mistake

Every page of the site gets the same <title>, for example the company name. They cannot be told apart in tabs and history, and a search engine does not understand how the pages differ. Write in the title what this particular page is about.

Functions used in this recipe

  • <title> — The page title: the text on the browser tab and in search results.
  • <meta> — Page metadata: encoding, phone settings, a description for search engines.
  • <head> — The service part of the page: encoding, tab title, linked styles and scripts.

Thanks for reading!

Donate to the site — we work hard for you.