How Google Uses Headers – Tips for optimising your website for SEO

HTML header tags are some of the most abused of all among the W3C specifications, and often to little avail. Here’s an SEO myth: headers are treated as more important by Google, so you should stuff them full of keywords. That’s a lie! Here’s the truth about header tags, and how you should think about using them.

First up, reserve h1 tags for the most important thematic title. That is, make it really obvious what the page is about. Secondly, move down the headers focusing on navigable structure, not keywords – h2 tags should indicate a subsection of h1, h3 a subsection of h2 and so on. The words in these headers are not treated as more important for SEO purposes, but they do count for a great deal when Google comes to analysing your page structure for ‘quality’ content.

If you want to make something obvious, but it’s not entirely related to the content, consider using CSS to style a normal ‘p’ tag. For example:

Could be styled with the following CSS:

to make it stand out, while not being overly important to the structure of the page. Google rewards pages designed for visitors, not for search engines.

Another point to make about SEO strategy in general is considering using SEO techniques as part of your wider marketing strategy. For example, there’s still a decently-sized demographic who prefer word-of-mouth marketing, and like to accompany that with printed copies of webpages. For Goodness’ sake, don’t make it hard for them! The first thing you should be doing if your page is ever suitable for print – and it’s best to treat every page as suitable for print – is to take measures for making that easy.

For example, strip out backgrounds when pages are sent through to print. Almost all browsers will do this automatically, but to make certain of it, insert unnecessary-to-print images as CSS background-image attributes, not using tags. That way, browsers will pick up on their background nature and deliberately ignore them. Even if your users are using colour laser printers – which are renowned for their toner longevity and low print costs (they use toner powder instead of ink, and are typically less fussy about paper choices) – printing out a bunch of useless backgrounds will cause unnecessary ill will.

A few words for the wise on this: First of all, remember that a background-image has no size; it scales to fit whatever div it’s in. That means you have to set the width and height attributes of that div to see the image.
Secondly, when using the background-image attribute to fill foreground divs (say, to avoid printing foreground div backgrounds, if you get my drift), be aware that background-image does not support transparency. You can ‘fake’ transparency by messing with the opacity of the layer in Photoshop (and saving as a PNG), but other layers will not actually be visible through the div that owns that background-image.