HTML Heading Tags: How To Rank #1 On Google

HTML Heading Tags Best Practices For Audience And Search Engine Optimization

Published Under: SEO | Content Marketing
Last Updated: April 04, 2020
Tweet Share

HTML Heading Tags are an important part of On-Site SEO. Google algorithms consider HTML Heading Tags along with content to understand the structure, subject matter and the purpose of your content. If you want to learn about HTML Heading Tags or want to optimize your content using them, this article will explain all the basics and best practices for 2020

Asad Butt

HTML Heading Tags

<h1> <h2> <h3> <h4> <h5> <h6>

In an HTML document or webpage, a heading is used to introduce the content which follows.

Heading tags have a top-down hierarchy from h1 to h6

HTML defines six levels for headings.

h1 is used to define the most important heading.

h6 is used to define the least important headings.

“There are six levels of headings in HTML with H1 as the most important and H6 as the least.” W3C
- Tweet This


Html H1

H1 is used to define the most important heading or the main heading for a peice of content. If you have multiple sections, you can use h2 headings for those sections.

It is recommended that heading should be used for the the heading purpose only. To make text BIG or bold, use css styles instead.

Most browsers display the h1 element with using default values:

h1 {
  font-weight: bold;
  display: block;
  margin-right: 0;
  margin-top: 0.67em;      
  font-size: 2em;
  margin-bottom: 0.67em;
  margin-left: 0;            
}

Custome H1 styles can be achived by using style attribute and css values.

<h1 style="font-size:30px;">This is Heading 1</h1>

Why HTML Heading Tags

John Mueller, Webmaster Trends Analyst at Google, says:

QUOTE: 'We do use H tags to understand the structure of the text on a page better'
- Tweet This

As the above quote states, HTML heading tags can affect your page rankings, both directly and indirectly.

Direct:

Google uses Headings to understand and make sense of our content. If a good structure is in place, It will help Google understand your content better.

If Google has a better understanding, It will match your content with the search phrases put in Google Search Engine by its visitors.

Helping Google is helping yourself, rank in Google.

InDirect:

  • HTML Heading tags create a better experience for your readers. -
  • Headings introduce your content to your readers.
  • Headings also help your readers locate what they are looking (skimming).-
  • Meaningful and honest headings help readers stay on a page (better dwelled time) and stay on your website by visiting other pages(better bounce rate).

As Google is shifting towards user experience, this can help your page rank better.

Here is another advice from John Mueller.

QUOTE: "High-quality websites provide clear and satisfying information for their purpose. YMYL websites demand a high degree of trust and need satisfying website information."
- Tweet This

How To Use HTML Headings

  • Use them as necessary.
  • Do complete research and use the right keywords.
  • Do not, Do not, Do not do "keyword stuffing". It's a complete waste of time as of 2020.
  • Keep them relevant to your content.
  • keep them natural where possible.

14 HTML Heading Best Practices

  1. There is no proven rule for the length of an html heading.
  2. There is no proven rule for the optimal number of html headings.
  3. Always find the right compromise keywords and honest html headings.
  4. Relevancy is crucial between an html heading and content that follows.
  5. Use variations for an html heading. Do not stuff your headings with the same keywords.
  6. When updating content, consider updating heading H1 and any other heading tags, H2, H3.
  7. Do not force things in any way. Keep it natural. Readability is crucial for High Quality content.
  8. If content does not allow hierarchy, do not force it. You can do well without it.
  9. Research keywords well. Try to find high searched phrases which best describe your content, but use them wisely.
  10. Always use html heading H1 (Title) unless you have a good reason not to do so. Use it only once and if possible at the very start of the content.
  11. Avoid using BOLD if possible. Use heading tags for all headings.
  12. Always "Order" heading tags properly.
  13. Do not confuse both readers and search engines by skipping levels.
  14. Use styles (CSS) to overwrite default behaviors for heading tags but always maintain order and level.

How To Test HTML Headings

There are several ways you can test your Html Heading Tags

By using View HTML Source Code:

Using the Google Chrome browser, right-click on an HTML page and select "View Page Source" (for IE - View Source).

In the window that opens use CTRL + F and type HTML header tag you are looking for "h1" - "h6".

