The Head: Titles, Descriptions and Link Previews

Most of what you have written so far appears on the page. The head of an HTML document does not: nothing in it is drawn in the window. Yet it decides how the page looks in a browser tab, in a bookmark, in a list of search results and in the little card that appears when someone pastes the link into a chat. A few lines there make the site look finished everywhere it turns up.

A book's cover and spine do the same job. They are not the content, and a good book can survive a plain cover. But the cover and spine are what people see first on the shelf, and they decide whether anyone picks the book up. The analogy has one gap: a book has one cover, and a web page shows a different one in each place it appears, so each place gets its own line in the head.

What Makes a Good Title?

The title element is the one line in the head that every page must have. It is the text in the browser tab, the default name of a bookmark, usually the headline of a search result, and the first thing a screen reader announces when the page opens.

A good title is unique to its page and puts the most specific part first. "Projects - Your Name" says which page this is, then whose site. The reason for that order is the tab: with ten tabs open, each shows only its first few characters, and "Your Name - Pro" and "Your Name - Con" are hard to tell apart. The Home page can carry the name alone, "Your Name", because it is the whole site's front door.

What Does the Description Do?

A meta element with the name description holds one or two sentences about the page. Nothing on screen shows it. Search engines may use it as the short text under the title in a result, which is the sentence that makes someone choose your link over the one below it.

They do not always use it. If a search engine thinks a passage from the page answers the searcher's question better, it shows that passage instead. So write the description as an honest summary of the page, about one sentence long, and make sure the page itself is clear enough to be quoted.

What Is a Favicon?

A favicon is the small icon beside the title in a tab and a bookmark. It comes from a link element with rel="icon" that points at an image file. A square PNG, 32 pixels or larger, works in every current browser. An SVG icon works in current Chrome and Firefox too, and Safari added support only in 2025, so a PNG is the safe choice for now. Without one, the browser shows its own generic icon.

How Do Link Previews Work?

When someone pastes your link into a chat app or a social network, the app's own server fetches the page and builds a preview card: an image, a title and a line of text. It looks for a set of meta tags called Open Graph, a format first defined by Facebook and now read by almost every app that shows previews. Each tag uses a property attribute beginning with og:.

Three of them do most of the work: og:title for the card's headline, og:description for its line of text, and og:image for its picture. The image address must be a full address starting with https, because the app's server is not on your computer and cannot follow a path relative to your folder. A wide image, commonly 1200 by 630 pixels, fits most cards. Two more complete the set: og:url gives the page's own public address, and og:type says what kind of thing the page is, website for an ordinary page. The Open Graph protocol lists title, type, image and url as the four every page should have.

Here is the whole head of the site's Projects page, with everything from earlier chapters and the new lines added. The address in the Open Graph tags is a placeholder until the next topic publishes the site and gives it a real one.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Projects - Your Name</title>
  <meta name="description" content="Small web projects by Your Name: a budget tracker, recipe cards and a weather page.">
  <link rel="icon" href="images/favicon.png" type="image/png">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Projects - Your Name">
  <meta property="og:description" content="Small web projects by Your Name.">
  <meta property="og:image" content="https://username.github.io/my-site/images/preview.png">
  <meta property="og:url" content="https://username.github.io/my-site/projects.html">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/theme.js"></script>
  <script type="module" src="js/main.js"></script>
</head>

Save it and look at the browser. The page itself has not changed at all. The tab now reads "Projects - Your Name" with your icon beside it, and a bookmark made now takes the same name. In a search result, once the site is published and found, the title usually becomes the headline and the description may sit under it. And a link to the page pasted into a chat shows a card with the preview image, the title and the short description.

That last one needs the page to be on the public web, because the chat app's server has to fetch it. You can check the tags before then in DevTools: the Elements panel shows the whole head, and the favicon appears as a request in the Network panel. The preview image does not: only the apps that build previews ever fetch it. Repeat the same lines, with their own words, on the Home and Contact pages.

How Do People Find the Site?

Search engines send programs called crawlers that follow links from page to page, read what they find and decide which pages best answer each search. What they reward is what this book has been teaching all along: pages that load fast, that say clearly what they are about, and whose structure of headings, links and text alternatives makes sense to a machine as well as a person.

There is no trick beyond that. Nobody can promise to put a new site at the top of the results, and Google's own guidance warns against anyone who does. A clear title, an honest description, real headings and a fast page are the whole of what a small site can do, and they are also what makes it pleasant to use.