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.