Header Tags: Use Them Correctly

H1, H2 and H3 tags

The H1 header tag and its little sisters are one of the most powerful tools we have at SEO level to tell search engines what the content of our website is about. However, and although their concept is simple in origin, to give them a proper use is not something known by all. This post is dedicated to analyze some of the false beliefs about these headline tags, and to give accurate advice to really take advantage of their potential.

Header tags have had vital importance in search engine positioning since their origins, and with small variations in the weight of their influence have been maintained over time as something that definitely must be taken care of, from the phase of layout web design to content creation for a functioning portal. These basic notions must, therefore, be known by designers, programmers and people in charge of writing text for the web.

What is the H1 tag (and what is not)

H1 is a tag used to place the phrase that indicates the title of the content of a web page . Important at this point to clearly delimit the difference between website and web page: a H1 title must refer to a page of your website, and not to the website in general.

A number of conclusions can be drawn from this paragraph. The first of them, is that if the H1 headline summarizes in a sentence the content of the current page, it does not make sense that in the same web document we have several H1, because the summary of your site must be one. A case of misuse related to this fact are the blogs where in the listing of the last posts each of them bears an H1 headline: this is not correct, and it would be appropriate that in the listing the titles were H2 (title label of minor importance of which I will speak later), and when accessing the full post if we were shown the title as an H1.

The second conclusion is that if you summarize the content of a single page, your entire website should have an H1 for each of the documents, which summarizes the content of the same as specifically as possible. A case of misuse for this rule are those websites where the H1 is dedicated on all pages to the name of the company.

As a title it is, and being SEO oriented in the background to the user, the logical thing is that your H1 headline appears above the page the better , just as the title of a news in a web would do. Google gives greater importance to the content located in the first section of a web document, and also for the user it is logical to find the H1 in that position.

An H1 should not in principle be linked to other documents, as its content should only be important for the document we are looking at. If we place a link in that H1, we will unconsciously indicate that the important page for that title is the one we link to, and not the current page. From other documents, this page should be linked to the same H1 text to reinforce the importance of its headline, or variations of its keywords to try to position it in various related terms.

Implement the correctly the H tags during the SEO Contest UWELCOME2019

The H1 must be kept short, because the importance of the keywords contained in the headline will lose strength the longer it is. Both in this tag and in others (for example, the title meta tag), Google gives more importance to the first words of the sentence than to the last ones: make sure that your H1 starts whenever possible by the main keyword(s) for that document. This may go against a more journalistic headline, but it’s ideal for positioning the document. Think of the content of the tag as a phrase that contains complete information on its own to define the content of the site, and does not need additional information.

In addition, the H1 headline is useless if its title does not really refer to the content of that page. The headline keywords should appear several times throughout the text content of the page.

The H1 headline may or may not match the title meta tag of the HTML document. The Title meta tag has less importance than the H1, and is shown in the search results, so we can optimize the H1 more for SEO, and write the title meta tag in such a way that it is more intended to capture the attention of a human in the SERP, varying the wording on the same keywords. As a curiosity, if you don’t have a title meta tag on your website or if it contains some HTML syntax error, it is possible that the H1 will end up showing up as the title of the page in Google’s search results.

What is the H2 tag (and what is not)

The H2 tag is an element similar to the H1, which indicates titles of importance for subsections of the current web document. By its nature, there can be several H2 in a site, indicating the different titles of importance of the page in which we are.

We should not confuse the H2 with tools to place titles in the areas of our page: “Latest news“, “Contact me“, “User zone“, “Friend pages“, “Welcome to my website“… are generic titles for blocks of a website, but they have nothing to contribute to the content. This type of titles should be standard HTML tags with the desired CSS style, but they should not be H2 headlines, as header tags are not a style tool even though they have often been relegated to this use. In addition, to use H2 headlines like this it is very probable that they were the same from one page to another of the site, and as it happened with H1 it is vital that they are different, adapted to the content of each document.

The H2 headings mark the different sections of a text, the titles of the nodes accessible from a list of elements, and so on. Your text must meet the same guidelines as those given for the H1, but your keywords must refer to the text just below, or on the page they link to. There is no specific number of H2 elements that can be placed on a page, but the content must be the one that marks this requirement. Between 2 and 8 H2 headings are the most appropriate, although they may not appear or be presented in a greater number if the length of the text requires it.

What are the tags H3, H4…

The H3 tags onwards allow us to define subsection titles of a block headed with an H2 . Its impact on SEO is more limited, and therefore it is not usual or recommended to work the headlines from H4.

The logical order of the headlines should be that the H1 headline appears first, then all H2 and then all H3. It is also usual to work with H1, H2 and H3 as chapter titles, paragraphs and epigraphs, so that the H1 headline appears first, then an H2 with its subsections marked with H3, then another H2 and its subsections, and so on.

Removing all the remaining elements from your website and leaving only the headlines should in most cases give an idea of the content of your page, just as an index does in a book: header tags should describe the structure of the article.

The relationship between headlines and text must be in reasonable proportion: trying to use more account headings is not an advantage, but an error that will cause the importance we try to give to our keywords to end up completely ignored.

Styling the headlines

You can use CSS to define text sizes and style. Anyway, think that SEO is ultimately about trying to improve our search engine results, and search engines want to offer the best user experience and quality content. That is to say, you can modify the CSS properties in a logical way, but you shouldn’t make for example an excessively small H1 with respect to the content text, or the search engines will perceive that something strange you try to do. Similarly, the size hierarchy between H1, H2 and the other headlines should follow a certain logic.

Within the headlines it is technically possible to include other style elements, such as spans and other tags that allow us to modify how the content of another tag ultimately looks. However, as a general rule, if we can keep the content of the H label only as a text without additives, it will be more effective. It is possible to apply styles, and preferably classes, to the holder’s label without problems.

Google does not currently recognize text in images, so making your H1 an imageis not a good idea at all. If you have no choice but to use images, think again if you can’t really do it in text. If you still decide to use images for a headline, make sure that this image has an alternative text. If that headline is linked, you should also add the Title attribute to the A tag to indicate its content.

Another option to incorporate an image to a headline is to place the background image of the H1, and incorporate a padding to this label that makes the text out of the viewing area. It is something that works visually, but again I insist that it is not at all advisable to risk with these tactics in the most important element of our document.