SEO Best Practices For HTML5

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.

Google and 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.

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 HTML5games 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>). - eader- tags might contain navigation, branding or the document headline.

• -hgroup- is used to wrap a section of headings (-h1- through - 6-). 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,could be used on a website sidebar or it could be used within an <article> for special call outs – like the “did you know” call outs found in many books.

• -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.

source Kerry Dean