Improve Your Web Site Through The Proper Use of Heading Tags, Alt Tags & Title Attributes

By Richard Zwicky
Posted Friday, February 13, 2004

Improved web design and search engine performance all in one easy step! Believe it or not, it is possible, easy, and really straightforward. There are 3 extremely useful tags and attributes that most people overlook, or do not take advantage of properly. These are alt tags, title attributes in links and heading tags.
The reason you want to spend some time focusing on these 3 facets of your web site is simple. Two of them make the web site easier to understand and navigate, for people and the search engines. The third one is much cleaner than the <font size= > tags, and works really well for key phrases and terms within the search engines. This article deals with the merits and value of each of these mostly misused, or ignored opportunities.

ALT TAGS

The first opportunity is the one that is most often used, and misused: The alt tag. Alt tags are comments that should be used whenever you add a graphic, or image to a web page. Pictures are worth a thousand words to you and me, but zero to a search engine. An alt tag should be a little bit of short, descriptive text which helps any user (and search engine) understand what the reference is pointing to.

The code to make a banner appear is as follows:
<a href="http://www.metamend.com/"><img src="http://www.metamend.com/images/28x28_roundw.gif" width="28" height="28" alt="Metamend Search Engine Optimization Service" border="0"></a>

When you move your mouse over the graphic, words appear. The words tell people what the graphic refers to, what it is about, and where it leads to. Internally, if you had a hardware store, you could use an image of a power tool link to a "tools" section, with the words "Tools & Power Tools" in the alt tag. It may be obvious, but most people don't take advantage of this opportunity. Most people don't even have alt tags attached to their images, or have alt tags that look like this - alt="" - not much good, they're blank. That's all the search engines, and some old web browsers will see - blank space.

Alt tags also afford you an opportunity to give the search engines more meaningful content to work with. If you have a graphics rich web site, there's very little to no text for the search engine spiders to use to analyze your site. If you attach a relevant alt tag to each image however, the search engines will read them as your textual content, and your web site will show up in relevant searches. Even if your website is content rich, the alt tags allow you to reinforce what is highly important, the key terms, within the content. Here's the key - use relevant terms. Don't just put "About Us". Use descriptive key terms, such as "About Acme Power Tools".

HEADING TAGS

Next, we have the Heading tags. Often, when web designers are building pages they use <b> tags, and <font size= > to emphasize the page heading, and subheadings for each section. Whenever you get the chance, use <h> tags instead. There are 5 different <h> tags. The largest - <h1> and <h2> - should be used for the major title on each page, and then the next three - <h3>, <h4> and <h5> - for subheadings. The smallest, <h5>, will look just like regular <b> bold text on a page.

So why use them? The single most important reason to use these, aside from consistency of output, is for the search engines. The search engines weight different text within a page differently. We have found that terms used in <h> tags are weighted heavier than regular text. This doesn't happen with the <font size= > attribute. The larger the <h> text is (1 being largest, and 5 smallest size), the more weighty or important the key terms in the heading are viewed as being with respect to the overall document. Use the terms in these tags judiciously. Especially in the larger sizes. The search engines give these <h> tags weight, because logically, the header for a page, and for each section of a page conveys the concept of what the entire document's focus is oriented towards. For this reason be very sure that you only use terms which you intend the web page to be found by.

TITLE ATTRIBUTE

Different from a <title> tag, this piece of code really should be used by everybody, without exception, just for the sake of being courteous. An example of a title attribute looks like this:

Note the title="..." segment in the hyperlink. Most people never use this attribute. The reason you should use it is simple: It's there for the blind. Text to speech browsers read the title attributes aloud, so that people who cannot see can still know what the page being linked to is about. If you are linking to a web page about John Deere Tractors, have your title attribute in the link say so.

Using this attribute also has the benefit of adding search engine related content. After all, the terms you use will be highly relevant and specific; you have just added one more instance of them to the page. Plus, it's one more thing in the design of the web site that will have been done right from the perspective of the search engines. The search engines look favorably on web sites that have taken the time to get all the details right. This simple addition to your web page may do little, or it may give your web site the push it needs to move to the next level in search results.

IN SUMMARY

The three features discussed in this article are all simple and easy to implement throughout a web site. If you only do one thing, make sure it's the title attribute: Anyone who is sight impaired will thank you. Getting all three right will help make your web site stand out, and your work stand out as that of a good web designer. They will also contribute to better search engine performance for your web site.

About The Author
Richard Zwicky is a founder and the CEO of Metamend Software, a Victoria B.C. based firm whose cutting edge Search Engine Optimization software has been recognized around the world as a leader in its field. Employing a staff of 10, the firm's business comes from around the world, with clients from every continent. Most recently the company was recognized for their geo-locational, or LBS technology, which correlates online businesses with their physical locations. (www.metamend.com)