Meta tags and SEO

SEO (search engine optimization) is the work of making search engines understand a page correctly and show it well. Much of it happens in <head>: that is where meta tags live — service information about the page for the browser, search engines and social networks. They are not visible on the page itself, so the previews in this lesson show only the text from <body>.

The page title

<title> is the most important meta tag. It is shown on the browser tab, in bookmarks and as the large link in search results:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cinnamon cappuccino — a 5-minute recipe</title>
  </head>
  <body>
    <h1>Cinnamon cappuccino</h1>
  </body>
</html>

A good title is short, under 60 characters, and unique for every page. The key word goes first.

The description

<meta name="description"> is a couple of sentences about the page content. A search engine often shows them under the title. Here is roughly how it looks in the results:

<style>
  .snippet { font-family: Arial, sans-serif; max-width: 520px; }
  .snippet a { color: #1a0dab; font-size: 20px; text-decoration: none; }
  .snippet .url { color: #006621; font-size: 14px; }
  .snippet p { color: #4d5156; font-size: 14px; margin: 4px 0; }
</style>
 
<div class="snippet">
  <div class="url">example.com › recipes › cappuccino</div>
  <a href="#">Cinnamon cappuccino — a 5-minute recipe</a>
  <p>How to make a cinnamon cappuccino at home without a coffee machine: ingredients, ratios and a step-by-step recipe with photos.</p>
</div>

The link is the <title>, and the text below it is the description from a line like <meta name="description" content="How to make...">. A description is about 150 characters long.

The phone window

We have already seen <meta name="viewport"> in the page skeleton. Without it a phone renders the page about 980 pixels wide and shrinks it — the text becomes tiny:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Coffee shop</title>
  </head>
  <body>
    <p>On a phone this page takes exactly the width of the screen.</p>
  </body>
</html>

Search engines take mobile friendliness into account, so this line belongs on every page.

Previews on social networks

When a link is shared in a messenger or on a social network, a card with an image appears. Its content is set by Open Graph meta tags with the property attribute:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cinnamon cappuccino</title>
    <meta property="og:title" content="Cinnamon cappuccino">
    <meta property="og:description" content="A 5-minute recipe without a coffee machine.">
    <meta property="og:image" content="https://example.com/images/cappuccino.jpg">
  </head>
  <body>
    <p>The card is seen in a messenger, not on the page.</p>
  </body>
</html>

The icon and hints for search engines

The icon on the browser tab (a favicon) is added with the <link> tag in <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Coffee shop</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="canonical" href="https://example.com/menu">
    <meta name="robots" content="noindex">
  </head>
  <body>
    <p>The icon shows on the tab of a real site.</p>
  </body>
</html>

Two more useful tags are here. rel="canonical" names the main address of a page that opens at several addresses. robots with the value noindex asks search engines not to show the page — this is how a cart or a personal account area is hidden.

Common mistake

The same <title> on every page of a site: the search engine cannot tell the pages apart, and the user sees ten tabs called "Home". The opposite extreme is stuffing the title and description with comma-separated keywords. Search engines rank such sites lower. Write for people: short and to the point. The old <meta name="keywords"> tag has long been ignored by search engines.