Learn why you should only use H1 elements/tags once per page on your website, for optimal SEO.
One of the first things a web developer or designer learns about is the six-levels of HTML5’s heading elements, from H1 to H6.
As a beginner, you’re told that H1 is the most important element and that you should use it for main titles, headlines — the most important stuff. You then work your way down from there and use H2, H3, H4, etc. as your content’s subheadings.
I’ve noticed that a lot of beginners are using H1 tags multiple times on the same page. I assume this is because they consider more than one text element on that page to be important. This is a problem though.
The search engines automatically assume that whatever content is wrapped inside H1 tags is your content’s headline (main topic). This is important because when you search for something on the SERPs (Search Engine Results Pages) what shows up when you hit enter is:
- Title
- Meta description
- URL
If you’re using H1 multiple times per page you’re watering down your priorities on each page. How do the search engines know which H1 heading to pick when they display search results to the searcher? By default, the search engines will usually pick from top to bottom — but that’s not guaranteed, as numerous factors can affect how they index and display your content.
The search engines use your H1 headings to determine what’s the most important topic on each page, but if you’re telling them that everything is important, then nothing is important.
A classic example of overusing H1 is on portfolios where the creator has a grid item gallery on the front page that displays their list of projects.
At first, it makes sense to use H1 for your project titles for your grid items, since each project leads to an individual URL that describes that project.
This is incorrect SEO.
This is the correct way to do it:
- On the front page where you display your grid list of client projects, you should either use H2, H3, or H4 for your grid item titles.
- On the page for each project, you should have your project title wrapped inside H1 (
<h1></h1>) tags. One H1 element per project page.
You can use as many H2, H3, H4, etc. on each page as you want, so pick one of those 3 heading tags to wrap around your grid item titles.
Why H2, H3 or H4? Does it matter which? I don’t think so. I’ve noticed that most of the top websites (in terms of ranking) use either of those 3 headings. I haven’t found any evidence that H2 is better than H3 or h4.
As a reference:
- css-tricks.com and Scotch.io uses H2
- Medium.com and sidebar.io uses H3
You should consider that headings are not only used to tell search engines how your content is organized, but also to visually tell the user about the hierarchy of your content.
Which heading element you use to display your grid item titles, could simply be determined by the type scale (list of font-sizes) you use for your website. So if your H3 is set to font-size: 1.5rem; and that font-size works great for your grid item titles, then use that.
