What's in your head?

Jun 11, 2015

Not singing a Cranberries song. Not saying you're crazy. I realized that when I have to start a new web project I spend a lot of time trying to make sure I'm not forgetting anything inside the head tag.

Let's start building its content.

<title>

The first thing you have to put inside the head tag is the title tag. It's the main sign to show the user which specific part of the site is being served and it's the first thing that search optimization engines will catch to see if what the user is looking up has something to do with that page from your site. That's why it's also important that the title varies through the different pages and sections.

Of course, you shouldn't put long content here with unnecessary words or phrases that are not related to the real content of the page. So, the title must contain some general information about the site and something that sums up the content of the page.

Here is our head for the moment.

<head>
  <title>Page Title | Section | Website Title</title>
</head>

<meta> tags

If you've been working on web sites for a long time you're gonna find meta tags very familiar. Each one has a name attribute indicating its type and a content attribute indicating its value.

description

The first one to mention is description, which is basically a short paragraph with a summary of the page. Google recommends the use of this meta tag, though it also claims that it will first track some real content from your site to see if there are good matches from the search the user is doing.

The rules here are similar to the title's ones. Be brief, be accurate and change it from page to page.

keywords

The second is keywords. This was a really important one if you wanted your site to appear in search results, but now it is deprecated. Why? In the past search engines relied a lot on the content of this meta tag so web developers started cheating to put it in some way. In the keywords meta tag you were able to list words that were related to the content inside the page separated by a comma.

You were searching for an article about cars for example and the first three results had nothing to do with them, but if you opened some of those pages and inspect their head content you would probably find that they had the word cars in their keyword meta tag. Believe me this scenario was really really common so search engines, and mainly Google, started to not even look here at all.

charset

This tag will indicate which group of characters will take the browser to parse the text content. Usually it's value is utf-8, but it can vary, mostly if you're serving a page with a language with special characters.

Special meta tag for IE

Yes, it's recommended to add a meta tag for Internet Explorer to indicate we want our page to be rendered with the highest standard possible. Yes, you have to.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

The world wide web is getting mobile

This one is pretty new, the viewport tag indicates how a mobile device will render your site. Modern devices have a lot of pixels. To show visible and sharp content they take more pixels to form only one pixel from your page. Confusing? I suggest you read the article the folks in Mozilla Developer Network which contains a pretty good explanation on how this works.

The standard is to indicate the width of the viewport, the height, and the initial scale of the rendering. It's not an impossible scenario but it's weird to set the height of the viewport because usually web sites content grow vertically. The most usual configuration is to set the width as the device width and an initial scale of 1. You can also indicate a maximum scale though the user will not be able to pinch and zoom which can compromise accessibility.

Now, let's update our head tag.

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="Some description of the page." />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Page Title | Section | Website Title</title>
</head>

canonical

This link tag is used to specify which url the page is referring to in case you have more than one that points to a single page. If you have only one url for a page or post, then is not really necessary, but it's a nice to add it if for example you have a different domain for mobile versions.

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="Some description of the page." />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Page Title | Section | Website Title</title>

  <!-- if your mobile URL is different from the desktop URL, add a canonical link to the desktop page -->
  <link rel="canonical" href="//www.example.com/path/to/page" />
</head>

Favicons

If you've never heard of them, a favicon is that little icon you see in your browsers tab or location bar. They usually have a small size and are a really nice touch to personalize your project.

The problem here is fragmentation. Each browser expects a different size and not all of them support any image type. If you look at the header inside the Web Starter Kit you're going to notice a set of icons for Chrome, another one for Safari and a final one to support Windows 8 touch icons. But if you really want to cover all the edge cases then you'll have to go to the Real Favicon Generator site which will nicely let you update an image and generate the whole set. You will immediately notice that providing a favicon for every browser around is not that simple.

<!-- Cover all apple devices -->
<link
  rel="apple-touch-icon"
  sizes="57x57"
  href="assets/favicon/apple-touch-icon-57x57.png"
/>
<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="assets/favicon/apple-touch-icon-114x114.png"
/>
<link
  rel="apple-touch-icon"
  sizes="72x72"
  href="assets/favicon/apple-touch-icon-72x72.png"
/>
<link
  rel="apple-touch-icon"
  sizes="144x144"
  href="assets/favicon/apple-touch-icon-144x144.png"
/>
<link
  rel="apple-touch-icon"
  sizes="60x60"
  href="assets/favicon/apple-touch-icon-60x60.png"
/>
<link
  rel="apple-touch-icon"
  sizes="120x120"
  href="assets/favicon/apple-touch-icon-120x120.png"
/>
<link
  rel="apple-touch-icon"
  sizes="76x76"
  href="assets/favicon/apple-touch-icon-76x76.png"
/>
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="assets/favicon/apple-touch-icon-152x152.png"
/>
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="assets/favicon/apple-touch-icon-180x180.png"
/>

<!-- Old school favicon -->
<link rel="shortcut icon" href="assets/favicon/favicon.ico" />

<!-- General favicon sizes for different sizes -->
<link
  rel="icon"
  type="image/png"
  href="assets/favicon/favicon-192x192.png"
  sizes="192x192"
/>
<link
  rel="icon"
  type="image/png"
  href="assets/favicon/favicon-160x160.png"
  sizes="160x160"
/>
<link
  rel="icon"
  type="image/png"
  href="assets/favicon/favicon-96x96.png"
  sizes="96x96"
