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 is also okay for most use cases.
  • 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.

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.
  • 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.

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

<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" type="image/png" href="/images/favicon.svg" />
    <link rel="sitemap" type="application/xml" href="/sitemap.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 property="og:title" content="Blog Title, 30 - 60 characters" />
    <meta property="og:description" content="Description which should be between 50 - 160 characters." />
    <meta property="og:image" content="/images/my-awesome-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_US"/>


  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Further helpful resources: