HTML header tags, more commonly known as <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags, make it easier for people and search engines alike to get a quick understanding of what a page is about. On top of that, they can also indirectly influence how high your pages are ranked on the SERPs.
And because their importance in search engine optimization and user experience is so significant, it’s vital to know exactly what they are, why they’re important, plus how to use them properly for increased benefits.
So, if you have any confusion about the topic, this post aims to answer the most common questions surrounding HTML header tags.
What is a header tag
Header tags define a page’s main header (<h1>) as well as the sub-headers (<h2>-<h6>) of various content sections.
From the perspective of both people and search engines, these tags are used as summarizing text that gives readers and crawlers the gist of the content by concisely conveying its main message.
The World Wide Web Consortium defines six levels of section headings in HTML, with <h1> being the most important and <h6> being the least important one:
Let me show you exactly what I mean.
At SE Ranking, we publish our content using WordPress. But regardless of whether you create content in Google Docs, WordPress, or another service, the header options are always available:
Now, if we take a closer look at one of my previously published posts, you’ll see that I’ve pointed out its first two headers:
Sure, you might think that I simply increased the font, emboldened the text or changed its color. Although that may be the case, it’s a little bit more complicated than that.
When we take a look at the page’s source code, we can see that these headers are actually marked with the <h1> and <h2> tags respectively:
There you have it! Now that we’ve covered what HTML header tags are, let’s focus on the ‘why’.
Why do you need to use headings
Header tags provide web pages with two huge benefits: clearness and hierarchy.
In turn, this makes it easier for search engines to understand a page’s main topic and structure — Bing confirmed it does while Google isn’t as transparent — and enables people to quickly run an eye over the content to figure out whether it’s what they’re looking for.
But these aren’t the only reasons why you should be using headings. In fact, the advantages of using them can be broken down into several categories. Let’s take a closer look at each one.
Header tags provide keyword placement opportunities
To make the topic of web pages extra clear for people and search engines alike, use the search terms your customers use to find you online to increase your chances of coming up in search.
For this reason, I included the words “SEO” and “HTML header tags” in this post’s main header, and strongly suggest you add the target search query, or its synonyms, to your content’s <h1> and other heading tags too.
But do keep in mind that stuffing your tags with keywords is a thing of the past — aim to create content that feels natural and organic to the user, and, in turn, Google will notice this.
Logical hierarchy helps earn the Featured Snippet
To become a candidate for the Google Snippet, you need to already be ranking on page one (no biggie) and optimize your HTML code, so that Google can understand your page and display a part of its content in the snippet.
For example, “best razors for men” is a type of question that is best put in a list-style blog post. Such pages are usually structured with one <h1> tag followed by a list of items wrapped in an <h2> tag. Or you can have an <h2> tag follow the <h1> tag, and only then have a list of items marked with the <h3> tag.
This makes it very clear to Google exactly what the page is about. Sure, you can use a bullet list instead, but for SEO success, it is advised to use header tags, particularly if you’re writing longer pieces of content.
Header tags enhance user experience
Header tags improve your content’s readability and make it easier for people to digest. As a result, they can boost your page rankings, as Google’s focus on what users want is taking central stage.
With 43% of people saying they skim through content to see if it contains the info they’re looking for, it’s essential to provide them with signposts, such as headers. Moreover, headers can help readers keep track of where they are in case they forget where they were reading. This can result in people staying on your page for longer periods of time, and what’s good for the reader is positively recognized by Google.
Now, this is where having orderly, honest, well-phrased header tags can clearly communicate the content’s structure to readers and, hopefully, entice them to keep reading or even take action.
So just ask yourself this: Would anybody read your content if you just publish a post that looks like a solid wall of text?
Of course not. They would bounce from your page like a rubber ball.
Header tags improve accessibility
The structure of HTML headers is also crucial for user accessibility. In the classical sense, we think of it as helping people with visual impairment read digital content, but it also benefits mobile users, as well as people with slow internet connections.
Now, since header tags are written out in HTML, screen reader assistive technology can interpret the structure of any web page and read it out loud to disabled users, as shown below:
As they listen to the content’s headings, they are able to decide if the page offers what they need. Plus, screen readers provide shortcuts that allow users to easily move between headers, facilitating navigation. For this reason, it’s key to observe header hierarchy: always start with <h1>, then use <h2> and so on. Otherwise, screen reader users will get confused and will be going back and forth to find the next logical header, or even leave the page altogether.
Keep in mind that as a general rule of thumb, if it’s good for user accessibility, chances are it’s good for search engine optimization too (Am I starting to sound like a broken record?😊). This leads me to the final benefit.
Header tags help with SEO
In 2009, former Googler Matt Cutts stated that “Whenever we rank things, we use things in the title, things in the URL, even things that are really highlighted, like <h2> tags and stuff like that.”
However, during a recent Google Webmaster Hangout session, John Mueller confirmed that Google does use H tags to better understand the structure of the text on a page, but your site can do perfectly fine without any h1 tags or with five h1 tags.
What we can take from this info is that the presence of HTML header tags can indeed impact a page’s SERP rankings to a certain degree.
That is, having a clear and proper page structure can help Google understand when it’s relevant to display a page in response to a searcher’s query, plus it makes the page eligible for many special features in search, such as decorated results, review stars, and more.
Now, although it is commonly accepted that header tags don’t have a significant direct impact on SEO, the use of HTML header tags does help produce quality content with good readability. And, as was mentioned in the previous sections, the better the text is from the user’s perspective, the better it is for SEO.
And isn’t that the end goal?
Best practices for using header tags
Knowing the ‘what’ and ‘why’ of header tags, let’s now look at the ‘how’.
So far we’ve settled that search engines are all about making it easy for people to look for and find the right content online. This means that in order to stand a chance of having high SEO rankings, you can’t afford not to optimize your HTML header tags.
Here are some of the SEO best practices for creating effective HTML headers in your content.
Focus on the <h1> tag
Right off the bat, I want to say that even though you can get ranked organically without using H tags, doing so is a huge wasted opportunity that will result in you having an incomplete SEO profile.
Now, since the <h1> header tag is meant to clearly describe the content that’s present on a page, it must be:
- Directly related to it;
- Written concisely, naturally and organically;
- Unique across the site;
- Put outside images because search engines have a hard time understanding them;
- Used once per page, although John Mueller claims otherwise:
While having more than one <h1> tag is not officially a problem, there are two ways Google can go about this scenario. The search giant will either give:
- More weight to the first <h1> tag (BTW, Bing confirmed it does);
- Equal weight to every <h1> tag on a page, resulting in their overall diminished value.
Taking into account the fact that HTML5 allows pages to have more than one <h1> header tag, but internet browsers decided not to adopt this recommendation and, therefore, support was dropped — I’d advise you stick to using a single <h1> tag for SEO purposes.
Additionally, it must be noted that it is very common to see content creators just repeat the title tag where the <h1> tag should be, which is a big wasted opportunity. So, make sure you have both of them in place and that they’re different, as the title tag’s goal is to entice people to click-through to the page from the SERPs, while the <h1> tag acts as the main headline for the page when the reader lands on it.
Proper use of <h2>-<h6> tags
The use of <h2>-<h6> header tags purely depends on the content’s complexity.
It’s common to use <h2> and <h3> tags, while <h4> is rarely used, not to mention <h5> and <h6> tags. Sure, it makes sense to use them in long texts with complicated structures, like technical and legal documents, but the latter are often converted into PDF files, and aren’t used on HTML pages.
Anyway, here are the best practices for the proper use of <h2>-<h6> header tags:
- Use as many <h2> header tags as you need to mark the different content sections of a page. It’s common to have an <h2> tag every 200-500 words to let the text breathe;
- Keep them relevant to the topic and natural;
- Don’t spill all the beans in the header tags, but use them to spark reader interest, so they are curious enough to read the next content section;
- Maintain header hierarchy and don’t skip levels;
- Don’t just use CSS to make headers stand out;
- Optimize all HTML headers for featured snippets almost as if they are a collection of FAQs;
- Update H tags when updating content to make it easier for search engines to notice changes.
I do, however, want to emphasize that while <h2>-<h6> header tags are great for helping organize long-form content, such as table of contents, case studies, and ebooks, including keywords in them isn’t an absolute must — and here’s why.
Ever since Google rolled out the Hummingbird search algorithm, crawlers have been able to grasp a text’s overall semantic meaning and the user intent.
As a result, the value of a page for internet surfers now isn’t only measured by the keywords used (keyword stuffing was never a good thing). Instead, a number of various on-page elements, such as keywords, headers, images, and structure are looked at in their entirety. On top of that, Google also considers synonyms, contextual definitions, and the use of language.
All in all, we can say that a page’s SERP ranking now heavily relies on a combination of the content’s relevance, quality, structure, and user experience. The good news is that this enables content creators to produce natural, organic texts that aren’t all about inserting keywords wherever possible.
Verifying your headings
Let’s assume you’ve gone through all of the H tags you have on your site and optimized them (usually, it takes a lot of time to do it manually). How can you check to make sure all of the work you put into it wasn’t in vain?
Inspecting an HTML Element
When using the Google Chrome or Safari browsers, right-click on an element, and choose “Inspect” and “Inspect Element” respectively.
This will open up a panel that will allow you to view both HTML and CSS info for the selected element. Just look to see if it has and <h*> tag anywhere around it.
Analyzing the Source Code
When using the Google Chrome and Safari browsers, right-click an HTML page and select “View Page Source” or “Show Page Source” respectively.
In the window or panel that opens up, use CTRL+F and ⌘ Cmd+F respectively to enter the H tag you’re looking for. If it’s not there, you know the drill — back to the drawing board.
Checking headers in WordPress
With most of the websites that exist today using WordPress, chances are you’re employing it too for all your publishing needs.
So, in order to make sure your header tags are all in place as intended, all you have to do is click the three-dotted menu in the top right-hand corner, and switch from the Visual Editor to the Code Editor to view the page’s HTML code, as shown below:
Run an in-depth SEO audit
Retro-checking your site’s header tags manually seems like an impossible, never-ending task, especially if you’re website’s been around for a while and even more so if it contains an active blog. Luckily, there are a number of tools out there that can perform this task automatically.
Let’s take a look at what each one of them can do to help you optimize your HTML header tags.
Besides being able to pinpoint and quickly identify website errors, the Website Audit tool also generates a list of suggestions that can help developers, content creators, and web designers do their job accurately.
You’re welcome to take advantage of the free trial to try out all of its features. (BTW, noticed how the Website Audit section is marked with the <h4> tag due to the complex structure?🤓)
Now, as you scroll through the audit report, you’ll see a detailed breakdown of everything that’s right and wrong with your website, including header tags.
Find out if your site has any pages without or with an <h1> or <h2> header tag, and look through their status. You can also click on the Link icon next to an issue to get a list of pages with the same problem.
On top of that, you can monitor extreme cases of header tag use. Since the default limit set on the length of the <h1> and <h2> tags is 60 characters, you can easily change it if you’re getting good results with longer or shorter headers. That way, the audit won’t see it as an error if your tags go above or below the 60-character limit.
Then, once you address all standing issues, go to the Crawled Pages tab to analyze your headers solely with regard to their meaning and readability, without any distractions — either directly in the platform or by exporting an XLS file, as shown below:
You will still have to implement the changes manually, but finding them will no longer be a painstaking task. And the best part is that once you optimize your header tags with Website Audit, it will be much easier to find and optimize new issue the second time around.
On-Page SEO Checker
An ever-so-useful bonus feature to the Website Audit tool is SE Ranking’s very own On-Page SEO Checker. As the name suggests, it can audit a specific web page against the target search query, and provide deep insights via a comprehensive analysis.
Besides providing more detailed data on the same parameters as the Website Audit tool, the On-Page SEO Checker has separate sections devoted to keyword density, popularity on social media, and, of course, HTML header tags.
So, if you’ve just published a new piece of content or a new page, you can analyze it and up to 2,000 other pages for free each month using the On-Page SEO Checker. That way, you can rest assured knowing that you won’t miss a great opportunity to polish off your page for improved SEO success.
The proper use of HTML header tags helps enhance the experience of your readers, improves your content’s readability and accessibility, plus it can even have an impact on your SEO. So, make sure to add HTML header tags to your content. As you can see from our blog, we use them all the time. However, remember to follow best practices for maximum effect.
If you plan on doing all the work manually (I strongly suggest you don’t), use specialized tools to avoid spending hours on tasks that can be automated.
I hope this post will be a reference point to you for implementing header tags and following SEO best practices. Do let me know if I missed anything, or if you had a different experience with header tags!