Imagine getting your daily copy of the newspaper in the morning, unfolding it, and finding nothing but text on every page. No headlines, no subheadings. Just text, text and more text. How much effort would you put into looking through every page of the newspaper to find items of interest?
Headings on websites are even more important than headlines in newspapers. A newspaper is physical — it has a presence in your home even when you’re not reading it. But a website can be easily forgotten with the click of a button. So you need headings to tell your reader why they should stay and read your content.
A properly formatted heading gives human visitors cues about what they’re going to read. Even more importantly, a properly formatted heading will improve your search engine scores.
How Search Engines Use Headings
Search engines use headings, along with some other elements, to determine the relevance of your page to a user’s search query. The more relevant the content in your headings, the better your chances of ranking well in the search results. And well-ranked search results lead to more visitors to your website.
So how do your site visitors know they are looking at a heading? Typically, the heading is in a larger font than the page content. It may also be in a different color or even a different font face. A heading also sits alone on its own line. Content begins on a new line below the heading.
How to Format a Heading
There are three basic ways to format headings, but only one of them will tell the search engine that a line of text IS a heading. Human visitors to your website can visually tell what’s a heading and what isn’t, but search engine programs that visit your site rely on some specific HTML code to tell the difference.
HTML code is the funky-looking code that human visitors don’t see, but that the web browser uses to “draw” the web page. This code tells the browser whether to display text or an image on each part of the page.
Using Images for Headings
Some web designers like to use an image for a heading. To a web visitor the heading looks like text, but it’s really a picture of some text. The most common reason for doing this is that the designer is guaranteed to have the heading look the same in all web browsers. An image heading may look like this:
The problem with this method is that the search engine doesn’t know that this image is a heading, so you don’t get the extra “points” for having relevant headings.
But My Boss Insists on Having the Headings Look That Way
The most common reason for using images for headings is to have more control over how the heading will appear in the web browser. By creating a picture of some text, the designer is guaranteed that the heading will display in exactly that font face and font color. By contrast, a text heading might appear differently to visitors, depending on their individual browser settings.
If you must use image headings to ensure your heading appearance is consistent, there are two things you can do to help your search engine status.
First, give your heading image a relevant file name for the search engine to index. So if the heading says “Massage Therapy During Pregnancy,” then name your file something like massage-therapy-during-pregnancy.jpg. Since your heading image will be inside an IMG tag, be sure to use the ALT attribute to further describe your image. In our example, the ALT attribute might say “Massage therapy helps alleviate some of the common discomforts of pregnancy.”
So in the page code, our heading would look like this to the search engine:
<img src=”images/massage-therapy-during-pregnancy.jpg” alt=”Massage therapy helps alleviate some of the common discomforts of pregnancy” >
Using Style Attributes for Headings
Another common approach is to treat the heading as just another line of text, but with some special display attributes. This may actually be worse than putting the text inside an image, since now it just looks like some text on the page. To the search engine, a heading created in this fashion will look like this:
<p style=”text-align:center; font:16pt;color: blue“>Massage Therapy During Pregnancy</p>
This should show up in the web browser as blue, 16-point text centered on the line. The problem again is that the search engine doesn’t know that this is a heading. It just sees that you’re displaying this group of text in a slightly different format. With a small change, this wrong method can be turned into the right method for identifying headings.
So if you shouldn’t use images or style code to identify heading text, how DO you tell the search engine you have a heading?
Using Heading Tags
You tell the search engine you have a heading by using a specific tag called, not surprisingly, a heading tag. HTML code allows for six levels of headings. In most situations you won’t need to go more than three levels deep.
The most common heading tag is the level 1 heading. To use it you simply enclose your heading text in two H1 tags, like this:
<H1>Pregnancy Massage</H1>
Notice the forward slash in the second H1. This tells the browser it has come to the end of the heading.
Your subheadings would use H2 tags, like this:
<H2>Pregnancy Massage in the First Trimester</H2>
Again, notice the forward slash in the second tag.
But Heading Tags Show Up So Big and Gaudy
Some designers don’t like using headings because by default, they show up as huge letters and they look gaudy. To correct this problem, you can create custom style attributes for your headings. Using this method, we can take the bad-practice heading we created earlier and turn it into a heading that’s both search-engine-friendly and human-reading-friendly.
So the wrong way to create a heading with style attributes looked like this:
<p style=”text-align:center; font:16pt;color: blue”>Massage Therapy During Pregnancy</p>
To fix both the search engine identification and the gaudy-display issue, all we have to do is change the paragraph tag (<p>) into a heading tag such as <h1>. So the properly-formatted heading would look like this:
<h1 style=”text-align:center; font:16pt;color: blue”>Massage Therapy During Pregnancy</h1>
We have now created a heading that is:
- identifiable as a heading by the search engine
- more likely to display the way you want it to display, rather than using the browser’s default settings
Your Turn
Now it’s your turn. Take a look at your website and see if your page headings are enclosed in heading tags such as H1, H2, etc. If they’re just living in pimped-up paragraph tags instead, change the code to use heading tags instead. If you must use images for headings, be sure you’re using good file names and a good image description.
