SEO Tips & Tricks: HTML < h1> to < h6> Header Tags

By Garrett Blanton posted on Thursday, August 6, 2009 - (Tips & Tricks)

Share |

Search Engine Optimization is the focus of every website JVF Consulting deploys to the World Wide Web. When a new website is on our drawing board, the first question our SEO teams asks he designers is, “Where will we put the h1 tags?”. As simple as the question may seem, most often times the h1 tags have been left out, or there is no room left for them on the page. The importance of the header tags are so great, we will continue to build the website until all the pieces fit perfectly.

For those of you who are not familiar with header tags, I’ll do my very best to explain them as simple as possible. Basically heading tags help structure a webpage and highlight the topics within. Header tags are used to emphasize the importance of a certain text within a page. The h1 element is a heading, the topmost out of six you can use. In other words, there are six headings available in HTML. h1, h2, h3, h4, h5 and h6, with h1 having the most importance, and h6 having the least importance. Therefore, if you use h1 tags (the most important header tag) with a keyword, it's like you’re telling to your site visitors and the search engine spiders that the topic is very important. Google and the other major search engines will know a heading tag when they see one, and always treat it as important relevant information.

One problem some developers have with the h1 tag is that it's often too big and unappealing to use. In most browsers the h1 tag is a huge font that can look out of place on a page, unless it is properly formatted. Fortunately, you can get the best of both worlds by using Cascading Style Sheets (CSS). By using CSS, you're able to tell the browser to display the h1 tag and other tags on your page to look any way you like. This is the trick that most developers are not completely aware of. If you follow these CSS instructions correctly you can get the best of both worlds, which is a boost in keyword relevance, and better control of your site's look.

Here is an example of what the header tags will look like on a webpage that does not have the CSS hack applied.

To trick your header tags you must locate and edit the style sheet of your website. Once you have located your style sheet edit the file to look like this:

When applied to the web the page the h1 tag will be rendered to look like this.

Give that a try on your web page and alter as needed! Once you have mastered this method be sure to implement it on all the websites you deploy for long lasting SEO.

Tags:

SEO, Tips & Tricks, Header Tags

Comments (18)

By Rachel G. posted on Saturday, August 22, 2009 @ 10:55 AM

I used to put tags depending on the size I wanted the titles to be, often neglecting to use a H1 tag on many pages... big mistake.

Now i am always using H1 tag for every header (one per page), and I use CSS to adjust the size of the text. Much MUCH better. Keywords are the key to SEO, but we have to make sure google is going to make our site rank for the ones we want it to.

By John posted on Monday, August 24, 2009 @ 12:13 PM

Completely agree with using the h1 tag, also h2 where possible, and yes you can use CSS to format. However, would an h1 tag in a really small typeface - as per your example - be seen as black hat in any way? That is, is it telling Google one thing (this is really important) whilst telling the human reader something else? Otherwise, a very valid point - web design is moving more and more away from the old rigid look.

By Arindam posted on Saturday, August 29, 2009 @ 8:06 AM

Like all seo tricks , even this has been tested and has worked for some time. But Google and other search engines tends to devalue css based H1 tags , as I have found out on various websites.

By music mates posted on Tuesday, September 15, 2009 @ 9:15 PM

it's like you’re telling to your site visitors and the search engine spiders that the topic is very important. Google and the other major search engines will know a heading tag when they see one, and always treat it as important relevant information.

By joel posted on Monday, October 12, 2009 @ 11:21 PM

Pretty and effective tips to follow. Thanks for sharing with us. Great work.

By link building posted on Tuesday, November 10, 2009 @ 5:03 PM

very interesting post. clearly explained about the heading tags. mostly i dont use h1 tags becuse of the size in my pages. you solve the problem by using the cascading style sheet. really very informative post.

By alternative energy posted on Friday, December 4, 2009 @ 10:37 AM

Good header tag explanation. It's definitely a key signal to the major search engines as to what your website is about, and it's really important that every page have one.

By Mio Navman M300 posted on Saturday, January 9, 2010 @ 9:29 PM

Very good tips and tricks are suggested here in this post which are easy to follow and very helpful.Website Optimization is the means to pull traffic in order to promote your website and improving the ranking of your website.

By Simplicity Bags posted on Wednesday, January 20, 2010 @ 1:52 PM

I agree H1 tags are very important tag to use to get ranking, but only use it once on the page

By Homes in Tulsa posted on Saturday, February 6, 2010 @ 3:54 AM

There should be one important factor which many of us neglect. There should be only one H1 in each page and preferably should be placed on the top itself. CSS is a major boon for developers which helps in tweaking the appearance of the h1 tag according to our site's design so that we can easily sync it with the layout. Most of the CMS tools like wordpress use H1 as the site's name and puts it on the top itself.

By seo header tags posted on Friday, March 26, 2010 @ 9:03 PM

Seo header tags is the major part in seo. It is recommeded to use atleast one h1 tag in the page. And if you use that heading tag for the targetted keyword. The page will get optimized quickly. This is an important factor in onpage seo.

By Daniel posted on Monday, June 7, 2010 @ 11:18 AM

Are you sure Google and other search engines dont know about this, they constantly tweaking there algorithms and if your site is found to be trying to "trick" the you'll fall into the sand box.

By Lolita Perkins posted on Wednesday, November 10, 2010 @ 7:58 PM

Hi,

Can you use the H1, H2 etc.. style tags within a wordpress post? If so, will they override those on the css style sheet?

By storage units posted on Tuesday, June 7, 2011 @ 2:15 PM

We've found over the last year that H1's have less value than ever before. Our geo-targeted pages are ranked well as a result of Title Tags, Links, and page load speed, nothing else.

By Matt posted on Friday, June 17, 2011 @ 12:46 PM

One thing that we are rolling out on our entire network of sites is the used of outbound links from our H2-H6 headers. We found the link juice flows better back to our index page. Not sure why but I thought I'd throw it out there.

By enveloppen posted on Saturday, July 30, 2011 @ 4:45 AM

I would not call it a hack to change the fontweight and-size in the css

By Carl Reid posted on Thursday, October 6, 2011 @ 8:22 PM

Nice hack... I was wondering... seems that most themes use the h1 tag for the site title and not the post or page title. What is your opinion on this? I was thinking of switching the site title to h2 and pages and posts to h1 for SEO.