04 May 2008

How to Use Hx Tags To Boost Page Performance

by Stoney deGeyter

There are a lot of elements available on a web page that can be successfully leveraged to improve keyword performance with search engine rankings. Bolds, italics, bullets, headings, blockquotes, etc. are all used to format on-page text in a specific way, but also tell the search engines a bit about each area of content. Bold means you want it to be noticed. Italics mean you're adding emphasis. Bullets mean you're providing lists.

While there is never a magic pill in SEO, "just bold your keywords and you'll grow rankings overnight," each of these elements can be strategically used to improve your on-page SEO efforts. The search engines may, at any time, decide to treat text within each of these areas slightly different than standard text. It all depends on the algorithm of the day. The danger with using any good things is in going overboard in usage. On-page coding elements, such as those noted above, should be used in a way that makes sense visually, not just as an attempt to reinforce your keywords. Too much bolding makes the meaning of bolded text obsolete!

Let's talk about Heading tags

Aside from the title tag, which isn't really a part of the visual page, the heading tags can provide both visitors and the search engines significant cues to the importance of your on-page content. There are six different heading tags: H1, H2, H3, H4, H5, and H6. Collectively these are referred to as Hx tags.

The value of the Hx tag is much the same as the value of your main points in an outline for a book or paper. Your outline shows your main topics and sub-topics. These are often then used as section headings in your final draft. Your h1, for example, would be the page topic. Your H2s would then be your main points (I. II. and III.) Your H3s would be your first sub-points (A. B. C.) and your H4s would be your second sub-points (1. 2. 3.) etc.

Hx outline

Or you could use a newspaper type-format where you have a topic headline (H1) and a sub-headline (H2) and then all your points and sub-points and secondary sub-points (H3, H4, H5).

Hx outline

How do I use Hx tags on my site?

Most web pages don't have enough text to warrant as many headlines as exampled above. This example was to show how headings would be used if you were writing book or paper. Hx tag usage should be determined by the content you need on each page. Let your content be the guide for determining where, how often, and what kind of headings need to be used. Don't create more text just to create more Hx tags or shove an Hx tag in front of every paragraph just because you can.

Usage of headings should feel and read natural. If you do have several paragraphs of text it is always a good idea to break them up a bit using the headings. This makes reading and scanning your pages that much easier. If your page is several thousand words long then, yeah, you might need us use Hx tags all the way down to the H6. On the other hand, if you only have a few hundred words you may use only an H1 or H2 at best.

Headings should be short, to the point and accurately reflect the content directly beneath it. If you're describing benefits then the heading can read "Benefits of [insert keyword here]." If the content is about various uses then the heading can read "Common uses of [insert keyword here]." Sometimes it just doesn't make sense to use a keyword at all, depending on the content and context. You don't want every heading on your page to use the same keywords. That's not only redundant, but it looks silly to the reader. Again, it's all about using them in a natural context.

How do Hx tags impact SEO

Well, I'd have to say "minimally" but since I get paid by the word, let me expand on that (just kidding, I don't get paid by the word... I just like to pretend!). Some believe that Hx tags are assigned no additional significance than, say bolded or emphasized text. Maybe. Maybe not. So much in SEO has only a minimal effect as a single element, but when used together they can all have a very big impact. It's all about the baby steps.

My opinion, if the top of your page has a headline in an H1, the search engine very specifically sees that as the headline for the page. This shouldn't be confused with the Page's title tag, but often the headline and title tags can be interchangeable. Blogs do this quite frequently. In any case your H1 tag is a great way to introduce the content of the page. I have to believe the search engines take this into account, in some form or another.

As for the H2-H6, again, if these are used as section headings the search engines will read them as such. I believe that by adding these heading tags, and if you can logically use keywords in them, you're providing additional emphasis on your keywords, by reinforcing the content with quickly skimmable and scannable headlines.

Styling your Hx tags

In their natural, unformatted state, Hx tags can be way too big, and often won't look good with the design of your site. That's all easily fixed using CSS (cascading style sheets). By adding your Hx tags into your style sheet you can make them look just about anyway you want.

Here is an example of how I've formatted my Hx tags via CSS for my site:

h1 {background:url(/images/checkered-flag.gif) no-repeat left; font-size:150%; padding:15px 0 15px 45px; font-weight:bold; border-bottom:dashed 1px #FF9933}
h2 {font-size:105%; font-weight:bold; line-height:150%}
h3 {text-align:center; font-size:110%; font-weight:bold; border:1px solid #C7C7C7; background:#E2E2E2; margin-top:0}

Let's start with the H1. In this line of code there are three main things that are happening to give the H1 the style that I want. First, I'm specifying the font size to be 150% the size of the standard paragraph text (which has been specified elsewhere.) Second, I've added an image to appear to the left of the heading (and used padding so the text doesn't appear on top of the image.) And Finally, I've added a dashed line to underscore the H1.

H1 Style

The beauty of all this being in the style sheet is that anywhere I put text in to an H1, it'll appear the same. No additional formatting required.

I use my H2 tags like sub-headlines. You can see that the font size isn't much bigger than standard font. But placed just below my H1 tag it works really well.

H2 Style

My H3 would be my first main point or main section, and have styled it completely different from the others. This one is solid with a border going all the way around.

H3 Style

You can easily style your headings to look any way you want. And changing them is easy, simply change your CSS and all your headings throughout your site will immediately change to the new style just saved.

One important note to remember. Your Hx tags should only be used as a means to call attention to a new or next section of your content. It's easy to use Hx tags instead of creating new style classes for non-heading elements. Avoid the temptation. Use headings only as they are intended. That means you should never have more than one H1 tag per page (at the very top) and you don't overuse the rest. If you removed all your text and left only the headings, you should be able to get a sense of what the content of the page is all about without reading a word of it.

Adding Hx tags probably won't give you significantly improved rankings overnight, but in context with an otherwise properly optimized page I do think they can add some additional focus for the search engines to analyze. Aside from search engines, using well-styled headings just make sense from a visual standpoint, giving your content clarity and often making your pages easier to read. Even if you get a minimal effect from both of those angles, over the long-term it can add up to a significant performance improvement.


Want more from your web site?
Search Influence can help! Targeted Traffic. Increased Revenue. Results Guaranteed. Customized Internet Marketing you can afford.

No comments: