Getting your page ready for the web

Polish your page's head: title, description, favicon and secure external links.

9 min · 3 questions

Even before visiting your page, people see it elsewhere: in a browser tab, in search results, in a shared link. All of that happens in the head. A well-crafted head is the difference between an amateur site and a professional one.

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Quick Recipes | Lea's Kitchen</title>
  <meta
    name="description"
    content="30 recipes ready in 20 minutes flat,
             tested by our readers."
  >
</head>

The minimal head of a page ready to go live.

The title appears in the tab, in bookmarks and in search results: make it unique per page, descriptive, with the subject first and around 60 characters. The meta description is the text shown under the title in search engines: aim for 150 characters that make people want to click.

The meta description doesn't directly influence your search engine ranking, but it strongly influences the click-through rate. A good description is a one-sentence sales pitch, not a list of keywords.

The favicon is the small icon shown in the tab and in bookmarks. The modern practice: a fallback favicon.ico at the root of the site, an SVG version that stays sharp at every size, and a dedicated icon for Apple home screens.

HTML

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">

Three declarations to cover every context.

One last professional reflex: external links. Opening a link in a new tab with target="_blank" gives the opened page potential access to window.opener, and therefore to your page. Add rel="noopener noreferrer" to sever that link and avoid passing along the referring address.

HTML

<a
  href="https://developer.mozilla.org"
  target="_blank"
  rel="noopener noreferrer"
>
  MDN documentation (new tab)
</a>

An external link opened in a new tab, secured.

Modern browsers apply noopener implicitly with target="_blank", but writing it out remains the norm on a team: it protects older browsers and makes the intent readable in the code. Never rely on implicit behavior for security.

Knowledge check

Make sure you remember the key points of this lesson.

What is the role of the meta description?
- Directly improving the page's ranking in search engines
- Providing the text displayed under the title in search results
- Defining the document's main language
Why add rel="noopener" to a link with target="_blank"?
- To prevent the opened page from accessing your page through window.opener
- To force the link to open in the same tab
- To speed up the loading of the target page
- To hide the link from search engines
What makes a good page title?
- Identical on every page to reinforce the brand
- As long as possible to squeeze in as many keywords as possible
- Unique per page, descriptive, with the subject first and around 60 characters