Heading tags

Heading tags

How you lay out a page is an important part of optimising it...

Page structure is important when it comes to search engines. A good heading structure helps the search engines get an idea of what your page is about, and how the different sections of content relate to each other.

The heading tags in HTML make up a large part of a page’s structure, and are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The <h1> tag stands for “heading one” for example, and is the most important heading tag. The importance of the other tags reduces as the number increases.

I recommend that you implement the tags in a hierarchy, so use <h1> first as the main heading for the page, followed by <h2> tags. Each <h2> tag may have <h3> tags under it, and each <h3> tag may have <h4> tags under it and so on. I believe that using the tags in a strict hierarchy like this is a good practice to get into, as it will help you structure your pages better when creating them. The <h1> tag should mark up the most important heading on the page, and it makes sense for it to be bigger or bolder than the other headings because of this. Because it will likely be more obvious than the other headings, it also makes sense that it be placed near the top of the page ahead of other headings for more prominence.

What if <h1> can’t be the first heading tag on my page?

It isn’t a requirement for the <h1> tag to be the first heading tag on the page, so you won’t be breaking any SEO rules if your <h1> tag is half way down your page for whatever reason. Google is good at recognising the <h1> tag where ever it finds it, as explained in the video below by Matt Cutts, the ‘public face’ of Google.

What if there is no clear ‘main heading’?

Another common problem you could encounter is having no obvious heading that is more important than all the other headings. Thankfully, Google is very forgiving of multiple <h1> tags so long as you do not use them excessively.

Despite being able to use multiple <h1> tags, I do urge you that you use them sparingly. If your page has been designed with an obvious main heading that’s great, you should place that inside <h1> tags. If not, you may have multiple headings on your page that are equally important, with no heading being more important than the rest. In this case, you can place each heading inside <h1> tags. Personally though, I would always try to find some text somewhere that I could use as the main heading, even if it does not look important or is not in a prominent position on the page.

In this video Matt Cutts explains that multiple <h1> tags are acceptable for Google.

My personal best practice guidelines

The H1 tag(s) should:

The other tags should:

You should be able to tell from the titles of the headings and the page hierarchy what the page is about, and what you can expect to find on it.

To make analysing the headings on your page easier, try the HTML5 Outliner Tool by Geoffrey Sneddon – it’s also available as an extension for Chrome & Chromium. If you prefer Firefox, the Web Developer add-on is a great all-round addition to your browser, and includes an outline feature among many other tools.

An example of good heading structure

<h1>Video Game Reviews</h1>
  <h2>Game Genres</h2>
    <h3>Action & Adventure</h3>
    <h3>Sport</h3>
    <h3>Role-Playing</h3>
    <h3>First-Person Shooter</h3>
  <h2>Game of the Month</h2>
    <h3>Final Fantasy VII</h3>
  <h2>Find a Game</h2>
  <h2>Submit a Review</h2>

Please add a comment below if you’d like to recommend some more SEO tools or discuss anything in this article.

Please recommend us if you found this article helpful:
Samuel Claxon
Author
Samuel Claxon
Developer

Published:
22nd March, 2012

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all