Html5 and the considerations for SEO

With the event of HTML5 we have all been promised that semantic mark-up is the way forward and for those who ignore this idea will be rewarded with lower rankings.

SEO in a HTML4 world

With HTML4 life was simpler, every page should have a single h1 tag and in source, the higher for your SEO text the better.

In fact HTML4 spawned a trend in bending the order of html mark-up to help with improvement in ranking.

This lead to two big problems…

The first is you are re-ordering source code simply to service the perceived needs of Google. This lead to the second issue which affect the usability of the site for some users. Explicitly blind users who use screen readers, or users who don’t have CSS turned on, would see a completely different running order.

HTML5 the game changer (well sometime maybe in the future.)

With HTML5 we have new elements and tags which inject meaning to our source code.

Unfortunately with this new format, there can be a lot of confusion with not only the standard, but also how it relates to SEO.

So as an example one of the new tags is one called <header>, most people assume (wrongly) this this related to the area at the top of the screen (Sometimes called a masthead) and will often be associated with the logo and strap line.

In fact <header> has a much more generic meaning, it simply means a heading area for part areas our content.

So yes it could be the masthead, but equally in each ‘section’ each could have its own header etc.…

Google’s view of HTML5

Google view of indexing webpages has not really changed massively since it started.

It first considers how many quality sources link to your webpages and then looks at each page to see how relevant it is for each search term.

And to be brutal, it uses the methodology that higher up in the source code something is, the more important it is.

So if you have a <header> or <h> in the masthead, Google will see this as the most important part of the page.

Now for a homepage, where we are promoting ‘brand’ this is OK, but for internal and landing pages should this be the case?

When the top of your page is not the most important part

For most websites there will be a masthead, followed by navigation, then content followed by a footer.

Even if we add a header and h1 into the content area, if there is a header or h tag in the masthead, then Google will consider the masthead header as our most important area of the page.

Worse still because there is a gap in mark-up between this and our content, Google may depress the importance of the actual content area.

For most websites, they want traffic from Google. And often our SEO copy will be in the main body of the page and not the masthead.

If the page is coded as HTML5 and uses <header> and <h> tags in the masthead, we may end up confusing Google as to where our most important content is.

In addition because we now have tags like <main> <article> and <section> it means how we use these will impact how Google understands our webpage.

How to help Google (and yourself)

The simplest way to make sure your mark-up works well for Google, is simply to disable the css and JS from showing and check how your page ‘looks’.

If it still makes sense, you are on the right track.

Next look at the generated source and check the document outline, does it naturally work or does it look ‘awkward’.

Although Google does do some visual check these day to prevent ‘hacks’, treat Google as a blind web user and you won’t go far wrong.

Final thoughts

Although it’s tempting to construct source code and use CSS to bend SERP’s, to future proofs your sites you are now better to make sure you sites still work, even if the CSS is turned off.

After all this is how Google really sees your page.