filed under: Search Engine Optimization, Web design,

Not just semantics: SEO-friendly page headings

Many search engine optimizers believe that page headings (h1 – h6) are an important on-page factor for search engine rankings. While not nearly as crucial a page’s title element, page headings likely play a minor role in search engine rankings. More importantly, page headings help provide organization and structure to your document, which has long been on the minds of web-standards types. Here's one approach to coding your site's logo.

The "official" stance on page headings

From the W3C itself:

"h1 is the HTML element for the first-level heading of a document:

• If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.
• If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write Dogs while the title should work in any context: Dogs - Your Guide to Pets."

The Web Design Group states:

"A document generally should have exactly one h1 element to mark the most important heading."

Another interesting thing to point out (from the W3C again):

Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.

Alright, so we should use the h1 element to mark the most important heading, and try to use only one. As for order, I slightly disagree. We are assigning relative importance, not taking notes.

The SEO view

A survey of top SEO experts conducted by SEOmoz placed Keywords in H1 Tag as the fourth most important factor in the under Keyword Use Factors.

How much it effects rankings is certainly up to debate, but the general sense is that it probably helps. Couple this with the fact that it falls in line with best coding practices and it's worth doing.

In practice

• Use an h1 for the site name or logo on the home page, then relegate it to an h3 or lower elsewhere. Content should take center stage at that point, not the site name.
• Include a descriptive and accurate phrase for h1s on subpages if possible. Don't clone the page title, but don't veer too far off.
• Use subheadings where appropriate (h2, h3, ...). Think about how important the heading is to the page and not about text size.
• Provide search engines with HTML text for page headings. If using images or Flash, always use a CSS text replacement technique or sIFR.

Example: Marking up a logo image

Here's an example of how to code a logo using the Phark Method of CSS Image Replacement.

The HTML

<h1 id="logo"> <a href="http://example.com" title="Company Name/Short Tagline">Your Company/Short Tagline</a> </h1>

Above we have the logo as an h1 that links to the homepage. We assign it an ID to set-up some CSS trickery. Tip: Use the the title attribute in all of your links.

The CSS

#logo { background: transparent url(../img/your-company-name.jpg) no-repeat scroll 0% 0%; width: 250px; height: 150px; text-indent: -3333px; border: 0; margin: 0; }

We send in the logo as a background image, and push the HTML text off the page using a negative text-indent. Be sure to include the dimensions so you can see the entire image. Use a descriptive file name – search engines are file name aware, it's good for image searches, and it can aid in accessibility. Think about how many files are named "logo.jpg" versus "your-company-logo.jpg."

#logo a { display: block; width: 280px; height: 200px; text-decoration: none; border: 0; }

Then we style the image link. Make it a block level element so you can assign dimensions to be clickable (I make mine a little bigger than the image, but it's probably better to mirror the image size if you're working in tight quarters). Remove any link styling such as borders or underlining you may have set on your anchors elsewhere in the stylesheet.

In Summary

Pay attention to your page headings and document structure. Also, be sure to using coding practices that allow for key text to be in the markup where the search engines can gobble it up.

Further Reading

• http://ghettocooler.net/2006/12/07/replace-your-logo-css-image-replacement/
• http://sltaylor.co.uk/blog/2007/06/google-seo-css-image-replacement/
• http://www.webmasterworld.com/google/3659061.htm
• http://www.threadwatch.org/node/4313

Comments (0)