SEO the Hell out of Your Heading Tags

How to use heading tags properly to boost SEO.

Heading tags confuse people.

The different heading tags (1-6) are often styled in different ways. When someone starts experimenting with their theme, they see the different styles, then associate those tags with design.

  • When they want to use the green uppercase font, they switch to <h4>.
  • When they want to use the purple lowercase italic font, they switch to <h6>.

It’s easy to associate the headings with different design choices, so I don’t blame you. You may not know any better.

But using heading tags for their design instead of what they’re intended to be used for is going to confuse the hell out of Google.

Heading tags aren’t meant to be used for their design. They’re used to create structure.

Heading tags are for organizing content on the page in a logical way. I like to compare it to outlining an essay, because that’s exactly what it is (but for a page or blog post).

Let’s go back to high school English class (ugghhh, I know, bear with me). My teachers often stressed the importance of outlining a paper before actually writing it. I never actually did this because I’m a “dive right in” kind of gal, but I still remember what they tried to teach me about outlining.

Outlining is about giving your essay structure and a clear direction. It helps you stay on point and ensure you’re discussing the right things in the right places, and in an order that makes sense.

When outlining, you might do something like this:

  • Title of Essay
    • Introduction
      • Thesis statement
      • Introduce ideas
      • Segway into first point
    • Example #1
      • Blah blah blah
      • Blah blah blah
      • Loads of important, totally non-bullshit stuff.
    • Example #2
      • Blah blah blah
      • Blah blah blah
      • Loads of important, totally non-bullshit stuff.
    • Example #3
      • Blah blah blah
      • Blah blah blah
      • Loads of important, totally non-bullshit stuff.
    • Conclusion
      • Recap three examples.
      • Discuss how they relate to thesis.
      • Really drive that thesis home.

Those bullet points? Those are your heading tags.

Heading tags are like labels for different sections of your blog post.

Each heading should be like an overview of the paragraphs to follow.

So, for example, that big heading up there ^, that’s an <h2> tag. I say headings are labels for sections, then in the paragraphs to follow (like this one), I elaborate on that point.

That’s exactly what the outline above is like. I have a “heading” called “Example #1”, then in the following bullet points I describe some stuff about that example #1. The heading is related to the content that immediately follows.

The order of headings (and their numbers) matter.

A webpage should always start with <h1> then work its way up (2-6). For an individual blog post, you should only have one <h1> tag on a page: the post title. Then, any headings within that post should start with <h2>.

You can also think of it like a book. The book title is an <h1> tag, and you obviously only have one title for the book. Then each chapter is an <h2> tag, since they’re new sections.

Look back at the outline above. Each time we indent the list, we increase the heading number. If we’ve just moved onto a new line but haven’t indented, then the number stays the same.

Confused? Here’s that same outline again, but this time with heading tags.

  • <h1>Title of Essay</h1>
    • <h2>Introduction</h2>
      • Thesis statement
      • Introduce ideas
      • Segway into first point
    • <h2>Example #1</h2>
      • Blah blah blah
      • Blah blah blah
      • Loads of important, totally non-bullshit stuff.
    • <h2>Example #2</h2>
      • Blah blah blah
      • Blah blah blah
      • Loads of important, totally non-bullshit stuff.
    • <h2>Example #3</h2>
      • Blah blah blah
      • Blah blah blah
      • Loads of important, totally non-bullshit stuff.
    • <h2>Conclusion</h2>
      • Recap three examples.
      • Discuss how they relate to thesis.
      • Really drive that thesis home.

So, theoretically, if we wanted a new sub-section under Example #3, we’d “indent”, add a new heading using <h3> (one higher than h2), then add some paragraphs below that. Like this:

  • <h1>Title of Essay</h1>
    • <h2>Example #3</h2>
      • Blah blah blah
      • Blah blah blah
      • Loads of important, totally non-bullshit stuff.
      • <h3>Case Study</h3>
        • Blah blah blah
        • Blah blah blah

Example of a real blog post.

