SEO Best Practices For HTML5: Truths, Half-Truths & Outright Lies

During a panel at SMX Advanced 2011 in Seattle, I remember hearing a question about Schema.org tags. More specifically, I remember Greg Boser remarking about how search engines have come full circle.

First, they gave us meta data. Then they took it away (as a ranking factor). Now, search engines are once again asking us for meta data. His tone did not indicate any type of excitement about the Schema.org announcement or the use of the tags as an SEO strategy.

Other panelists commented on how the Schema.org tags could lead to additional code bloat, and in the end, none of the panelists recommended re-coding your entire site with the new Schema.org tags, as there was very little empirical evidence to support using Schema.org tags as an SEO strategy.

That’s a lot like where we are right now with HTML5. While people have been writing about HTML5 for several years, no one is out there providing evidence about the effects of HTML5 on organic traffic or really even SEO in general.

In fact, none of the well-known SEO blogs or writers are even discussing HTML5 very often, and those writing about HTML5 are all saying the same thing.

What HTML5 Can Offer

  • Brings several improvements in usability and user experience
  • Has several new tags that will help developers classify important content
  • Is awesome for sites rich in media (audio & video)
  • Is an amazing alternative to Flash and Silverlight
  • Is SEO-friendly when it comes to website crawling and indexing
  • Is going to be heavily used for mobile apps and games

So, survey says: HTML5 will someday make everything better. But that someday is not here just yet.

Most bloggers/writers fail to mention an important point: to date, none of the popular Internet browsers fully support all of the features and codes in HTML5. To be clear, today’s browsers will render HTML5, but there are still many aspects of HTML5 that are not fully supported by or compatible with all Internet browsers.

HTML5 for SEO

Google & HTML5

On May 22, 2010, Google created a Googledoodle tribute to the Pac-Man video game. It was an animated logo that was also a playable version of Pac-Man. The logo was created with HTML5, and it had a Flash option for browsers that didn’t support HTML5 at the time. I’d bet that the Pac-Man Googledoodle was most Internet users’ first experience with HTML5 and its capabilities.

Personally, I thought it was exciting. For me, it provided a tangible glimpse into the future of the Internet, website browsing, mobile applications and games, and website functionality. On the SEO sides of things, it opened up my imagination even more, and it got me thinking about all the potential that HTML5 would have in the realm of SEO.

Google HTML5 Doodle Pacman

But how would Google use HTML5 for SEO? Would Google provide any advantages to websites moving to HTML5?

In a post from Oct-2010, Barry Schwartz brought up HTML5 and Googlebot. Barry cited a Google Webmaster Help thread where Googler JohnMu implied that Google will “wait and see” and “adapt” to HTML5 as it grows in popularity:

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.

While that thread is over a year old, it says a lot about Google’s disinterest in providing any SEO advantages for websites using HTML5. If any of my clients are thinking about moving to HTML5 strictly for the SEO benefits, at this point I don’t think I’d recommend it as an SEO play. I would recommend HTML5 for other reasons, but not strictly for SEO…at this point in time.

If HTML5 is so much better than HTML4, when are we supposed to use it? And when will HTML5 help with my SEO strategy? Those are great questions. I’m glad I asked.

How SEO Benefits From HTML5

I do not want to create the impression that HTML5 is bad for SEO.

For some websites – especially those heavily reliant on Flash – SEO is a godsend. If you have a site that is nothing but Flash, you will definitely see benefits to switching to HTML5.

First and foremost, searchbots will be able to crawl your site and index your content. All of the content that is currently embedded in animations will be readable to search engines. In basic SEO theory, this one aspect of HTML5 will do wonders for your website’s ability to drive organic search traffic.

Another benefit of using HTML5 is that it tends to generate buzz (read: links). On Monday, Facebook launched their long-awaited HTML5 iPad app. Pandora recently launched a new version of their music player in HTML5. Gaming platform Zynga recently launched 3 new HTML5 games that will run on mobile browsers.

More and more stories are being written every day about websites re-launching HTML5 websites and/or HTML5 features. Being on the leading edge of new technology is great for users, but don’t forget about the link-building, press-generating aspects of such moves. It’s all about inbound marketing, right Rand?

