SEO the Hell out of Your Heading Tags

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.