By using Inspect an HTML Element:

Using the Google Chrome browser, right click on an element, and choose "Inspect". This will open a side panel and you will be able to view both HTML and the CSS for that element.

By using Tools:

There are many tools in the market but most prominent ones are:

There is very small Title Tag Preview tool which I often use to check how my Title headings will appear in Google Search result: Title Tag Preview Tool


At Quoracreative, we provide an SEO Audit Service where we can analyze and fix your headings (as part of a package) for a fixed price.


Optimization Tools

Website Auditor by Link-Assistant

Website Auditor provides In-depth site auditing, On-page analysis & optimization in just one application.

Embedded content: https://www.link-assistant.com/images/news/html-meta-tags-for-seo/screen-02.png

To check on your titles, open your WebSite Auditor's project or create a new one, go to Content Analysis > Page Audit > Content optimization, and analyze the Title section.

Keyword Density Checker by smallseotools

Keyword Density Checker will help you analyze the keyword density of a web page.

Enter your text or web page URL, and the tool will analyze the density of the keywords for your text.

This tool is particularly helpful when you want to analyze the appearance of keywords in:

  • Html Headings (H1 - H6)
  • HTML Title
  • General content

Embedded content: https://images.ctfassets.net/ippn1588phuu/6pWCW7fynKSsQIeYQKY8g6/1c85db23296857161b9bb15018d95c30/keyword_density_checker_quoracreative.png

Order for HTML Heading Tags

"Heading hierarchy works the same way on the web as it does in print. Web users are generally in a hurry so they look for headings to see if they want to stop and take the time to read the whole web page. Web users also skim in search of what they specifically are looking for. Having a heading hierarchy will help them find what it is they are looking for".
- Tweet This

Heading Hierarchy | webpagemistakes.ca

Embedded content: https://www.youtube.com/watch?v=iR5itZlq8sk

Does the order of heading elements matter?

We have six HTML heading tags because they represent six levels of section headings.

All heading tags should be used according to the level they were intended for.

Read: The HTML Heading Tags | Mozilla

Following is the pattern I personally use to structure my content and it is recommended by W3C.

It does the Job pretty well.

<h1> Types And Correct Use Of Heading Tags for SEO <h1>

  <h2> Types  Heading Tags <h2>
     <p>Here is some text</p>
     <p>Here is some text</p>
     
  <h2>Correct Use of Heading ags</h2>
    <h3>For SEO purpose</h3>
      <p>Here is some text</p>
      <p>Here is some text</p>
      
    <h3>For User Experience</h3>
      <p>Here is some text</p> 
      
      <h4>For User Experience</h3>
         <p>Here is some text</p> 
      
 <h2> Summary <h2>
   <p>Here is some text</p>

As a matter of user experience, adopting a practice of structuring your content is crucial for your content marketing success.

  • Use heading tags for sections and subsection rather than using Bold if possible
  • Use Heading tag H1 tag only once as your content TITLE
  • Feel free to Use H2, H3 tags where necessary.
  • Use__H2__ tag to highlight subsections for H1 Heading tag
  • Use H3 tag to highlight Subsection of H2 Heading tag
  • Keep things and hierarchy natural.

Here is another good resource to learn about HTML heading tags: HTML H1 to H6 Tags

QUOTE: "You can use them all, or none at all. You can use as many as you want. You do not need to use all six HTML elements to structure your pages. Google ESPECIALLY is used to broken HTML on the web."
- Tweet This

Shaun Anderson | Hobo-web

How Many HTML Heading Elements?

QUOTE: “Yeah I wouldn’t worry about it we handle h1s and h2s very well but don’t make your entire page h1 or h2”
- Tweet This

Matt Cutts, Google

You should use as many as necessary.

There is no magic number.