/>
<link
  rel="icon"
  type="image/png"
  href="assets/favicon/favicon-16x16.png"
  sizes="16x16"
/>
<link
  rel="icon"
  type="image/png"
  href="assets/favicon/favicon-32x32.png"
  sizes="32x32"
/>

<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="application-name" content="Page title" />
<link
  rel="icon"
  sizes="192x192"
  href="assets/favicon/chrome-touch-icon-192x192.png"
/>

<!-- Icon for Win8 -->
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
  name="msapplication-TileImage"
  content="assets/favicon/mstile-144x144.png"
/>

Yes, you need all of those icons. You can create them by yourself or use the tool I provided before to generate most of them. If you really want your favicon to reach all browsers, this will do the job.

Scripts

No. Don't put scripts here since they are going to block rendering. In cases where you need HTML5 tags to work in legacy browsers you will need html5shiv in the head tag.

<!--[if lt IE 9]>
  <script src="assets/scripts/html5shiv.js"></script>
<![endif]-->

The thing is that if the request for the scripts takes some time and the DOM tree renders before the library has loaded and run it won't work and I've seen it not working because of this.

The correct form is to include the content of the script minified inside a script tag.

Styles

Last year there was a move impulsed mostly by Google devs and their web standards to provide to the user the web site with a content first approach. This means that while adding a link tag with a stylesheet in the past was not wrong, it's now seen as a bad practice because of your blocking content renderization.

To solve this, put the most critical CSS rules in a style tag, also called above the fold styles, and load the rest of the rules by adding the stylesheet using Javascript. The incredible guys from Filament Group have a small script to achieve this called loadCSS which I suggest you dig in.

Wrap-up

Let's take a deep breath and see what a complete head tag looks like.

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="Some description of the page." />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Page Title | Section | Website Title</title>

  <!-- if your mobile URL is different from the desktop URL, add a canonical link to the desktop page -->
  <link rel="canonical" href="//www.example.com/path/to/page" />

  <!-- Cover all apple devices -->
  <link
    rel="apple-touch-icon"
    sizes="57x57"
    href="assets/favicon/apple-touch-icon-57x57.png"
  />
  <link
    rel="apple-touch-icon"
    sizes="114x114"
    href="assets/favicon/apple-touch-icon-114x114.png"
  />
  <link
    rel="apple-touch-icon"
    sizes="72x72"
    href="assets/favicon/apple-touch-icon-72x72.png"
  />
  <link
    rel="apple-touch-icon"
    sizes="144x144"
    href="assets/favicon/apple-touch-icon-144x144.png"
  />
  <link
    rel="apple-touch-icon"
    sizes="60x60"
    href="assets/favicon/apple-touch-icon-60x60.png"
  />
  <link
    rel="apple-touch-icon"
    sizes="120x120"
    href="assets/favicon/apple-touch-icon-120x120.png"
  />
  <link
    rel="apple-touch-icon"
    sizes="76x76"
    href="assets/favicon/apple-touch-icon-76x76.png"
  />
  <link
    rel="apple-touch-icon"
    sizes="152x152"
    href="assets/favicon/apple-touch-icon-152x152.png"
  />
  <link
    rel="apple-touch-icon"
    sizes="180x180"
    href="assets/favicon/apple-touch-icon-180x180.png"
  />

  <!-- Old school favicon -->
  <link rel="shortcut icon" href="assets/favicon/favicon.ico" />

  <!-- General favicon sizes for different sizes -->
  <link
    rel="icon"
    type="image/png"
    href="assets/favicon/favicon-192x192.png"
    sizes="192x192"
  />
  <link
    rel="icon"
    type="image/png"
    href="assets/favicon/favicon-160x160.png"
    sizes="160x160"
  />
  <link
    rel="icon"
    type="image/png"
    href="assets/favicon/favicon-96x96.png"
    sizes="96x96"
  />
  <link
    rel="icon"
    type="image/png"
    href="assets/favicon/favicon-16x16.png"
    sizes="16x16"
  />
  <link
    rel="icon"
    type="image/png"
    href="assets/favicon/favicon-32x32.png"
    sizes="32x32"
  />

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="application-name" content="Page title" />
  <link
    rel="icon"
    sizes="192x192"
    href="assets/favicon/chrome-touch-icon-192x192.png"
  />

  <!-- Web Application Manifest -->
  <link rel="manifest" href="manifest.json" />

  <!-- theme color for Chrome mobile -->
  <meta name="theme-color" content="#3372DF" />

  <!-- Icon for Win8 -->
  <meta name="msapplication-TileColor" content="#ffffff" />
  <meta
    name="msapplication-TileImage"
    content="assets/favicon/mstile-144x144.png"
  />

  <!--[if lt IE 9]>
    <script>
      // minified code from html5shiv
    </script>
  <![endif]-->

  <style>
    // above the fold CSS rules
  </style>
</head>

Pretty big, right? It's even bigger than the head tag of this post you're reading. Of course you don't need all of these, that depends on the browser scope of your project and what type of project it is.

Maybe you don't need all these favicon declarations, or you don't need to cover HTML5 tags, but in case you want a nice cross browsing experience following the latest trends, your head will have to look a little similar to this one.

Do you want me to write for your publication? Click here to contact me via email.

# <title>

# <meta> tags

# description

# keywords

# charset

# Special meta tag for IE

# The world wide web is getting mobile

# canonical

# Favicons

# Scripts

# Styles

# Other content

# Wrap-up