Free the <h1>!
It is common belief that using multiple h1 tags in one HTML page will spoil its ranking. This is most likely rather SEO gossip than a law carved in stone by Google and other search engines. History has proven that all simple recipes for search engine optimization were either useless from the beginning or quickly became useless, when they was widely adopted. Do you remember, when everybody prayed filling the meta tag "keywords" and entire days were wasted and countless brain cells were burnt filling it in the smartest and most accurate manner? A positively fruitless, futile attempt as we know today.
Background
There is a lot of misinformation about the HTML heading elements circulating the internet. Let's shed some light on the matter.
Headings In the HTML Standard
What does the current HTML standard say about headings?
The h1–h6 elements are headings.
The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.
...
Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level.
Does the standard say anything about multiple h1 elements being bad? No! The h1 element is just a headline element that happens to be the top-level one.
Traditional Semantics Of Headlines
One thing that I learned first in university about writing scientific documents was "you cannot say A without saying B". Look at the following document outline:
- On-Page SEO
- Off-Page SEO
- Other Measures
- Social Media
H1 Versus Title
Does that mean that it is wrong to have only one h1 element in a page? No, not quite. Other document formats like DocBook or TeX structure with specific elements (for example part, chapter, section, and so on). And the document front matter, especially the title is usually rendered, when displaying the document.
The situation for HTML is different. The document front matter (that is the head element) is normally not rendered. And since the title is part of the head, it is usually not prominent in the visual representation of the document. For graphical browsers, the title used to be displayed in the window title bar but with the advent of tabbed browsing, the title is now displayed in the tab and only partly visible because of the inherent space limitations.
It is therefore common practice to mirror the document title inside the body with an h1 element, and because a document can only have one title, it is often wrong to use multiple h1 elements in one document. This is essentially a trade-off between consistency and the shortcomings of the medium.
Structuring HTML5 Documents With <section>
HTML5 has introduced the section element (and others) that does a much better job structuring documents hierarchical. Take a look at the following example of a semantically correct HTML5 document that will probably make many a self-ordained SEO expert copiously vomit:
<!DOCTYPE html>
<html>
<head>
<title>Acme Corp.</title>
</head>
<body>
<h1>Acme Corp.</h1>
<section>
<h1>Mission</h1>
<p>Free the <h1>!</p>
</section>
<section>
<h1>Staff</h1>
<section>
<h1>Tom</h1>
</section>
<section>
<h1>Dick</h1>
</section>
<section>
<h1>Harry</h1>
</section>
</section>
</body>
</html> OMG! What a mess! Isn't it? But it is blessed as correct and even recommended by the W3C, scroll down to the last code example in that section of the HTML standard! The reason to only use h1 elements is quite simple: You can freely move sections around in your document hierarchy without having to change the rank of your heading elements.
And now look at the above example in your browser. Current versions of Firefox, Google (!) Chrome, and Safari all render the document as expected, neatly structured. Do you really think that Google would penalize more than one h1 per page if the company's own browser accepts it?
h1 Is More Important Than h2?
This misapprehension is probably on of the main reasons behind the one-h1-per-page tale. The rank – i. e. the digit 1-6 in the name of heading elements – denotes the nesting level but not the importance of the element's content. This can be easily seen:
The documentation on the Mozilla Developer Network has dreamlike search engine ranking figures. Now compare the documentation of the JavaScript `Date` and the `Array` objects. Like in almost all technical (API) documentation the individual pages share the same overall structure, here the sections "Syntax", "Description", "Properties", "Methods", "Examples" and so on. But the keywords "Syntax", "Description", "Properties", "Methods", "Examples" have zero relevance for the pages' content.
One of the examples is titled "Calculating elapsed time" and the title is contained in an h3 element whereas the containing section is called Examples (contained in an h2). Guess which keywords have more relevance for search engines! It is probably not "Examples".
Conclusion
"Only one h1 element per page" is mostly an urban legend. Use section elements for structuring documents, and – emancipate yourself from mental slavery! – use heading elements according to your individual requirements and preferences! Unfortunately you will never be able read this advice because this page contains only h1 elements and all search engines have exiled it to the world wide nirvana. So sorry!
Leave a comment