Recently i launched my new personal website ma.rkus.io and that gave me the opportunity to redo the entire website including the HTML head. It was a nice review and here is what I came up with.
The minimum header I would recommend is something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Ma.rkus.io - Markus Tenghamn</title>
</head>
Now, this is a very minimum header and you probably want to add more to your own website. The meta tags above should always be included and it’s good if they are always placed at the top of the head section. The charset tag declares the charset of your site, most likely utf-8 unless you are creating a site in a language. Even if it is another language I would recommend trying to use utf-8 when possible. The http-equiv header is used to simulate a header, in this case we want to tell internet explorer that our website should be displayed in Edge mode. You could set this content to be ie=IE9 or something similar depending on what your website supports. Next up we have the viewport meta tag which controls the layout of the website on mobile browsers. Above we have the standard viewport tag but you could customize this if you wanted to. Lastly we have the title tag, this is just the title of the page. It will be displayed at the top of the browser, inside the tab, and should be short a descriptive.
Now that we are through that let’s take a look at what we would like to include in our head section to make our site as social/search engine/whatever friendly.
The Perfect Head
So after looking through two great guides, a list of everything that could go in the HEAD section and we can also take a look at what meta tags Google looks at for SEO. After some work the following is the final head section that I come up with for Ma.rkus.io.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' fonts.googleapis.com html5shiv.googlecode.com www.googletagmanager.com 'sha256-yLOInxBc4CwSRE31rZlC61JnPqxxvnZx8qxapo3Zfhk='">
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Official website of Markus Tenghamn. A Programmer, Team lead, Thinker."/>
<meta name="keywords" content="markus tenghamn, markus, tenghamn"/>
<meta name="robots" content="index,follow">
<meta name="google-site-verification" content="9eFWWHuUuoi_nrT071F-xYQsekK2ZkRFfSsEwjiKt7Q" />
<meta property="og:url" content="https://ma.rkus.io">
<meta property="og:type" content="website">
<meta property="og:title" content="Markus Tenghamn - Programmer, Team lead, Thinker">
<meta property="og:description" content="Official website of Markus Tenghamn. A Programmer, Team lead, Thinker.">
<meta property="og:site_name" content="Markus Tenghamn - Programmer, Team lead, Thinker">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://ma.rkus.io/img/markustenghamn.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@markustenghamn">
<meta name="twitter:creator" content="@markustenghamn">
<meta name="twitter:url" content="https://ma.rkus.io">
<meta name="twitter:title" content="Markus Tenghamn - Programmer, Team lead, Thinker">
<meta name="twitter:description" content="Official website of Markus Tenghamn. A Programmer, Team lead, Thinker.">
<meta name="twitter:image" content="https://ma.rkus.io/img/markustenghamn.jpg">
<meta itemprop="name" content="Markus Tenghamn - Programmer, Team lead, Thinker">
<meta itemprop="description" content="Official website of Markus Tenghamn. A Programmer, Team lead, Thinker.">
<meta itemprop="image" content="https://ma.rkus.io/img/markustenghamn.jpg">
<meta name="theme-color" content="#383a3c">
<title>Markus Tenghamn - Programmer, Team lead, Thinker</title>
<base href="https://ma.rkus.io">
<link href="css/normalize.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/component.css" rel="stylesheet" type="text/css"/>
<link href='://fonts.googleapis.com/css?family=Raleway:200,400,800' rel='stylesheet'>
<link rel="author" href="humans.txt">
<link rel="me" href="https://ma.rkus.io" type="text/html">
<link rel="me" href="mailto:m@rkus.io">
<link rel="me" href="sms:+491746240636">
<link rel="archives" href="https://archives.tenghamn.com">
<link href="https://plus.google.com/+MarkusTenghamn" rel="publisher">
<!--[if IE]>
<script src="://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Now, that’s a lot of code to just dump at one time. Don’t worry though we will break it down. I have tried to organise the different types of tags into different sections, keeping my meta tags grouped above my link tags for example. So our first tag is the Content Security Policy tag:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' fonts.googleapis.com html5shiv.googlecode.com www.googletagmanager.com 'sha256-yLOInxBc4CwSRE31rZlC61JnPqxxvnZx8qxapo3Zfhk='">
This tag is not as important as it might have been in the past but it can still be good to add. CSP is a tag that makes sure that any stylesheets, images, scripts and such that you add externally or directly on your page is allowed. If a source is not allowed the browser should not load the script and thus protecting your site from someone adding external scripts and such to your page. Doing it in a meta tag doesn’t add much security but better than not having it at all, doing it in a header would be even better.
Next up we have the charset, http-equiv and viewport tags.
<meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
These tags deal with how your page should be displayed. I almost always recommend going with UTF-8 as your charset unless you absolutely have to use another charset. http-equiv allows us to tell Internet Explorer or Edge the browser that we have optimised our content for. And finally, the viewport tells mainly mobile browsers how to render our page.
Up next is our keywords, description and robots tags:
<meta name="description" content="Official website of Markus Tenghamn. A Programmer, Team lead, Thinker."/> <meta name="keywords" content="markus tenghamn, markus, tenghamn"/> <meta name="robots" content="index,follow">
These tags used to be more important in the past when search engines put more weight on them. However, keyword stuffing and other blackhat tactics has made them less important. Some SEO experts even recommend removing the keywords tag. Keywords and description are pretty self explanatory but remember to keep them fairly short. Maybe 5 keywords and the description should fit in a Google search result. The robots tag just tells search engines like Google that we would like to get indexed. You could modify the robots tag to try to prevent getting indexed if that is what you wanted to do.
A simple tag to verify ownership of my website is done with the Google site verification tag like so:
<meta name="google-site-verification" content="9eFWWHuUuoi_nrT071F-xYQsekK2ZkRFfSsEwjiKt7Q" />
You can get your own tag to tell Google that you own your site and also hope that this will get you indexed faster by going to the Google Search Console.
Next we will take a look at social tags:
<meta property="og:url" content="https://ma.rkus.io"> <meta property="og:type" content="website"> <meta property="og:title" content="Markus Tenghamn - Programmer, Team lead, Thinker"> <meta property="og:description" content="Official website of Markus Tenghamn. A Programmer, Team lead, Thinker."> <meta property="og:site_name" content="Markus Tenghamn - Programmer, Team lead, Thinker"> <meta property="og:locale" content="en_US"> <meta property="og:image" content="https://ma.rkus.io/img/markustenghamn.jpg"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@markustenghamn"> <meta name="twitter:creator" content="@markustenghamn"> <meta name="twitter:url" content="https://ma.rkus.io"> <meta name="twitter:title" content="Markus Tenghamn - Programmer, Team lead, Thinker"> <meta name="twitter:description" content="Official website of Markus Tenghamn. A Programmer, Team lead, Thinker."> <meta name="twitter:image" content="https://ma.rkus.io/img/markustenghamn.jpg"> <meta itemprop="name" content="Markus Tenghamn - Programmer, Team lead, Thinker"> <meta itemprop="description" content="Official website of Markus Tenghamn. A Programmer, Team lead, Thinker."> <meta itemprop="image" content="https://ma.rkus.io/img/markustenghamn.jpg">
Now this is a big block of code but you will see that it is basically the same thing over and over for different social networks. We start with the og: properties which Facebook’s open graph. Then we have Twitter’s twitter: property finishing with Google’s own itemprop. These tags mainly make it easier for Social networks to display your page properly when it is shared on social networks. You can set a title, description and image for these tags. Some even let you define the authors username and more. If you expect users to share your content on social networks you should put a lot of thought into how you write these tags.
Next we have the theme-color tag for android that simply changes the browser header color. It’s a nice touch in my opinion.
<meta name="theme-color" content="#383a3c">
The title tag, one of the most important tags, will define what is displayed in the users browser tab:
<title>Markus Tenghamn - Programmer, Team lead, Thinker</title>
Keep the title short and simple. Generally you want to add the brand name and some major keywords that relate to that brand.
Next up is the base tag which simply defines the base page for our website. You should set this to your index page.
<base href="https://ma.rkus.io">
We load a few stylesheets here and a font. Nothing really special about style tags other than the fact that you might want to keep the href tag as close to the beginning of these tags as possible to improve load speed.
<link href="css/normalize.css" rel="stylesheet" type="text/css"/> <link href="css/style.css" rel="stylesheet" type="text/css"/> <link href="css/component.css" rel="stylesheet" type="text/css"/> <link href='://fonts.googleapis.com/css?family=Raleway:200,400,800' rel='stylesheet'>
Next up is the author related tags:
<link rel="author" href="humans.txt"> <link rel="me" href="https://ma.rkus.io" type="text/html"> <link rel="me" href="mailto:m@rkus.io"> <link rel="me" href="sms:+491746240636"> <link rel="archives" href="https://archives.tenghamn.com"> <link href="https://plus.google.com/+MarkusTenghamn" rel="publisher">
These tags are for the person who created the page. In my case this person is obviously me and some tags might seem redundant. I also squeeze in a link to my archives on my old website archives.tenghamn.com. One pretty cool thing that I added was humans.txt, if you don’t know what this is then head over to humanstxt.org, it is basically a robot.txt for authors and let you give credit to the team who created your website.
Finally we end the head with our conditional IE tag:
<!--[if IE]> <script src="://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
This basically says that if the browser is Internet Explorer then it should load this extra javascript file in order to handle our HTML5 content.
That’s it for this post, I hope it gives some insights into what should go into the HTML head. If I missed something or said something that you disagree with then please do leave a comment and I will update! Stay tuned for my next article.