Skip to content
Web Dev

The head area

Every page has a <head> element that contains information about your page.

What belongs in the <head> of every website?

Included on every page should be:

  • Title. The title should be 30 - 60 characters long for SEO optimization.
  • Description. The description should be 50 - 160 characters long for SEO optimization.
  • Viewport and Charset. Viewport refers to the window width. Charset defines which characters the browser can expect. There’s not much reason to change these so just use: <meta name="viewport" content="width=device-width,initial-scale=1"> & <meta charset="utf-8">
  • Favicon. The icon of your webpage. There’s a guide by EvilMartians on how to optimize your favicon for legacy browsers but just using a simple .svg with a .fav fallback is enough nowadays.
  • Robots. Define which pages should be indexed by search engines or not. This way you can exclude pages which you might not want to show up on Google searches. It is best practice to also include the sitemap in your robots.txt file. The sitemap is a list of all the pages on your website.
  • Open Graph. In addition to other meta tags you have the Open Graph protocol which has been established by Facebook. It includes information such as which image to use for the social preview image, for example when a link is shared within a post on a social media site.
  • Canonical. When you have multiple pages with the same content you will want to define which on of these is the canonical page. The canonical page is the one that will show up in search results.

Optionally you might want to include:

  • Theme Color. Define a specific theme color. Some browsers will adjust the color of some elements such as the scroll bar to fit your theme color.
  • Manifest. If your website is a Progressive Web App (PWA) you will want to add a manifest which defines some behaviour for when the webpage is installed on the user’s device.
  • Pre-loading fonts.

Included in the head are also links to the stylesheets and script files, if they exist.

Also will want stylesheet and script files.

<head> Code Example

Example of the code for a possible head:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Blog Title, 30 - 60 characters</title>
    <meta name="description" content="Description which should be between 50 - 160 characters." />


    <link rel="icon" href="favicon.ico">
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <link rel="sitemap" type="application/xml" href="/sitemap-index.xml">
    <link rel="canonical" href="https://www.example.com/the-canonical-adress">
    <meta name="robots" content="index, follow">
    <meta name="author" content="Author name" />
    <meta name="copyright" content="Copyright owner" />
    <meta name="theme-color" content="#fff">


<!-- OpenGraph -->
    <meta property="og:title" content="Open Graph Title, can be longer than the other title" />
    <meta property="og:description" content="Description which can get shown when shared on social media platforms." />
    <meta property="og:image" content="https://example.com/image.png" />
    <meta property="og:image:alt" content="The alt attribute should describe the image in situations where the image can't be seen" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="Name of overall website" />
    <meta property="og:type" content="website" /> <!-- Usually "website" or "article" -->
    <meta property="og:url" content="https://www.example.com/the-canonical-adress" />
    <meta property="og:locale" content="en"/>


<!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:url" content="https://www.example.com/the-canonical-adress">
     <meta name="twitter:title" content="Content Title">
     <meta name="twitter:description" content="Content description less than 200 characters">
     <meta name="twitter:image" content="https://example.com/image.png">
     <meta name="twitter:image:alt" content="A text description of the image. Maximum 420 characters.">
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Further helpful resources: