The methods and strategies we’ve used to search for content on the web has evolved rapidly over the last 10 years. We’ve seen the rise of search engines, the introduction of accessibility attributes and the focus on “search engine optimisation” while building sites.

We’ve also seen the rise and fall of metadata, like the keywords meta tag. Google stopped supporting the keywords meta tag circa 2009 which has since caused developers to question the usefulness of specific meta tags in general and, in most cases, disregard the “unnecessary” tags completely.

The Problem

While it’s true that there are a lot of meta tags that are “unneeded” and “generally unused”, we seem to be taking this as “shouldn’t be implemented”. This is, in my opinion, completely untrue. Metadata was originally designed to describe the page in question and provide meaningful information as to its origins and use. Now, due to our general misuse of metadata, we have initiatives like the Dublin Core Metadata Initiative and ARIA attributes trying to clean up the mess.

I believe in order to fix this, we need to encourage and distribute boilerplates with robust metadata already configured and I figured the HTML5 Boilerplate would be a pretty decent place to start exploring. The current Boilerplate consists of an HTML5 Doctype, Modernizr HTML tag, UTF-8 charset, X-UA-Compatible metadata that forces the latest version of IE along with title, description and basic viewport metadata. It’s also bundled with Normalize, Modernizr, jQuery (CDN with local fallback) and Google Analytics shell code.

While this is a fairly decent starting point, its fairly weak in terms of icons, metadata, pre-rendering, Apple configuration and all the interesting stuff which is usually done in the header. Despite it’s general robustness in terms of community-driven, bleeding-edge scaffold files, there seems to be a disregard for the importance of accessibility and strong metadata.

The Solution

I have been working on a repository to distribute my preferred approach. It features many enhancements to the basic HTML5 boilerplate code that maintains meticulous syntax, such as self-closing metadata tags and indentation.

Apart from having all the features of the HTML5 boilerplate, my enhanced version contains an array of meta tags for a stronger site analysis, website icons, OpenGraph information for Facebook and general Search Engine Optimisation. It comes with a definitive meta tag for Apple Touch Icons with iOS web-app capability, super-awesome HTML5 features like prefetching local and external resources and Internet Explorer 11 metadata. It also houses Conditional Comments and language attribute for the HTML tag, a fully configured viewport for responsive design and more.

I’ve kept the references to Normalize, jQuery and Modernizr, but changed the implied directory structure for neatness and making updating the site easier. I’ve removed the reference to Google Analytics as the code is often updated, and the shell version is missing a vital piece of data that is present in your custom version.

I try to keep it as validated as I can with the W3C’s HTML Validator, but they’re always finding ways to criticise working code. If you feel strongly about robust metadata and think you have something to add, I’m always open to contributions.

https://github.com/haydenbleasel/boilerplate