How and When to Use the H1 Tag on Your WordPress Website

Posted on July 4, 2017 by in Tips & Tricks | 44 comments

How and When to Use the H1 Tag on Your WordPress Website

If you’ve ever done any research on search engine optimization, you’ve probably come across mentions of the H1 tag. But what is the H1 tag, where does it show up, and how should you actually use it to make your site better?

In this post, I’ll get into some best practices for using your H1 tags to improve your site’s search engine optimization and user experience.

What Is the H1 Tag And Where Does It Show Up on WordPress?

I won’t belabor this point because I’m guessing most of our readers are already at least a little bit familiar with H1 tags. But just in case you’re not, here’s a speed refresher:

Headings, of which there are a number of different options, help you organize the content on your page. H1 (short for “heading 1”) is normally the largest heading, with each subsequent heading (H2, H3, etc.) decreasing in importance.

In nearly every WordPress theme that I’ve ever looked at, the H1 tag is automatically applied to the post or page title. For example, here’s a regular Divi post:

h1 tag in divi

You can see that the title is wrapped in <h1>.

In the most basic sense, H1 tags tell both humans and search engine robots:

This is what this ENTIRE page is about.

H1 tags are not the same as the title tag that you’d set with an SEO plugin like Yoast. The title tag is what Google uses in its search results, whereas the H1 tag is strictly an on-page element.

Why and When Is It Important to Use H1 Tags?

H1 tags are important for two main reasons:

  • User experience
  • Search engine optimization (SEO)

To maximize these two areas, you should attempt to include an H1 tag on pretty much every page of your site. In fact, the vast majority of pages use an H1 tag – around 80% of first-page Google results have one.

H1 Tags Help Users Understand and Navigate Your Content

When a visitor lands on a page, they only hang around for 10-20 seconds unless the page has a “clear value proposition”.

Your H1 tag is what provides that clear value proposition and tells readers they’re at the right spot for what they’re looking for. In the words of Google itself, “Heading tags are an important website component for catching the user’s eye.”

Look at this post for an example – if you were looking for information on “how to use the H1 tag”, which page would make you more likely to stay around?

Page A: A page that just jumps straight into regular text:

Page B: A page that has a big ‘ole header like this:

large header

The answer is clearly Page B, right?

And as a second consideration, H1 tags also make your site more accessible to people using screen readers.

H1 tags aren’t just about user experience, though. They also have an effect on search engine optimization, though not as much as they once did.

H1 Tags for Search Engine Optimization

In the past, H1 tags were considered an essential element of on-page SEO. Nowadays, though? If they do still have any effect, it’s limited.

To back me up on this one, I’m going to turn to Rand Fishkin of Moz:

I’d say H1 and H2 are best practices, but they are not going to transform or massively help your rankings. They’re not very well correlated with better rankings.

In fact, Moz had trouble noticing any difference between using H1 tags and just…making the text bigger without any H1 tag.

Interestingly – Moz actually practices what they preach here. If you look at the source code of their blog, you’ll see that Moz doesn’t use an H1 tag for their blog posts, instead opting to just make their H2 tag larger using CSS:

css

But while the H1 tag may not be as essential for on-page optimization as it once was, it’s still an important factor for a couple of reasons.

First off – bounce rate. While only Google knows the true answer, the 150 SEO professionals that Moz surveyed believe in bounce rate enough to rank it the 6th most important ranking influencer. It scored 6.57 on a scale from 1 (not influential) to 10 (highly influential).

Because your H1 tag is what grabs a reader’s attention and keeps them on the page, it can play an indirect role in SEO that way.

Second – your H1 tag can help get featured snippets in the search results. More on these in a second…

How to Best Use H1 Tags for SEO and User Experience

Before we go any further, let’s clear up one thing:

Most of the time, you should only have one H1 tag per page. Google, through Matt Cutts, has waffled a bit by saying that, while one is usually best, you can have more if logically needed. Bing, on the other hand, tells you to use a single H1 tag (in case anyone cares about Bing!).

With that out of the way, here are some best practices and tips for how to use your H1 tag…

How to Add an H1 Tag to WordPress

