Keep your <head> clear!

Every website large or small has a lot of similar parts. Whether its Facebook or your local plumber, all sites share common tags, hierarchy, and structure in the form of HTML. In general though, one section of HTML has been a place to throw anything and everything. From tracking codes, scripts, meta tags, verification codes, etc the <head> section of your HTML document has been the attic no one really wants to clean up. Below are some tips and guides to make sure your <head> section is clean, efficient, and has everything that it should.

1. Clean House

First things first, let’s clean up! Before we add anything new let’s make sure that everything that is currently there, needs to be. So any script tags you find, unless otherwise noted should be removed, minified, then gathered in one large document and placed in the footer. Next any linked stylesheets you find should be treated the same way. Gather all the css, dump it into one file, minify and then put back. This step may require some testing to make sure nothing breaks, but minifing and consolodating resources will make your site faster and easier to update/maintain. Read my other page on page speed tools to learn more about making your site faster.

2. SEO Tags

Including a title tag, description meta tag, and a keywords meta tag is your first step to better SEO. These tags are not only part of the algoritum that determinies page rank, but they’re also the first thing the user sees when they’re decided to enter to site. Make these tags as relevant to the page they’re on as possible, and watch your site raise in the rankings on Google, Yahoo and Bing.

1
2
3

<title></title>
<meta name="description" content="">
<meta name="keywords" content="">

3. Content Related Tags

Two tags that have been under utilized over the years, but are extremely important, are canonical link tag and author meta tag. These tags make sure that robots and spiders that crawl your site from Google, Yahoo and Bing aren’t confused when they reach you content.

As we all know there are several ways to enter a site. In the beginning of a url you might add www or not. At the end you might add a slash, have index.php, or some sort of query trailing behind. It’s possible that web crawlers could read all of these various ways of getting to your site as separate pages and thus duplicate content. You may even be penalized in your ranking for such an offense. Enter the cananical link tag. This tag should be assicated with only one URL, so no matter how the crawler gets on your site, the content will always be attributed to that URL. Read more about the canonical link tag.

Another handy tag to let crawlers know this is your content and no someone elses, is to use the author tag. Using the author tag will ensure that if your site is linked to or quoted anywhere, that you and your site are being attributed the rights to the content.

1 2	<link rel="canonical" href=""> <meta name="author" content="">

4. Getting Social

Social media has exploded in the past couple of years. Social media compaigns, sharing, liking, etc. have become the norm in the web world. One way to make sure your site looks good when liked on Facebook is to use the Open Graph meta tags. Open graph meta tags are a series of tags, that list the title, description, image, etc. that will appear on your facebook wall when shared or liked. Making sure these tags are present and looking their best is a great way to make your site is eyecatching on the social media giant. Learn more about open graph tags here.

One more tag you might want to consider adding for sharing purposes is the alternate link tag. With the alternate link tag you can add the URL to your blog’s RSS feed and make it easier for people to subscribe to updates on your site.

<!--START OPEN GRAPH FOR FACEBOOK-->
<meta property="og:title" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:image" content="images/ui/facebook.jpg">
<meta property="og:site_name" content="">
<meta property="og:description" content="">
<!--END OPEN GRAPH FOR FACEBOOK-->
 
<link rel="alternate" href="blog/feed/" type="application/rss+xml" title="">

5. Bookmark Icons

The favicon isn’t the only player in town anymore. From tablet icons for the IPad, and smart phone icons like the iPhone, bookmarking icons are a great finishing touch to your site. These icons appear when booking your site on the browser, and appear on your home screen when bookmarking via a smart phone. This snippet is grabbed right from 320andUp a really great resource for coding a mobile first design.

<!-- For iPhone 4 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ui/apple-touch-icon.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ui/apple-touch-icon.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="images/ui/apple-touch-icon-precomposed.png">
<!-- For Nokia -->
<link rel="shortcut icon" href="images/ui/apple-touch-icon.png">
<!-- For everything else -->
<link rel="shortcut icon" href="images/ui/favicon.ico">

6. Tracking Codes

Finally add all your tracking codes, from Google, Bing, etc right before the closing >/head< of your page. This makes sure that the tracking code is sending its signals to its homebase properly, doing so will result in more accurate reporting. Learn more about Google Analytics.

All or most of these tags or practices aren’t a requirement for your website. In fact, many things in HTML rarely are. HTML is a flexible language, and its one of the reasons its survived for so long. Regardless of how flexible the language is, there is always best practices and standards. Making sure your HTML is optimized for users and web crawlers is another step forward in making a great site. All of these tags are included in my Site Skeleton, check it out on GitHub.

So what do you think? Did I miss anything? What tags do you typically add to a web build? Are there some tags I forgot or misused?