Finally, from a usability perspective, HTML5 has the ability to transform how users interact with websites. Websites that are rich in media stand to gain the most, as there are several new elements in HTML5 that allow for easier audio and video streaming, particularly on mobile platforms.

By now, we are resigned to the fact that the iPhone and iPad will never support Flash. But that’s okay – because now we have HTML5! Developers can now embed audio and video without having to worry about browser compatibility and/or platform capabilities.

New Tags For HTML5

For quick reference, here is an HTML5 cheat sheet. If you are familiar with HTML, a lot of the tags look very familiar.

However, there are a few tags I would like to point out, as they will likely be critical to the SEO success of HTML5 websites:

  • <article> specifies an independent block of content. The contents of an article tags should be entire self-contained. A blog post or new article could be wrapped in an <article> tag, for example.
  • <section> specifies a subsection of a block of content, such as an <article>. If a blog post was broken into several sections by subheaders, each section could be wrapped with a <section> tag. Just as books have chapters, blocks of content can have section.
  • <header> could server two purposes: (1) to specify the header of a page or (2) to indicate the header section of a self-contained block of content (an <article>). <header> tags might contain navigation, branding or the document headline.
  • <hgroup> is used to wrap a section of headings (<h1> through <h6>). A great example would be an article with both a headline and subheadline at the top:
    <hgroup>
         <h1>Main Headline</h1>
         <h2>Article tagline or subheading</h2>
    </hgroup>
  • <footer> is a bit like the <header> tag. It could specific the <footer> of an entire HTML document or the footer of an <article>. This may contain things like footer navigation or meta-data about an article (author, data, etc)
  • <nav> is mean to enclose site navigation. This can be used anywhere: main site navigation, previous/next article links, or pagination.
  • <aside> is for content related to the parent element in which is resides, but not strictly part of the main document. In other words,
  • <video> is for video content. Its purpose is to provide a cross-browser compatible way to display video.

Final Thoughts On HTML5

If you are thinking that HTML5 can help with code bloat, you are correct. However, when we combine HTML5 with Schema.org tags, there is actually the possibility for more code per page. Such is life. The Web is getting massive, and there is a mind-boggling amount of content out there.

So when Google and Bing decide that they need more meta data because their super-sophisticated searchbots and index warehouses cannot possibly sort through all the content on the Internet, I say we should help them. And at the same time, why not be nice to our website’s visitors by making websites more fun and easy to use? HTML5 can help us achieve both goals.

Sure, a lot of SEOs will push the boundaries to test the algorithmic weight placed on the new HTML5 tags. Then search engines will constantly update their algorithms to adjust to shortcuts and strategies that SEOs find in HTML5.

You know, it actually sounds a lot like the last 15 years in the SEO world. Except now we don’t have to talk about indexing Flash anymore. Knock on wood.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: Advanced | Channel: SEO | Enterprise SEO | How To | How To: SEO

Sponsored


About The Author: is Chief Traffic Officer at PMG, a full-service digital agency, where he directs all technical operations for the company, including the company’s SEO, social media, local search, reputation management, website architecture and usability, analytics and Wordpress practices. Follow him on Twitter @kerrydean.

