Head, Heading and Header tags

Contents

  • What are Headings?
  • HTML Heading Tag Hierarchy Example:
  • <h2>heading 2 - Second most important</h2>
    • <h3>heading 3 - Third most important</h3>
    • What are Headings?

      In SEO, headings or heading tags are the keyword-infused titles that help the search engines understand the structure of your page content.

      The content and code used for your headings is important, and you need to use the correct heading tags in the right place. The H tags used for headings are H1, H2, H3, H4, H4 and H6.

      These create a heading hierarchy that helps Google and the other search engines understand the structure of your text on the page.

      HTML Heading Tag Hierarchy Example:

      <h1>heading 1 - Most important</h1>

      <h2>heading 2 - Second most important</h2>

      <h3>heading 3 - Third most important</h3>

      <h4>heading 4 - Fourth most important</h4>

      <h5>heading 5 - Fifth most important</h5>


      Headings can be keyword optimized for SEO, so they’re among the most essential page structure elements that should be performance enhanced. Typically they’re arranged from the most to the least important, with the most important acting as the largest when visually displayed.

      Difference Between <H1> and <title> tag?

      Title tags <title> on your page is how search engines see and determine if it should be displayed in their SERPs.


      The H1 tag <h1>, on thee other hand, is the HTML element for the first-level heading within the body text of the webpage.

      In most cases, H1 tags are called the second "title tag" because most people get confused when using a CMS such as WordPress, using the post title as both < title > and < h1>. However, search engines offer title tags more weight, so you'll want to use one title tag and one H1 tag per webpage.

      Here is an example of what a <title> tag, when looking at the source code of a website:

      title tag example

      Notice that the heading of this page "Page Structure and Headings" is different than the <title> tag.

      Here is the HTML code showing the actual <h1> heading tag:

      heading tag example

      Should Titles & H1 Tags Be The Same?

      Some SEO experts believe it's easier to keep the title tag and h1 tag together, and several other  recommend keeping these two tags separate.

      It's recommended that the title tag and h1 tag should be different in a way, but they both should contain the main keywords. Focus more explanatory and bit shorter title tag and a more keyword based, so that people who are searching for answers can help identify the topic and be more relevant in search engines results page. 

      Here's why

      A title tag can also include your site or brand's name:

      title tag

      And, while the actual heading of the page is called "Pages titles", you might want to change the title to be more click friendly, such as, "What is a Page title and why is it important?". You can also opt to change the whole heading to the same "What is a page title and why is it important?". 

      Creating a longer title tag can remove some text in the results page, so if your h1 tag is long, you might want to concise it. 

      If you use our example "What is a page title and why is it important?". the title tag will end up like this: "What is a page title and why is it important? - SEO Academy | SiteGuru". That's 70 characters. 

      If you rather rank for a specific question, "is a page title really that important for SEO?" in comparison to the keyword "page titles" so you can rank easier, then you can change the title tag to be more meaningful for that query. 

      The main point is to be consistent and not use the title tag to generate click baits and present a different heading, which can be misleading and can cause higher bounce rate, eventually lowering your ranking position.

      The Difference Between <Head>, <Header>, and <h1>

      We've discussed what an heading tag is. These  are six heading components: H1, H2, H3, H4, H5, and H6; H1 being the highest and H6 the lowest. But what is a <head> and a <header>?

      Head tag:

      The HTML < head > section provides general document information (metadata), including <title> and links to/definitions of scripts and style sheets. (HTML MDN)

      <!DOCTYPE HTML>
      <html>
      <head>
       <title>Page Title</title>
      </head>
      <body>
      The content of the document......
      </body>
      </html>

      Header tag:

      HTML <header> is a collection of introductory or navigational aids. It can contain sother heading <h1> to <h6> elements, but other elements such as a logo, wrapped section header, search type, etc are also located in the <header> section of the HTML.(HTML MDN)

      <article>
        <header>
          <h1>Most important heading here</h1>
          <h2>Less important heading here</h2>
          <p>Some additional information here</p>
        </header>
        <p>Lorem Ipsum dolor set amet....</p>
      </article>

      Do heading tags impact SEO?

      Header tags are what we call soft ranking factors; you may potentially have multiple H1 tags, and Google will still be okay. 

      Here’s what Google's John Mueller said about h1 tags:

      “If you have been using them properly I definitely keep them there and it’s something kind of I don’t know like a really small and soft factor when it comes to signing pages.” —John Mueller 2018

      However, if you want to follow Bing's guidelines, you need only one H1 tag.

      Google and other search engines want to see your website the way a user does, and they can make the content more user friendly, labeled, and broken so it's easily digestible. These are what you call semantic markup:

      “I think it makes sense to use semantic markup so different heading levels to better break up your content and make it a little bit easier to understand. Sometimes this helps search engines to better understand which pieces of text belong together, sometimes it also helps users to understand this a little bit better.” —John Mueller 2018

      Think about picking up a book at a bookstore, you’ll go through the table of content to understand the scope of the book before purchasing, and eventually reading the book.

      Do heading tags have to be in order?

      Google's John Mueller mentioned in one of their webmaster's hangout: 

      "The order] doesn’t really matter. We use the headings to understand the context of the content on the page a little bit better and for that, we don’t need like a strict order of the heading tags.

      Sometimes you have multiple h1 [tags], sometimes… the order is slightly different because of your template or something on your page and that’s perfectly fine.”

      How to write the perfect heading tags

      According to John Mueller, Google, the best way to write heading tags is to create a semantic structure for your site. So consider using them to give your pages a semantic structure. Basically, there are two main purposes of using perfect heading tags for each page or post. 

      1) Relevance to keywords

      2) Structure of the page for readability

      Best practices for heading tags

      To leverage heading tags to the fullest and avoid issues with user experience and search engines, consider the following dos and don’ts.

      Dos:

      1) Imagine writing an outline for your content. Where are the breakpoints? It might help to delineate each sub-point using <strong> and <em>.

      2) Always follow H1-H6 guidelines. To avoid issues, keep headings in order levels (for example, h1 to h4 ) when using header tags.

      3) Focus on maintaining a consistent heading structure across your entire site to increase content readability and provide better usability for search engines. 

      Don’ts: 

      1) Avoid using multiple H1 tags per page. You can refer to Bing Webmaster Guidelines for more information. It is ok to use multiple H1 tags to define critical features on pages but stick to one H1 tag on articles and posts. It is also ok to move all key features to H2 than linking them with H1. 

      2) Circumvent putting the same <h1> name with the <title>. For example, if your <title> is “How to make more money”, avoid using the exact words in your <h1> tag.

      3) Refrain from using lengthy headings. While there are no limits, try to stick to 10-70.Refrain using heading tags for styling. Use them to present the structure. 

      How many heading tags per page? 

      Whether your content is short or long, it is wise to focus on creating a balance of heading tags. 

      For short content, include:

      One H1 per page/post,

      Two or Three H2,

      Use H3 for linking groups within the H2 or related to sources and references.

      Long-form content

      You have the freedom to use more H2 tags as well as H3 to H6 tags based on the structure you want to provide.

      Is it ok to use keywords in your headings

      It is ok to use them to describe scenes for each section but be watchful not to become repetitive. Have a look at the example below for more information.

      Title: “Best Practices of Writing Heading Tags”

      H1: “Your heading tag SEO guide” (This explains what the purpose of this article is going to be. It’s for SEO and not a guide for click baits or conversion.)

      H2:  “What is heading tag” (Creating an informative article best practice might be to start with a definition.)

      H2: “Why is heading tag important” or “why is it important” (It is essential to add value and provide why in order to help convince your readers. Unless your focus intent is for an advanced audience, in which case you can reference case studies of how Google’s algorithm has changed regarding headings, and what they need to do now.)

      H3: “What experts have to say about heading tags” or “experts take on heading tags” or “what experts have to say” (The first H3 example, “what experts have to say,” can best be understood if they are in the H2, “Why is Heading tag important,” If instead you added “Why is it important,” you are referencing the actual title therefore, you can reiterate and help users and search engines collectively understand and reference what is going to happen next, and write “what experts have to say about heading tags”.)

      H2: “Heading tags best practices guidelines” (Reference why and how having a checklist or guide can assist you to avoid any SEO errors.)

      H3: “Thing to do,” “great heading examples,” “good example,” “Things to avoid,” or “bad heading tags example” (Whether you add keywords or not, the structure must provide clear intent.)

      H2: “How to add heading tags to WordPress.”

      H2: “Summary” or “In conclusion. “

      Conclusion

      Keep a consistent structure throughout your pages. Headings are there to create a specific type of flow for your readers. Headings are also indicators that help readers decide if they want to continue reading or look for another solution from another site.