HTML heading tags are as much important to users than they are to the search engines.But even more important is to properly use them in your template.It stands to reason that following Google’s Search Engine Optimization Starter Guide would be common practice for commercial template providers, but unfortunately SEO has been an afterthought for many of them. We’ve had to fix up quite a few poorly coded templates, so we felt that helping our community apply proper HTML heading tags would be a great step in the right direction.
HTML Heading Tags
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>
According to webmasters at Google, HTML heading tags are more important for users than they are for search engines, but they are a factor in your page ranking, so you may as well spend a few minutes to make sure your template applies them properly. So where do I find these elements in my template? Ok, good question. One way to see how your headings show up is to search your HTML page source for the elements listed above. You should find a logical progression from <h1>, the granddaddy of all heading elements, to <h6>, the little piggy that went to the market. If you find more than one H1 heading stuffed with irrelevant links, images, or other trivial content, you should either replace the <h1> element with a lower level heading like <h2> or replace it with the <div> element.
The Magento default template, the one many template providers base their own templates on, is crammed with heading tags where there shouldn’t be any. And the default system logo is enclosed in an H1 heading, so any other put in your page content dilutes the H1 heading value. Search all your .phtml files for <h1> and make sure they’re in the right places.
When trying to decide where to stick your heading elements, a good rule of thumb is that each subsequent heading should be half as important to that page as the previous one. So text within an H2 heading is half as important to that particular page as the text within an H1 heading, and so on. Remember, this is page specific, not site specific! An H3 heading on your homepage could be an H1 heading on another.
What goes into your H1 heading should be content specific key words–maybe one or two from your page title, perhaps one or two from your meta description, or even a few from your URL. There are plenty of books on how to manage keywords, but your headings should include relatively important words specific to the content they entitle. Don’t put your entire page in an H1 heading. Google won’t like that.
A common myth is that there should only be one H1 heading on a single page. I tend to follow this practice with few exceptions, but if your page has more than one section of awesome content that warrants two granddaddies battling for recognition, then go ahead. My question to you would be why not make that second and third H1 heading the title for a new page? Google likes bigger sites, and people generally like organized content, so using only one H1 heading per page would arm you with the proverbial multiple bird killing stone.
A common practice at is to add classes to heading tags that take care of styling attributes and leave the heading elements alone. People tend not to use the <h1> element because it’s too big, but really every page should have one.
<h1 class="big_text">This would be big text because of the big_text class, not the H1 tag.</h1>
Now some of you who are up to date with HTML5 have noticed a new <hgroup> element used to group consecutive headings, but it’s said not to affect page ranking. You can read more at w3c.org. Do visit our friends at SEOmoz for a beginner’s guide to more great SEO tips,or contact us at if you’d like us to help clean up your template.