Connect with the author via: Email | Twitter | Google+ | LinkedIn



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://www.zaddleinternetmarketing.com Liam Lally

    Kerry – extremely good blog post.

    I have been working with a developer recently who has already adopted the HTML5 Tags and Schema.org markup language on their new websites. I think this is a topic worthwhile being ahead of the game (or at least keeping up with it) rather than doing this 2 years down the line when it becomes clearer of the SEO benefits.

    Will duly follow you on Twitter :)

  • http://www.logicping.co.il Shay

    Adobe just announce that it drop the flash for mobile so basically HTML5 is going defiantly to be the king!!!

  • http://seo-website-designer.com Tony

    I can’t see where html5 has a benefit over flash with regard to SEO. I keep seeing this statement bot no actual reasoning or evidence behind it.

    If you do flash like stuff in html5 then it’s JavaScript. A language very similar to what flash is written in. So it has the same fundamental issues that make it hard to crawl. How does html5 solve that issue? A pile of crap in a new box is….a pile of crap!

    I’m not saying html5 is bad, but don’t expect Google to suddenly learn how to interpret your complex animated pages just because you switched them from flash to html5 code. They might find it slightly easier to get the text from the content, but to understand how the text is used a complex job, and the easiest solution is to ignore it. A simile case, where text is used in a JavaScript based tabbing system can get the tabs text ignored. Don’t expect content in JavaScript, hidden data or AJAX calls to do brilliant, unless your FaceBook or Disqus ;-)

    html5 does have some good features for SEO, which you pointed out:

    The extra semantic tags such as may help the search engines to confirm the true content of a page.

    Semantic markup is not technically html5, but microdata (schema.org) looks like the syntax that will dominate and is html5 specific.

    It does bloat up code a bit, however I hope it’s bloating will add valuable information for the search engines and not just formatting and styling that traditionally bloat pages..

  • http://www.cometton.com Tom Conte

    HTML5 technologies have a lot to offer outside of semantic tags. One of the plagues of the internet is the use of # or #! within URL structures. An awful implementation of this is seen on billboard.com. Check out how 2 URLs exist for the same content and how polluted they can be when you enter any page other than the homepage.

    The HTML5 History API (which is actually JavaScript) solves this problem because we can update the browser’s history stack while dynamically loading content (updating sections of content on a page; think photo galleries).

    One more item to mention is HTML5 Local Storage (again, JavaScript). Perfect use of it would be for mobile sites. Generally, the cache limit on smartphones is very small so users are consistently downloading necessary components. With Local Storage, we can increase the limit of cacheable objects to provide a responsive experience.

    Going back to semantic markup, is anyone talking about the benefit of rich snippets? CTR + Traffic + Links = Rankings? :)

  • http://myindigolives.wordpress.com/ Ellie K

    Listen up to what Shay mentioned: It is recent information and will make a BIG difference re advantages of HTML5 support of video. Adobe just announced it is discontinuing Flash for mobile, with desktop and other devices presumably to follow.

    Also, as Kerry mentioned, sites like Vimeo and YouTube now offer both Flash and HTML5.Most users like the lighter HTML5 versions.

    Other than HTML5 for video and its appeal for users, it seems like HTML5 could be a real annoyance initially! Tony describes some reasons. I think that despite the fact that schema.org is a standard agreed upon by Google, Yahoo and Microsoft/ Bing, there will be an uneven time interval when they will need to learn how to interpret your HTML5 compliant pages with the new tags. Assuming you get it all correct, with validated markup. I don’t have any evidence to cite, just experience in dealing with standards introductions and transitions.

    Here’s a recent sort-of-example: Google+ implementation. It is new, it is Google’s own product, and it is still in development. Issues due to a single page component, the Google+ feature, are tolerable. But I wouldn’t want ALL of my webpage, and SEO, to go through that at the same time!

    The one other concern I have is that HTML4 (and predecessors) were drafted by W3C and finalized at some point. HTML5 is apparently a “living standard”, a versionless one, thus called HTML, and led by WHATWG (no idea what that means). W3C is still working on their HTML5 snapshot version, getting close to finalizing, and WHATWG works with W3C. But I do wonder how webpage designers and website owners are going to fare with a “living standard”. Static HTML4 (and predecessors) were a known value, could be taken for granted even when other things like search engine algorithms changed.

    Thank you Kerry, for an excellent post. I learned a lot from reading this. Actually, quite a bit more than from trying to read WHATWG and W3C docs, but that’s cause you are writing on a level appropriate for my needs. I appreciate it!

  • http://www.guvnr.com the_guv

    wot no comments? how mean, great , tx, tweeted :)

  • http://www.facebook.com/KeywordJump/app_165629380224772 seo company

    Increase in your options could help you to increase the traffic design and this eventually causes boost in income. So control your options in a appropriate way in case you are awaiting obtain highest possible income. If one controls his financial situation in a better way then you can benefit for these services a lot.

  • lauraine 2012

    Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 converter

  • http://www.facebook.com/profile.php?id=631628772 Michael Melone

    I’m looking for a reliable source better to understand HTML5 browser compatibility. Is there a source to show which browsers (ex. IE7, IE8, Chrome 11) choke on HTML5 and what their market penetration currently is?

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide