ScioSoft's Community Blogs Optimized IT musings for the technically inclined

Google, HTML5 and SEO

by James Fielding 31. March 2011 11:15

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:

  1. Google will not rank my site properly, because it can’t find my content.
  2. Internet Explorer users with <IE9 will ditch my site, because it won’t look right, or worse, won’t show up at all.
  3. 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

kick it on DotNetKicks.com

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.

Share |

Tags: , , ,

Web Development | SEO

Comments (2) -

CSS Tips and Tricks
CSS Tips and Tricks United States
7/22/2011 1:20:27 AM #


Thanks for sharing your post.

seo company
seo company United States
8/9/2011 6:37:03 AM #

Optimizing a website may involve editing its content and HTML and associated coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines. Promoting a site to increase the number of backlinks, or inbound links, is another SEO tactic.

Pingbacks and trackbacks (1)+

Comments are closed

RecentComments

Comment RSS

The opinions expressed herein are the personal opinions of the contributors and do not necessarily represent the views of Sciosoft Systems Inc.