If you have a page with thin content (and thin content doesn't necessarily mean a bad thing), you probably will need a few.

If you have a page with 2000 words or more, It is better to use more than a few correct HTML heading tags to help your readers find what they are looking for.

You do not need to use all HTML heading tags to structure your content. Heading H1 to H3 can do a good job for you.

I rarely use H4.

QUOTE: "You can use as many H1 heading tags as you want on a single webpage":
- Tweet This

John Mueller, Google

Keywords And Heading Tags

What are the best practices to use keywords in HTML heading tags?

There is no definite answer to that.

Because, there are no official guidelines from Google or any Search Engine.

But we know from experience, using keywords in heading tags have an influence on algorithms when they try to make sense of your content.

But headings are only one of over 200 factors Google is using.

Overstuffing your headings with keywords and then not adding any value in the content is most probably going to get your content marked down.

The simple and right way of doing this is to keep it natural.

If your content has a purpose, you will know what it is about. Try to be honest about it.

One thing that you should do though, from SEO perspective is the research for the right "search" terms by using keyword analysis tools to see what are the best terms which not only describe your content best possible phrases but are also being queried on Google. (User intent)

All human minds are different.

All human minds translate their thoughts differently into the language.

You need to research the best combination keywords people are searching for, that best relate to your content.

There is a lot of content out there which performs very well without any use of Heading tags, which suggests, headings are not always compulsory.

What we are saying is: Don't put the cart before the horse

User Experience

The main target for our content is human beings for the foreseeable future at least.

Use of relevant, well explanatory heading tags, in the right order, enhances user experience.

Also, remember that a need for HTML headings vary from content to content.

Thin content, will need a very few headings.

Detailed content will need to be divided into proper sections and subsections and labeled well for better understanding and user experience.

These days, users decide within seconds if the content is of any use to them by skimming quickly through headings and sub-headings and looking for the right words.

I always use H1, the heading tag for my content. When I divide my content into sections and subsections, I use H2 and H3 accordingly.

Use only one H1 tag for your content but you may use as many H2 and H3 as necessary.

Focus on keeping headings in balance. Use only what is necessary to add to user experience.

Never overdo it so you don't get marked down by algorithms.

QUOTE: “…so these heading tags in HTML help us to understand the structure of the page but it’s not that you have any kind of a fantastic ranking bonus by having text in an h2 tags …. sometimes we will see sites trying to abuse that and they put their whole content into an h1 tag and say well this is like really really important text and you should treat it with high value and we do use a to understand that the context of a page better to understand the structure of the text on the page but it’s not the case that you would like automatically rank one or two steps higher just by using a heading so I’d recommend using it to give a semantic structure to the page but I wouldn’t say that this is a requirement for ranking properly in search”
- Tweet This

John Mueller, Google

Heading Tags And Google Algorithms

How many HTML Heading H1 tags should be on each page?

As a matter of fact and experience, you definitely need at least one H1 Heading.

The heading is an introduction for your webpage.

Webpage without an introduction is like a book without a title.

Not highlighting your content with an H1 heading can make your visitors leave without fully understanding what you have to offer.

Always use H1 Heading for your webpage

Also, if you will not include H1 heading tag in your webpage, you will leave it in the hands of Google to skim your content and bring up one itself using other HTML tags like even Description Meta Tag or even from the content itself.

This is not an ideal approach.

And only one H1 tag per page is all you need and all you should use.

More is unnecessary and confusing.

HTML heading Tags Placement

HTML defines six levels of headings.

Heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.

This is how Heading tags should be used.

Where you place this heading has no effect on SEO what so ever.

For example, You might have to use H2 heading tags to highlight paragraphs, all the way down to the last one in your content.

Place heading tags, where they are designed to be placed for.

Maintain a natural hierarchy and do not skip levels. Enhance the user experience.

<h1> Types And Correct Use Of Heading Tags for SEO <h1>    
<h2> Sub Heading 1 <h2>
 <p>Here is some text</p>
 <p>Here is some text</p>
  <h3>For User Experience</h3>    
<h2> Sub Heading 2 <h2>
  <p>Here is some text</p>
<h2> Sub Heading 3 <h2>
  <p>Here is some text</p>
<h2> Sub Heading 4 <h2>
  <p>Here is some text</p>
<h2> Sub Heading 5 <h2>
  <p>Here is some text</p>
<h2> Sub Heading 6 <h2>
  <p>Here is some text</p>    
<h2> Summary <h2>     

QUOTE: "We do give it a slight boost if we see a clear heading on a page because we can understand this page is clearly about this topic but it’s not something that I’d say you absolutely need on every page to show up in search in a lot of pages don’t use H headings at all they just mark up the content with CSS”
- Tweet This

John Mueller, Google

Title And Page URL

Should H1 heading tag match page url?

Not really. You can have a different URL and write completely different H1 heading as your page tittle.

Google is not bothered if they are different.

Google algorithms are great in figuring out a lot from the H1 Heading and title tags.

In fact, your H1 heading tag is more of a value if you compare your URL with it.

I have seen pages rank absolutely well in SERPs which has completely different H1 Heading tag than their URL.

Consider Following Example.

Embedded content: https://images.ctfassets.net/ippn1588phuu/1KwBxWDQ5KWs6YawUgYKiK/0f19dc09e0b42589fe227f91cf13c769/Untitled.png

Embedded content: https://images.ctfassets.net/ippn1588phuu/I5PcSGkBc228kaWaIIO8a/6591e153a67152eb8c5e3a5a31a92ca8/hobo2.png

One of the reasons why Title tag or H1 Heading relevancy with URL is not necessary is that to keep your content up to date you will need to keep your content relevant to the times.

The title is part of the content and you may need to update at later dates.

URL's, on the other hand, stays constant. You may create a fresh page and use 301 redirects but it's more of a hassle than just updating your content or heading tags.

Read more about How To Keep Rankings in Google With 301 Redirects

Consider an example: You have a webpage ranking high on SERPs for few years about SEO tips like say

"10 SEO mistakes to avoid in 2017".

Your research on the topic is exceptional and every year you add or update your page.

Most of your tips are evergreen. Maybe you need to add or update a few more in 2018, 2019, 2020.

What is a better approach? Write a new article which 90% copy of the old article and fight and hope for it to rank in Google?

Or update and request Google to fetch your content and stay on top of the search results?

HTML Heading Tags SEO 2020

  • Make sure you use H1 Heading
  • Always Nest headings by their level.
  • Keep most important heading has at level 1
  • Use headings with an equal or higher to begin a new section.
  • Use headings with a lower level to begin a new subsection.
  • Don't skip heading levels as that can be confusing
  • Always plan out a heading structure before composing a page.

Keep things simple. It helps both your readers and Search Engines.

Always help search engines, they will help you back with good traffic.

I always use the H1 Heading tags and in fact, spend a quite a bit of time on them.

Also, I always use only one H1 element on a page.

I use H2 elements as many times as needed for sections.

I only reach level H3 for any subsections I have in the content.

H1, H2, H3 work for me just great.

Examaple of using H1 - H2 HTML Elemement to organize Sections

page-structure-headings-intro

Examaple of using H1 - H3 HTML Elements to organize Content

page-structure-headings-2

Headings | www.w3.org

QUOTE: “We do give it a slight boost if we see a clear heading on a page because we can understand this page is clearly about this topic”
- Tweet This

John Mueller, Google

When using HTML header elements, For Search Engines, focus on how to use them to:

  • Explain the purpose of your content
  • Properly structure your content
  • Match user search with content

And,For User Experience: focus on how to use them to :

  • Tell visitors what is on offer ( Title Tag / H1 element),
  • Best inform visitors about Important sections ( H2 element )
  • Best inform visitors about Further subsections ( H3 element )

Wraping Up

Optimize Title tag H1 properly:

  • To inform users about content
  • To match with searched phrases
  • To help Search Engine understand the purpose of the content
  • To read naturally and effectively communicate the topic of the page's content.

Avoid:

  • The similarity between heading H1 tags for different pages
  • Strictly avoid vague heading H1 tags or with no relation to the content on the page.
  • Listing all keywords you can find as a title tag (Keyword stuffing)

Meet The Author


Asad Butt

Asad Likes anything creative, but mainly, developing web-applications, optmizing websites for search engine algorithms and writing about all stuff creative.

He could be reached at LinkedIn or Twitter. He is also an active contributor at stackovrflow.com

Learn more about Asad Butt

Comments

Learn More

Explore the topics further: SEO, Content Marketing

Disclaimer: Whilst we have made every effort to ensure that the information we have provided is accurate, it is not and advice. We cannot accept any responsibility or liability for any errors or omissions. Visit third party sites at your own risk. This article does not constitute legal advice