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

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.

h1_example
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:

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

example2
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.

  • Don Hays

    Is there a negative effect if you have more than 1 – h1 tag? my wordpress theme has one for the blog name and another for the post title…

  • 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.

  • 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.

  • 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.

  • 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.

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

  • John Sheen

    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.

  • 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.

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

  • Rachel G.

    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.