Heading Tags, good for SEO but what if they are the wrong size?

Heading Tags, good for SEO but what if they are the wrong size?

Picture of David Dennis
Written by: David Dennis

Heading Tags (or ‘H Tags’) are generally the first visible text on a webpage. They are like a structural classification or category. Google uses content framed by H tags to understand the important aspects of the page. Many people relate them to headings in a newspaper. Traditionally they are like the main heading (H1), the major section headings (H2), minor points (H3) etc. The H1 should almost always be the largest text on the page.

Heading Tags for SEO

 

So an H1 is always BIG, H2 slightly less so. This is the default styling.

 

Website structure is important for SEO

The H1 tag is given prominence, it is the title or main heading. Googles major cue for content on the page is taken from the text in the H1 tag. But sometimes we want to highlight a keyword (by using an H1 tag which for SEO purposes becomes the main highlight of the page) but it should not really be the biggest text on the page. There IS a way to overcome this.

 

In interpreting how to display content the browser reads this: <h1 class="title">Your Title Text</h1> and goes to a reference file, an instruction file, called a CSS file that tells it what to do when the tag (‘H1 class equals title’) is there.

 

And it goes to the CSS file and finds something like this:

 

h1 {
color: #999999;
font-family: arial, sans-serif;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 1px;
}

 

A file that tells it how an H1 should be represented on the page.

If I wanted an H1 to be small I could change the size of it in the css file.

So, say I wanted the brand name to be in a large font and the keyword underneath in slightly smaller font. But I didn’t want the brand name to be the H1, I want the keyword to be the H1.

 

Technical SEO, important for websites.

 

In the CSS file I could change the font size of the H2 to be BIG so that the brand name is the larger text and the font size of the H1 the keyword rich text to be smaller.

This way we achieve a better layout and capture the SEO essentials.

Unfortunately, a consequence of this is that any other text on the website that is coded as an H1 tag will now be smaller everywhere on the website. This often plays havoc with page layout.

The work around for this is a thing called ‘classes’ which just further define an H tag.

 

<h1 class="title2">Your Title Text</h1>

 

So, in the CSS file we could define a new class called “H1 ‘title2’” and lay out what size, colour etc it should be. The web page then renders that particular H1 in a different style from all the other ones, but still as an H1.

 

We can do the same thing with all Htags. In fact every textual element on the page is coded in tags (paragraphs, normal text, italics etc) and there can be one default style for each as well as special classes to define how text appears in certain places on the website. Significant ranking improvements often occur when the H1 tag is optimised

 

A word of warning. This sort of modification of tags may be considered ‘gaming the system’. Google may note that a heading is prominent on the page but not wrapped in the H1 tag, it may choose to consider that larger text the H1 even though it is not coded that way. Changing the size of the H1 is unlikely to cause any problem if your page is otherwise optimised well but in general the H1 tags should be the largest and most prominent text on a page.

 

Picture of David Dennis

About David Dennis

David comes to SEO with a wealth of real-world knowledge. His technical understanding of SEO and an innate appreciation of the importance of seeing the bigger picture is invaluable.