If you’re using a well-coded WordPress theme, you shouldn’t need to ever worry about digging into the code yourself for regular posts. As I mentioned, pretty much every WordPress theme should use the H1 tag for a post or page’s title (except on archive pages).

You should double check to make sure that this is the case, though. You can use Developer Tools to check it. And in case you’re wondering, Divi does use H1 tags for post titles on single pages and H2 tags for post titles on archive pages.

Most of the time, you’ll only need to add your own H1 tag if you’re using the Divi Builder (or another page builder).

In Divi, you can add an H1 tag by using the Text module and selecting Heading 1 from the drop-down:

As for what to put in your H1 tag…

H1 Tags Are Not for Keyword Stuffing

As of 2010, Moz no longer recommends that people “use H1 tags with keywords”. In fact, they call that recommendation one of the “Biggest SEO Mistakes SEOmoz Has Ever Made”.

According to them, keywords are important for title tags, but you shouldn’t feel the need to shoehorn them into your H1 tag.

However, other SEO pros, like Brian Dean of Backlinko, do recommend including your target keyword in your H1 tag.

Basically, you’re going to find mixed answers on the subject. But in the end, I think this should be your main takeaway:

Focus on making your H1 tag accurate and helpful to human visitors. If you can do that while still including a juicy keyword, that’s great. But don’t sacrifice human helpfulness just to get a keyword in.

H1 Tags Can Help With Featured Snippets, Though

One area where your H1 tag can come into play is Google’s featured snippets. If you’re not sure what I’m talking about, it’s this unique element that Google returns for some Google search results:

featured snippets

While these results show up all over the place, one of the most common phrases you’ll see them on is “how to” queries.

According to Adobe, using an H1 tag that matches the “how to” query you want to rank for can help get you a featured snippet. Additionally, there’s chatter in the comments of this Whiteboard Friday at Moz discussing the same idea.

H1 tags are just a part of earning featured snippets, though. If you’d like a full guide to optimizing your content for featured snippets, SEMrush has a good post on the topic.

Wrapping Things Up

H1 tags are no longer the SEO must-have that they once were. But that doesn’t mean they aren’t important. They’re still the most prominent piece of text on most websites.

To that end, focus on making H1 tags descriptive of the content on the page. Your visitors should instantly understand exactly what they’ll get if they keep reading.

If you can do that while still including a keyword – great! It certainly won’t hurt your SEO, and it may even help it. But don’t feel like you need to write a cryptic title just to get your primary keyword in.

Now over to you – how do you usually try to use H1 tags on your pages?

Article thumbnail image by Pretty Vectors / shutterstock.com 