Here’s a more practical example of a real blog post in action. I’m using my post The 6 Things You Can Do to Speed Up Your Blog as an example. Hover over each heading for more information.

  • <h1>The 6 Things You Can Do to Speed Up Your Blog</h1>
    • <h2>1) Optimize and compress your images.</h2>
      • Talk about how to compress images.
    • <h2>2) Don’t load an excessive amount of content on your page. Use excerpts!</h2>
      • Talk about why loading a lot of content isn’t a good idea.
    • <h2>3) Start caching!</h2>
      • <h3>Here’s how caching works…</h3>
        • Example: “life without caching”.
        • Example: “life with caching”.
      • <h3>How to enable caching on your site.</h3>
        • Caching built into the server is best.
        • List examples of plugins that can be used.
    • <h2>4) Use a CDN.</h2>
      • Explain what a CDN is.
      • Examples of CDN Providers.
    • <h2>5) Be careful about the plugins you use.</h2>
      • Explain why it’s about quality—not quantity.
      • Coded poorly vs feature-heavy plugin.
      • <h3>Find out how a plugin is affecting your site’s performance.</h3>
        • Questions you can ask yourself to distinguish a small plugin from a big one.
        • Use P3 plugin to analyze site.
      • <h3>Limit your use of ‘big’ plugins.</h3>
        • Reminder and recap about limiting big plugins.
    • <h2>6) Find a better web host.</h2>
      • Intro about how optimizing site is limited by your host.
      • <h3>Level up your hosting with a “Managed WordPress host”.</h3>
        • Why generic hosting isn’t the best, because it’s built for a variety of platforms.
      • <h3>How a managed WordPress host can make your site faster:</h3>
        • Bullet points about why a managed host is better.
      • <h3>A few examples of WordPress hosts</h3>
        • List examples of managed WordPress hosts.
    • <h2>Ready to test your site’s loading time?</h2>
      • Link to tools that can be used to test loading time.
      • Challenge people to get their loading time to under 3 seconds.

The only Heading 1 on the page is my post title. Everything after that is Heading 2 or larger.

Any time I want to elaborate on a Heading 2 with more sub-sections, I increment the heading (to Heading 3). If I wanted to elaborate on a Heading 3 and have sub-sub-sections, I’d increment to Heading 4, and so on.

Having a solid structure to your blog helps search engines understand it better.

Search engines have to do their best to guess your site is about. Having a good structure and layout helps a search engine do that. Proper heading usage allows them to clearly see how the post is laid out, what sections are most important, and how they relate to each other.

If you’re jumping around using all <h1> tags, then search engines will have a much harder time figuring out what the main point of your post is (the post title).

Don’t like how your headings look? Learn CSS!

If you’re like, “But Ashley! I hate how my Heading 2 tags look! Heading 1 is the best and I want to use it always!!!” then it’s time to put on your big girl pants and learn CSS (or, here’s a quick, free guide to changing heading styles).

Don’t like how Heading 2 looks? No problem. Change it. Make it look more like Heading 1 if that’s what you want.

You have the power to make those kind of design changes. Don’t stick with a structure that makes zero sense just because you like the look of it! Fix your structure, then spend a little bit of time tweaking the CSS to get the design you want.

Photo of Ashley
I'm a 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

Leave a Reply

(Enter your URL then click here to include a link to one of your blog posts.)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

25 comments

  1. Thank you for this post! I’m guilty of exactly what you mentioned here. I’m looking at my posts and contemplating some CSS changes to move the designs I use most to H2 and H3 rather than H4 and H5.

    But, I had a question about H1. I use your Tweak me theme – when I enter the post title in the “Enter Title here” box in WP Visual Editor – I don’t see any html with my Post Title in the text editor – or any way to see if it has the H1 tag. Does WP and/or Tweak Me automatically tag the post title entered in the Post Title box with H1? Or is it something I have to do manually? I’m a total beginner with CSS and coding, so I’m sorry if this is a silly question!

    Sarah's Book Shelves recently posted: Are Your Book Ratings Biased Early In The Year?
  2. I have the problems with not always like how the heading tags look, but I’m on a free WordPress site, so the only way to change them is to change the entire them and see what that themes headings look like.

    I use H3 a lot, to be honest, because H2 tends to be huge and H4 is really tiny. :/

  3. I’m confused about h1 and the title. The WordPress theme I use puts a title on the post. Is that considered the h1? I don’t want to repeat what is already on there by making an h1 heading. You said in your article that the only h1 should be the title; so, is that the title that WordPress has me fill in? Or, do I have to make another title in the text of the post (which would be redundant)?

    Thanks!

    1. You don’t put in the h1 for your post title—that’s your theme’s job. 🙂 It should do that automatically.

  4. Great post… structuring your content should be a standard process when writing as it makes it easier for people to understand. Also it helps the writer to logically lay out how the content should be read. Unfortunately most people aren’t doing this enough. Love your examples.

    Thankfully, there are plugins for WordPress to change font type and design for those struggling with css.

  5. What a great post. Thanks so much for writing this. Taking notes and making changes for sure. I use the headings to outline too but need to clean it up more.

Recent Posts

    Random Posts