HTML5 is one of the subjects that is going to gain more importance within the SEO area over the coming months and years with more people choosing to adopt the technology. So this is a guide to introduce you to HTML5 from an SEO point.
Firstly, if we look at what is HTML5 and who has adopted HTML5. Then we can look at the new HTML5 tags and finally what HTML5 means for SEO.
What is HTML5?
HTML5 is a better version of HTML4 (no surprises there!). HTML5 has been designed to standardise multimedia formats so they can be consistently understood by computers (i.e browsers). HTML5 makes it easy to include interactive multimedia elements within your website without the need for external plugins, such as Flash.
Whilst HTML5 is an evolving process with new features planning on being added over the coming months (and likely years), it makes sense to at least begin understanding the benefits of HTML5 sooner rather than later.
Below is a nice HTML5 infographic which you can see on Wikipedia’s page on HTML5. It gives a good idea about what s currently within the HTML specification and the status of other HTML5 ideas which are still on the drawing board.
There are some new cool features within HTML5 such as the
Who is already adopting HTML5?
Lots of people! BinVisions produced a report in October 2011 which accessed some of the top websites to see who was and who wasn’t adopting HTML5 as a new technology and found the following for the top 100 websites;
As you can see from the image above, only 34 out of the top 100 websites have fully adopted HTML5. These 34 websites are;
For a full breakdown of who is / isn’t using HTML5 yet then download BinVision’s PDF report (direct link to PDF doc).
New HTML5 Tags
If you are not familiar with HTML5 then I can recommend running through W3School’s HTML5 tutorial as it contains a bit more background than what is going to be covered in this post.
New HTML5 Tags;
- <canvas> – This is similar to the <textarea> tag, but cooler. When linked up with JavaScript it allows you to draw different things on the canvas. This can be really useful when wanting to make your pages more interactive without
- <video> – This tag is designed to replace typical Flash plugins to play videos.
- <audio> – This tag is exactly the same as the video tag
- <article>/strong> – Main content on the page
- <section> – Main content on the page
- <header> – Header (not the) part of your document, for example maybe your company logo would go in here
- <footer> – Footer section of your page, for example you may want to put your footer links within here (although you could use the element for that as well)
- <nav> – For your navigation menus on your site.
- <hgroup>– This tag is designed to group normal heading tags together ( <h2>etc), for example if you have multiple headings within your article or content.
- <aside> – For content which is not the main content on the page.
- <summary> – This defines a visible heading for a <details> element (only works in Google Chrome!)
- <details> – This is for additional details that a user can view or hide (only works in Google Chrome!)
- <time> – This defines the date and time which has likely been introduced as Google hasn’t been brilliant at determining the date of blog posts in the past.
HTML5 SEO Best Practices
The new content specific tags listed above are a little easier to explain with a graphic which shows HTML5 SEO best practices;
When reading through the tutorials available online, the tags are a little ambigious so the information I have documented above is just my take on this. Please do have a read yourself and see if you come to the same conclusions (or not!).
HTML5 SEO Benefits
In short, there are none. You are not going to get better rankings with your website by simply marking up your content in HTML5 over HTML4 or even HTML1. In the same sense, there is no harm to marking up your content with HTML5 SEO wise as you can see from the quotes listed below.
What does Google say about HTML5?
Not much really as there have been no official blog posts released on the subject. That said, John Mueller from Google has commented on several threads about HTML5 which provides an insight into the pros and cons.
When asked “How well does Googlebot deal with non-standard tags“, John Mueller replied with;
“In general, our crawlers are used to not being able to parse all HTML markup – be it from broken HTML, embedded XML
content or from the new HTML5 tags. Our general strategy is to wait to see how content is marked up on the web in practice and to adapt to that.
If we find that more and more content uses HTML5 markup, that this markup can give us additional information, and that it doesn’t cause problems if webmasters incorrectly use it (which is always a problem in the beginning), then over time we’ll attempt to work that into our algorithms.
With that in mind, 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. HTML5 is still very much a work in progress, so it’s great to see bleeding-edge sites making use of the new possibilities 
From 17th October 2010
Then a day later in 2010, Google was asked the question “Does semantic HTML5 matter to Google yet?” and again John was on hand to provide a few more nice snippets of information;
“In general, we work hard to understand as much of the web as possible, but I have a feeling that HTML5 markup is not yet as widely in use (and in use correctly) that it would make sense for us to use it as a means of understanding content better. As HTML5 gains in popularity and as we recognize specific markup elements that provide value to our indexing system, this is likely to change, but at the moment I would not assume that you would have an advantage by using HTML5 instead of older variants.
Returning different content to search engine crawlers as you would to similar users would be considered cloaking and against our Webmaster Guidelines. I would not recommend treating search engine crawlers different than you would similar users.
Personally, I would recommend using HTML5 where you think that it already makes sense, perhaps reverting to HTML4 if you can determine that the browser won’t support the elements of HTML5 that you use properly. While this will not result in an advantage for your content in our search results, it generally wouldn’t be disadvantageous either. “
From 18th October 2010
Another one of the questions which keeps cropping up is about having multiple H1’s on a page due to the new HTML5 markup and it this is good or bad for SEO. Well here is what John said on the matter;
“Having multiple h1 tags on a page is fine. Matt also talked about this – not in the context of HTML5, but in a more general sense”
From 18th October 2010
For reference, here is the video John was referring to;
But can we really rely on information from over 18 months ago? 18 months online is like a lifetime, so I decided to see if I could get some more clarity on the issue with regards to how Google treats HTML5 with SEO in 2012.
I asked “How well does Google Bot handle HTML5” and John was back again to answer the question in great detail;
“In short: our systems are pretty good at parsing the common kinds of HTML-like markup, including the various flavors of HTML and XHTML. As far as I know, our crawling and indexing systems currently don’t do anything special for HTML5, so there is no “bonus” for using HTML5 constructs, but similarly also generally no downside.
That said, most of the pages with HTML5 markup that I’ve seen tend to be very clean – with little “cruft” and unnecessary elements. While having clean markup isn’t something that our algorithms explicitly look for, we occasionally see pages that are almost unparseable.
Also, clean markup makes it much easier to maintain the website, easier to add new elements like microformats, and frequently makes the pages more portable across a variety of browsers and devices. So with that in mind, there’s nothing holding you back (from a search point of view) from creating an awesome site in HTML5 :-)”
From 21st March 2012
On that note, time to get crating some awesome websites
I would have been very surprised if Google didn’t handle HTML5 since Google Chrome supports all the new features of HTML5 (the only browser that does at the moment!). PlusIan Hickson who works at Google within the Research and Standards Development field has been acting as the specification editor atWHATWG (The Web Hypertext Application Technology Working Group ) who have been developing the new HTML5 standard.
Issues with HTML5
As with most new technologies, cross browser compatibility issues are always an issue. When reading through the HTML5 tutorial from W3Schools there are plenty of examples about what does and doesn’t work based on different browser types and versions.
So whilst HTML5 is the cool new technology on the block, it may not work for everyone. All of the new HTML5 markup works in Google Chrome and the other browsers will be updating in future releases.
Cool HTML5 Examples
Google’s Pac-Man example
http://www.google.com/pacman/ – How is this good for SEO? It’s cool, shareable, likeable, tweetable, playable and accessible without any plugins.
Command and Conquer HTML5 example
Play the full HTML5 Command and Conquer game.
Summary
Overall, HTML5 is a great new technology designed to make life easier and better for web users. Whilst I wouldn’t go and re-code the whole site into HTML5 since there is no real benefit for doing so (SEO or otherwise), instead for any new developments I would begin to adopt the new HTML5 technology.
As has been seen with other new technologies (Rich Snippets come to mind), if you can implement new technologies on the off-chance Google will give some additional bonus at some unknown point in the future then you are onto a winner. Google may never provide additional benefit to websites for designing in HTML5, but if you begin using this from now on then if they do begin to promote HTML5 websites then you will be one of the first to benefit from this.
If you are interested in looking at some cool things you can do with HTML5 then Google produced a nice Pac Man
7 thoughts on “HTML5 SEO Best Practices”
Michael Cropper
Really nice post! You can also use this technology to make some interactive infographics such as this one:
http://www.thomson.co.uk/blog/infographic/superbowl/index.html#2008
Thanks. I am planning to move on HTML5 immediately.
I have new SEO project and your article is really helpful in my case.
I’m new to HTML 5 world and Schema.org.
Glad you found it useful Ramas
Mick,
Thank you for your time, it’s big job.
Do you have any link list where I can get good material about HTML 5, Dummy SEO Friendly?
Cheers,
Ramūnas Bruzgys
Hi Ramas,
Your best bet if you want a dummy-friendly guide for HTML5 would be to run over the tutorial at W3Schools. SEO wise, there isn’t much benefit at the moment so I wouldn’t worry too much about that side of things.
Michael
Really Nice Post.. i m planing to move html5 immediately……..