44 Comments

  1. While on the subject of H1 tag I wish you stop reducing the sie of the H1 tag as defined by the optimiser on 3 or 4 columns. It defies the concept of optimiser control of teh site.

    • YES. PLEEEEEEASE!!! I have been asking for this for 2 years now. Everytime I +1 someone else’s request for this feature, I get the reply “please submit a feature request”. Well, I have submitted 4x now.
      I still can’t believe Divi Developers came out with “Button Relationship Attributes” before they came out with a feature that simply lets us tick a box for Titles that gives us the ability to choose which Heading tags we want to use.
      I end up doing so much customization, I wonder why I’m even using the divi framework. So frustrating.

  2. Hey there Colin, neat post. Thanks to ET for all the amazing content and resources you guys share! So one question on this – I generally publish posts and pages with the H1 and the page SEO title appended with ” | CompanyName” the same (as well as the og meta title too) – i am assuming that shouldn’t have any negative SEO impacts – yes no? Thanks in advance on the response.

  3. Shame that the Divi builder only allows you to change header text size when you specify it as H1. If i add an H2 tag into a section and then try to use the builder controls to modify the size they do not work.
    This means that is you want to use the flexibility of the builder to change the ‘header’ text size you are forced to use H1 everywhere.

    • This is one of those issues that truly bugs me about Divi! If they are going to all the trouble of adding customization for text and headers, why not also provide settings for H2, H3 at least? It’s just not good practice to use H1 inside the body text. And you need H2 headings too.

      • We just specify the styling for H2, H3, etc in the CSS and then the styling for the headers is consistent across the website. That way we don’t need to style the headers in the modules every time.

    • As a designer, I have to use Divi’s h1 several times on each page for the right typographic effect. I agree we should be able to assign h2 for per-page customization…or even just h1 and h6.

    • totally agree and it’s contradictory. I have suggested this feature many times, but they never hear us, this is a must, a good practice, we do need it asap

    • I agree with this entirely.

      It is extremely difficult to follow SEO rules for headings in Divi because we can only style tags and tags within the builder. The ability to style other headings would be great. I find myself using H1 tags way more than I should be when using Divi.

    • Quite and in many Divi Builder modules h1 tags are used extensively in way which is not correct semantic markup. For each module where this is used it should have drop down as part of the titles heading design options in order to assign it to a specific heading tag

    • I agree with Paul too. The solution for me is to use a CALL TO ACTION. In the source code you´ll see that this call to action is a H2 header. Changing the size of this H2 is no problem. You can manage that in the ADVANCE DESIGN SETTING.
      Sorry, I´m not a professionell but I think that this is a way which will work.
      It´s not the best way but for me it´s ok.

    • I also agree with Paul. Our Child Themes are full of styles & media Q’s for H2 & H3 tags, these really need to be included in the builder. It would save SO much time!
      We only use the H1 title tag once per page so while it is great to include this in the builder, H2 & H3 are equally important. ET team please sort 🙂

    • Your 100% right Paul, it’s a bit frustrating as it makes many of the modules useless when it comes to titles. It would be great if they changes the code to use a H2 tag and not the H1.

    • This is one of those things where it makes no sense that they don’t fix it ASAP.

      • Nicolai, I totally agree with you. I wrote suggestions like this to their support, but the response was : No such feature is planned.

        As we can see here: Many user request that “feature” – actually beeing able to define h1, h2, h3, h4, h5, etc. in a theme is ABSOLUTELY BASIC.

        So I really do not understand why DIVI refuses to listen to their customers – this is a major flaw of this theme.

        What we do now is defining all these tags (including their respective sizes for Media Queries in our own CSS files).

        DOWNSIDE: This is not why we bought Divi …

    • I agree Paul. I hope this can be included in DIVI’s todo list.

    • Hi Paul, as a workaround, I use WP Edit plugin to give me extended fonts,formatting, font sizes and other editing tools from within the WordPress Editor. It’s literally changed my WordPress life.

  4. Great post, unfortunately divi lacks the mobile font styling features for h2, h3, h4, etc. It would also be cool if we could decide to put a h2 or h3 in a blurb title instead of the default h4 for instance

    • @Alex… Just add it in the content area of the blurb in the text editor and add your own tags. Not the best or most user-friendly option for non-designers, but it works.

  5. Having h1 correctly set up on blog/page posts is no problem. But I wish DIVI and this article could discuss how to best plave the H1 tag on the homepage.

    I generally want it to be on the logo on the homepage ? But then it needs to be removed on blog/page posts, so that those pages don’t get two h1’s.

    The homepage H1 is the problem I feel and I wish DIVI had a default h1 in place here.. thanks for advice.

  6. Hi! thanks a lot for this helpful content!

    I would like to ask you about the fullwidth header module, and how it works. I mean if its content is converted to H1 or any other heading.

    I like to use it in the top of my posts, but according to this post it seems that I should replace it by a text module?

    • The fullwidth header module does use the H1 tag for the title which is a pain if you want to use it more than once on a page. It would be great if we had the choice of H tag to use in this module for the title.

      • Thank you Joe!
        By the way, I agree with you

  7. I use H2 tags instead of H1 because I don’t like the way they look – Does that work equally as well?

    • me too Mary. Did the author mean: “in DIVI h1 is already in the title” ?? Hope that 🙂

  8. Great resource, thanks for putting this together! We’re big fans of the Divi theme, but we’ve noticed a couple of limitations when it comes to the H1 tag:

    1) Category pages do not have a H1 tag at all.

    2) The blog post page includes an additional H1 tag in addition to the title. The comments count header is an H1 tag.

    Both of these issues can’t be fixed without making changes to the code.

    Hopefully these can be addressed in a future release.

  9. Well you did leave out another important reason for the H1…H6 tags and it has to do with design. If the H1… H6 tags are defined for design purposes in the theme, then using them has a design purpose that goes beyond the SEO world can also be important… not to say that the SEO is not important, though.

  10. This is good content, but I agree with others about Divi and other H tag flexibility. One thing not mentioned about H tags is accessibility. Properly used, these tags help people using screen readers navigate and understand content. We’ve started doing a bunch of accessibility analysis and corrections. Content creators misuse WYSIWYG editors all the time because they don’t understand the Header element.

  11. I have always used H tags to structure the hierarchy of the page although I rarely drop as far as H4

    For example a Page / Post about site performance

    H1 – Title (Web Site Optimisation)
    >H2 – Sub heading Tips for Optimising page content delivery
    >>H3 – How to optimise your images
    >>H3 – How to optimise your JavaScript and CSS Files.
    >H2 – Server Side optimisation
    >>H3 – sub section

    And so forth, another few things I use is the use of Bold or Italics for highlighting content, I avoid using Multiple H1 tags like the plague, also I make sure never to have any H tags the same size as the one above it so H1 largest text on page then H2 then H3 then body content. This way the viewers eye is drawn to content naturally.

    I have a few clients using DIVI and this is my pet gripe in the way that’s been mentioned above with regards to H1 tags.

    Normally I just use Custom CSS and define the sizes / font / font weight as I want them on the page to handle Typography.

  12. This most important topic specially for SEO experts, H1 tag only single time and h2-h6 in same order but we can use multiple times.

  13. For Divi theme, I set up a global code module that calls a function that displays the page title. The function is called inside an H1 tag. This makes it easier on my users who might otherwise forget to display a title or remember to use H1.

  14. I agree with everyone here. It would be awesome if we could set up h1-h6 defaults in the typography section of the customizer. I too find myself using h1 way too much just to be able to customize it. +1 for this in future update.

  15. This is a great refresher for the use of H1 Tags in a website. Sometimes I get so involved in SEO best practices that I forget about conversion rates and readability. The comment of making sure H1 tags visually stand out more than H2 and lower tags is a good one. Thanks!

  16. Nicely Explained all about H1 tags.. Actually i even dont have much knowledge before . But now have some. 🙂

  17. Whenever I use the Divi builder I always make a separate H1 text box. Then underneath I make one that I call body text.
    This makes it easy (for clients) to login and edit page and post titles.
    I have never noticed this H tag problem that everyone is talking about.
    Although, I normally never go past an H3.
    Generally, I H2 the main headings in the post/page and then occasionally use the H3 for anything I deem important enough that I want it in an H tag but not as important as the H2.
    Anyways, Cool, and thanks for the article.

  18. Very helpful article … thanks for sharing…

  19. Good article but some adjustments are needed and I will only emphasize on this rule:

    • HTML 4, the best practice is 1 H1 tag per page. With HTML5, the rules of SEO has changed. You can have multiple H1 tags per page but for best SEO practice, it is now H1 tag per HTML5 Section.

    • The H1 tag should identify the #1 most important keyword first, that is the name of your website/company and should be placed first and foremost over any other keyword. I modify the code to display the h1 tag along with the logo but it is well hidden that you will never see it unless you turn the styles off. This is especially an important rule for someone who is visually impaired and turns the styles off to read the text appropriately.

    Divi is both setup very well and not so well for SEO but because I’m already a developer, it’s easy to modify the code up to specs, via Child Theme, to bring the best of SEO out on the sites. With the power of Divi and my SEO abilities, I have actually found great indexing from Google comparable to other sites I have managed.

  20. Is it mandatory to keep the H tags in a sequence (first h1,then h2,then h3,h4…)?

  21. Hi,

    thanks for Your article. I have read it all include the comments and have only one question. If I understand You correctly, then every page title will get automatically an H1. What is wit the first heading (Main Heading) in the text. Should this be an H2 (to have only only one H1) or should I start again with an H1?

    Kind Regards Frank (from Germany, sorry for the english)

    • I have the same question as Frank. I am using Divi/Extra but it still applies. I thought Divi made the blog post title an H1 so I should not use H1 in the actual post. When I create a new post I should start with H2 right? Thanks.

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest