HTML5 and SEO, What’s New Here?

Sep

HTML5 and SEO, What's New Here?

So I’ve recently began messing around more with CSS3, and HTML5, mainly to acquaint myself with the new syntax, and just the differing process of building in HTML5. Along the way, I’ve noticed a few differences that could be very useful to SEO! Particularly the way different areas of the web page can now be identified as, thanks to tags such as “header”, “article”, “aside”, “nav”, etc. This opens up a few possibilities for us, and also allows us to drop a couple work-arounds that we used to use!

New Identifiers

In HTML4, we found ourselves using an ungodly amount of divs, all with different names, but deep down, they are all still just generic divs, no one was more significant to the other, they were simply styled and named differently.

Now in HTML5, we can do without the div (for the most part). There exists now in HTML5, tags such as “header”, “footer”, “aside”, “nav”, and they are all going to be of different significance in SEO! Now that div that was once simply named “header” will actually be treated as such by Google, Yahoo, etc!

This is great news! As your header is not the only actual “header” on your website. Different sections may have they own header on the same page (such as section titles), and these can now be scanned as headers as well.

Less Classes & ID’s

With these new tags identifying page sections, as headers, footers, articles, asides, and the like, we no long have to give our own names to every div on the page. This makes code a bit more universal, in the sense that we no longer have to worry about two different developers referring to their “header” section as “head” and the other as “header” thus stopping some code from working.

Whether this is something crucial or not is up to you. But it seems that they are definitely standardizing page layout design in the markup side of it at least. Regardless, it will make the code much neater to have simply named sections instead of countless divs everywhere. The problem with divs is that the names you give them in your CSS are not recognized in SEO, and with the new features of HTML5, they can now be given their proper credit.

No More Header Image Hack!

Out of all the new tags, the most useful to use in terms of SEO is by far the “header” tag. Before now, we had to use a -text-ident hack in CSS to replace the text inside of a h1, h2, etc.. tag with an image. Apparently though, this is very frowned upon by search big-wigs such as Google. It seems this method can sometimes get you labeled as spam and thus not listed!

Thanks to the new “header” tag, though, we no longer have to worry about using this hack! Placing an image inside of a header tag will make the ‘alt’ of the image searchable as header information! YES! Awesome news for SEO lovers. Now we can put whatever information we want inside of a header tag, namely images, and still get all the search credit that is deserved.

It seems that one thing these new tags have done is made SEO a little less strict on readable text, and allowed for us to use more graphic elements and still categorize them accordingly based on what section of the website they are in, as notated by it’s specific tag.

When Can We Start?

HTML5 is supported by most new current browsers, reset style sheets and cheat sheets can be found everywhere, and lots of major developers are already experimenting with the new syntax. Why not start now? Mess with it for awhile before really using it on any major projects, but start learning by all means! One thing that has been made a million times simpler is the doctype, which is now simply !doctype = html. New browsers will recognize this and import the standards themselves. You can even run HTML5 validations!

So what are you waiting for? Start checking out HTML5, and experiment with some CSS3 while you’re at it.

This entry was posted on Friday, September 18th, 2009 at 8:49 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.