To use HTML5, or not
use HTML5, that is the question...especially when you’re considering Google and SEO.
There are lots of people on both sides of the debate:
PROS & CONS
PROS: Moves the semantic web one step closer, which should help my search rankings (in the long run), and some of the new tags, like <video> and <canvas>, can leave users and clients awestruck, to say the least.
CONS: Not a standard, yet... so I risk having my search rankings and user experience ending up in the crapper.
THE RISKS
In reality, the risks of using HTML5 boil down to three separate issues:
- Google will not rank my site properly, because it can’t find my content.
- Internet Explorer users with <IE9 will ditch my site, because it won’t look right, or worse, won’t show up at all.
- Mobile users with older devices will have a really bad experience when they visit my site.
We’re going to look at all three issues, and how to mitigate them.
1. GOOGLE WILL NOT RANK MY SITE PROPERLY
This has been a giant concern for the SEO-savvy, and Google has not helped the situation on their Webmaster forum by alternating between being cryptic to direct questions, or completely silent. Having said this, Google’s own John Mueller has stated, "I definitely wouldn't want to stand in the way of your implementing parts of your site with HTML5, but I also wouldn't expect to see special treatment of your content due to the HTML5 markup at the moment."
So...(drum roll, please)...for Google...this is a total non-issue. And, when you think about it, this makes sense: Have a look at you HTML4 sites and the relative weighting of links in a page’s body vs. links in its footer. The Googlebot is smart enough to find and weight the footer links less than the body links. It does this with no semantics. As long as you use well-formed tags, whether you are using HTML4 or HTML5, there’s no problem.
2. INTERNET EXPLORER PROBLEMS
Ok, unlike point 1 above, IE has some real issues... but at least this one is easily solved, or at least when it comes to layout elements. As you’re probably aware, browsers tend to ignore HTML tags they don’t understand. Since IE doesn’t auto update, there’s lots of older versions of IE out there... and they (<IE9) don’t necessarily understand the new HTML5 tags.
It’s easy to rectify this, simply add this tag in the head section of your HTML 5 webpage above your CSS, and you’re good to go:
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
The shiv, provided by Google, allows older versions of IE to recognise and style HTML5 elements. It’s simple, fast and free.
Not a fan of having somebody else control your content. No Problem. You can do the same thing as the shiv by adding {display:block} to the appropriate HTML5 tags that you are using. For example, add the following CSS:
header, section, footer, article, nav {display: block;}
To help IE6, you’ll also need to add some JavaScript to your document’s head section to create the tags:
<!--[if lt IE 7]><script>
document.createElement("header");
document.createElement("section");
document.createElement("footer");
document.createElement("article");
document.createElement("nav");
document.createElement("hgroup");
</script><![endif]-->
With the above CSS and JavaScript, just remember to add all
the tags you’re using.
Now we’ve got the layout tags working, but the new content tags, like <video> and <canvas>, still will not work.To get these tags to function, your user needs a new browser. Give them a user-friendly message to tell them they are missing out, and someday maybe they’ll listen.
3. MOBILE DEVICE PROBLEMS
The big problem here is many older mobile devices do not/improperly handle JavaScript, so your <IE9 fix above may not work for them. If you’re seriously worried about this, you’re probably better off detecting and redirecting mobile devices to a mobile optimized webpage or subsite. You’re server can handle this using the http request information, so it:
- Doesn’t require JavaScript;
- Doesn’t require a round-trip to determine that the client is a mobile device;
- The user sees a great mobile website.
If you don’t have time, money, or the will to make a mobile, you can experiment with simply wrapping HTML5 tags around your existing layout tags. For example:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Becomes:
<nav>
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
THE RESULT: If the mobile device doesn’t know the <nav> tag, then it should disregard it. Since your styling is on the <ul>, and not the <nav> tag, your document should work either way. Of course, this is going to take some trial/error/review with a number of mobile devices.
MY ADVICE: Take the plunge and build a mobile subsite. In the long run, it will provide less head-aches and a better user experience.
CONCLUSION
When it comes to SEO, there’s lots of things to worry about, but HTML5 isn’t one of them, at least not with Google. Take the plunge and have fun developing in HTML5.
Happy HTML5ing,
James Fielding
Sciosoft Systems is a Canadian web design & development company based in Muskoka,
which is in central Ontario. We provide ASP.NET website & Windows Server application
development services to small and medium-sized business, as well as local government
and not-for-profit groups. If you have a website project you’d like to discuss,
please visit us at www.sciosoft.com.
Subscribe
