Correctly set H1, H2 and H3 tags in HTML header

H1, H2 and H3

The H1 heading tag and its little sisters are one of the most powerful tools we have at the SEO level to tell search engines what the content of our website is about. However, and although its concept is originally simple, giving them proper use is not something known to all. This post is dedicated to analyzing some of the false beliefs about these headline tags, and giving some tips to really harness their potential.

Headline tags have had a vital importance in search engine positioning since its inception, and with small variations in the weight of its influence they have been maintained over time as something that definitely must be taken care of, from the design layout phase. web to the creation of content for a portal in operation. These basic notions should 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. It is important at this point to clearly delimit the difference between website and web page: an H1 title must refer to a page of your website, and not to the website in general.

From this paragraph, several conclusions are drawn. The first of these is that if the H1 headline summarizes the content of the current page in one sentence, it does not make sense that in the same web document we have several H1s, since the summary of your site must be one. A case of misuse related to this fact is the blogs where in the list of the last posts each one of them has an H1 headline: this is not correct, and it would be appropriate for the titles to be H2 in the list (title tag of less importance that I will talk about later), and when accessing the full post, the title will be shown as an H1.

The second of the conclusions is that if it summarizes the content of a single page, your entire website must have an H1 for each of the documents, which summarizes the content of it in the most specific way possible. A case of misuse for this standard are those websites where the H1 is dedicated on all pages to the name of the company.

As a title that it is, and being SEO oriented in the background to the user, the logical thing is that your H1 headline appears the higher up the page the better, just as the title of a news item on a website would. Google gives greater importance to the content located in the first section of a web document, and it is also logical for the user 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 viewing. If we put 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 your headline, or variations of your keywords to try to rank in various related terms.

The H1 should be kept short, as the importance of the keywords contained in the headline will lose strength the longer it is. In both this tag and others (for example, the title meta tag), Google places greater importance on the first words of the phrase than on the last: make sure that your H1 begins whenever possible with the main word or keywords for that document. This may go against a more journalistic headline, but it is ideal for positioning your document. Think of the content of the tag as a phrase that contains complete information by itself to define the content of the site, and that does not need additional information.

In addition, the H1 headline will be of no use if its title does not really refer to the content of that page. Headline keywords should appear multiple times throughout the page content text.

The H1 headline may or may not match the title meta tag of the HTML document. The Title meta tag is less important than the H1, and is displayed in search results, so we can further optimize the H1 for SEO, and write the title meta tag in such a way that it is more intended to grab a human's attention in the SERPs, varying the wording on the same keywords. As a curiosity, if you do not have a title meta tag on your website or if it contains an HTML syntax error, it is possible that H1 ends up showing up as the title of the page in Google search results.

What is the H2 tag (and what is it not)?

The H2 tag is an element similar to the H1, indicating important titles for subsections of the current web document. By their nature, there can be several H2s on a site, which indicate the different important titles of the page where we are.

We should not confuse H2 with tools to place titles in the areas of our page: "Latest news", "Contact me", "User area", "Friendly pages", "Welcome to my website" ... they are generic titles for blocks of a website, but they have nothing to contribute to the content. These types of headings should be standard HTML tags with the desired CSS style, but they should not be H2 headlines, as heading tags are not a styling tool even though they have often been relegated to this use. In addition, if H2 headlines are used in this way, it is very likely that they would be the same from one page of the site to another, and as with the H1s, it is vital that they be different, adapted to the content of each document.

H2 headlines 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 H1, but your keywords must refer to the text that we find 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 headlines are the most suitable, although they may not appear or be presented in a larger number if the length of the text requires it.

What are the H3, H4... labels?

H3 tags onwards allow us to define subsection titles of a block headed with an H2. Its incidence in 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 headline H1 appears first, then all the H2s and then all the H3s. It is also common to work with H1, H2 and H3 as chapter titles, sections and epigraphs, so that the headline H1 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 of 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: the heading tags should describe the structure of the article .

The relationship between headlines and text must have a reasonable proportion: trying to use more headings than the account is not an advantage, but a mistake that will make the importance we try to give to our keywords completely ignored.

So ... How to style your headlines?

You can use CSS to define the sizes and style of the texts. Anyway, think that SEO is after all trying to improve our results in search engines, and they want to offer the best user experience and quality content. That is, you can modify the CSS properties in a logical way, but you should not make an H1 excessively small with respect to the content text, for example, or the search engines will perceive that you are trying to do something strange. Similarly, the hierarchy of sizes between H1, H2 and the rest of the 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 is finally seen. However, as a general rule of thumb, if we can keep the content of the H tag only as text without additives, it will be more effective. Yes, it is possible to apply styles, and preferably classes, to the holder's label without problems.

Google doesn't recognize text in images at the moment, so making your H1 an image is not at all a good idea. If you have no choice but to use images, think again if you really can't 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 the content of the tag.

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

Post a Comment


Featured News