I write this article in all humility, simply to share with you research that I had to carry out within the framework of various projects and the conclusions that could be drawn from it.
This is a recurring problem, especially with blogs: how much H1 should you put in a web page?
What is an H1?
That’s the basics, a little background. H headings, also called level 1 headings, section headings or section headings (I’ll use the latter name, as it seems less ambiguous to me) are coded with tags< h1> to <h6> . the< h1> represents the most important title. the< h6> represents the least important title.
Example
<h1> Here is the section title< /h1>
<h2> Here is the subsection title< /h2>
<h3> Here is the sub-sub-section title< /h3>
Section heading levels should form a continuous progression. Thus, it is possible to pass from the level <h1> at the level <h2>, level <h2> at the level <h3> And so on. When going from a higher level to a lower level, level skipping is to be avoided (for example, going directly from the level< h1> to the one< h3> ). On the other hand, it is possible to chain a level< h2> after a level< h4> .
How do we use this in a page?
Let’s start with these premises:
- Typically, on a homepage, the H1 is the “site title”, the client’s logo, etc.
- In principle, on a content page, the H1 must be unique and designate the “title of the page”.
- In principle, on a blog, the titles of the articles listed should be H2s since there are several.
But is it all true?
Section titles
Contrary to popular belief, beacons< H> are not page titles, but rather section titles (headings). The title of the page (title) is found in the head of the document, period. Knowing this, there can actually be more than one H1 in a page. It is not required and most of the time there will probably be only one H1 in the page. But, by definition, there can be several! I also recommend this article from Alsacréations .
To unravel all this, let’s think of a text document (Word, OpenOffice). Styles are managed somewhat the same way: the document first has a “title”, then a list of styles consisting of “Heading 1”, “Heading 2”, “Heading 3”, etc. As in a text document, you can put more than one Heading 1 on the page, but it must be consistent.
From an SEO point of view
This is where it gets harder.
The H1 would be one of the most discussed and controversial topics in terms of SEO optimization. Many questions can be answered in this article (which is unfortunately almost 2 years old): H1 and SEO – Myths and Facts .
Because if we consider this example:
<h1> Keywords< /h1> (Main)
<h1> Keywords< /h1> (Secondaries)
<h1> Keywords< /h1> (Secondaries)
And this other example:
<h1> Keywords< /h1> (Main)
<h2> Keywords< /h2> (Secondaries)
<h3> Keywords< /h3> (Tertiary)
Example 2 makes more sense, example 1 will probably be considered Spam. So we should have only one H1 per page? Not so fast…
What about this example?
<h1> Title of a blog post< /h1> (Similar importance)
<h1> Title of a blog post< /h1> (Similar importance)
<h1> Title of a blog post< /h1> (Similar importance)
Thus, WordPress assigns H1s to all listed post titles by default. And that makes sense!
Ok, but will multiple H1s in the same page hurt SEO?
The answer is: probably not . As this article from Pitstop Media mentions, multiple H1s are acceptable from an SEO point of view, if they are used logically and there is a valid reason for their multiple presence. And if you’re still skeptical, check out this short video from Google Webspam Manager Matt Cutts that debunks that belief.
On the other hand, the misuse of several H1 in the same page remains a risk to be reported as Spam. For example, the use of two H1s one of which is< h1 id=”logo”><span> logo.png< /span></h1> would seem quite problematic for Google, as presented in this specific case . Does the issue stem from the presence of two H1s, H1 markup for a logo, or Span child tags?
Nevertheless, neighbor Bing recommends that each page contain a unique H1.
From an accessibility point of view
It gets even more complicated when you add the notion of accessibility (I’m mainly focusing on the SGQRI-008 of the Government of Quebec).
What is the role of H in accessibility?
H headings are extremely important landmarks for someone with a visual impairment or motor limitation who wants to navigate the page without using the mouse. This person can therefore understand the overall organization of the page and browse it using the headings forming this “table of contents”.
What does SGQRI-008 say about the number of H’s in a page?
Basically, at least one top-level section heading that reflects the nature or function of the content on the page should be present.
I emphasize the “at least”. There must therefore be one, but it is implied that there may be several.
The main thing is that the section titles constitute a logical hierarchical structure with:
- one or more first-level section titles (encoded using the tag< h1> );
- second-level section titles to mark the beginning of large sections (coded using the tag< h2> );
- third-level section titles for the start of subsections (encoded using the tag< h3> ).
If the Web page is long and complex, then the fourth, fifth and sixth level section titles are used (coded respectively by means of the tags <h4>, <h5> and <h6>).
Ultimately, the H’s are used for content structuring, ease of reading, page accessibility, and SEO. We knew that we had to respect the order of the titles for the rendering to be optimal (not to go from H2 to H4, without H3). In the end, H’s are used for hierarchy and a page will most of the time have a single H1 which will be predominant. But there are exceptions, such as blogs.
In conclusion
Using multiple H1s is possible and wouldn’t cause SEO issues as such (unless stuffing them with keywords), but most of the time it’s not necessary to use multiple H1s. H1 on a page.
Titles are important. They should be used for titling only. Do not use them to make text appear LARGER or bolder . Search engines use H to index the structure and content of your pages.
All the more reason, using multiple H1s shouldn’t affect SEO because HTML5 uses strong sectionning elements.