Your heading tags (h1, h2, etc.) are the most important bits of text on the page. Not only are they valuable real estate for SEO and keyword placement, they’re also critical for user experience (UX) and creating skimmable content.
But many people use heading tags incorrectly (especially beginners). So let’s go over the best practices for using heading tags in WordPress, in order to improve your organic traffic, revenue, and UX engagement metrics.
What are heading tags?
Headings are an HTML element commonly used to structure pages and posts in WordPress.
Heading tags come in 6 heading levels:
- H1 – Page title (used once per page)
- H2 – Major headings
- H3 – Sub-headings
- H4-H6 – Minor headings (used less frequently).
This section is headed by an <h2> tag:
Hierarchy
Heading tags are hierarchical, meaning they can be used to form a nested structure, much like a bulleted list with indentations.
Smaller numbered headings are more important, so H1 is the most important, H2 second-most and so on. Search engines use this hierarchy to understand the context of your content and relative importance of various sections, topics & keywords.
Appearance
Visually, heading tags usually have a size and weight that corresponds with their importance (H1 tags are the largest, followed by H2 and so on).However this sizing is completely up to the site owner and theme developer, and is completely adjustable via CSS.
The raw HTML passes no sizing specifications (relative or otherwise).
In the HTML, a heading looks like this:
<h1>This is an H1 Tag</h1>
<h2>This is an H2 Tag</h2>
<h3>This is an H3 Tag</h3>Code language: HTML, XML (xml)Why use Heading Tags?
Heading tags aren’t just about visual appearance. In fact, using them for text sizing is one of the most common mistakes I see.
In reality, heading tags are used to give meaning and structure to your webpages. This helps users and search engines to better understand your content, which correlates directly with longer dwell times and higher rankings.
Why headings are important for SEO
Google doesn’t treat all text on your pages equally. Search engines infer the importance to keywords and terms based on their hierarchical position in the HTML.
So keywords in an <H1> tag are more important than an <H2>, which are more important than keywords in your body text or lists.
By placing your most important keywords inside heading tags, you can help search engines better understand your content and which keywords it should rank for. This is advantageous for you and Google.
Note: Most SEO professionals think heading tags have value up to around H3. After that, there is little (if any) advantage over paragraph tags.
Using Heading Tags: Best Practices
There are clearly defined rules about how heading tags should be used. Breaking this rules may hold back your site’s ranking potential.
These are the best-practices you should follow (ranked in order of strictness):
- One H1 per page
- H1 should be page title
- Maintain a logical hierarchy (don’t skip heading levels)
- Don’t use heading levels as a substitute for font size
- Use H2’s frequently
- Rarely (if ever) use H5-H6
1. One H1 tag per page
Even though Google doesn’t penalize multiple H1’s, nearly all SEO’s recommend having one H1 per page. This comes back to hierarchy. An H1 is the most important tag, so it should contain the most important content, which is… the page title (naturally).
2. H1 should be the page title
Your post title is the most important block of text on the page from an SEO perspective. There’s also only one title per post, so it makes sense that it should be the sole <h1> tag.
3. Don’t skip heading levels
Your heading levels should follow a logical hierarchy. That means you shouldn’t skip over heading levels or nest a higher level heading under a lower level.
Think about your page like a bulleted list:
- H2
- H3
- H3
- H2
- H3
- H3
- H4
- H4
- H3
- H2
The flow is logical and doesn’t skip around. For example you should never do:
- H2
- H4
- H3
It breaks the hierarchy and will confused search engine spiders. The main reason people do this by mistake is for aesthetic reasons (see #4)
4. Heading levels should not be used for font-sizing
The most common reason I see bloggers break a logical hierarchy is because they’re using heading levels to change font-size, rather than to structure the document (the intended usage).
If you want a heading to be a different size for aesthetic reasons, you should use the typography controls is WordPress. In Gutenberg, these are in the block settings panel of the sidebar.
You can also use CSS to change the font-sizing by adding a CSS class to that element and then writing a CSS rule to change the font size.
For example:
.smaller-h2 {
font-size: 22px;
}Code language: CSS (css)Then just add the .smaller-h2 class to any heading you want to modify.
5. Use H2’s frequently
H2 headings represent the primary sections of your web page. They’re also given more SEO weight than lower heading levels (H3+) so you should use them liberally.
Not only do they break up the page from a UX perspective (making it skimmable) they also help search engines understand the depth and topical coverage of your page.
You can use sub-headings under H2’s, but not every section needs a sub-heading. For example, all the items in this ‘best practices’ section are <H3> tags.
6. Avoid the lowest heading levels (H5-H6)
Most of my pages contain H2 and H3 tags. I also use H4 headings on longer, in-depth content. But that’s where I draw the line.
There is almost no SEO value to H5 and H6 tags, and if you’re going that deep you probably need to rethink the structure of your page (use more H2’s).
Adding Heading Tags in WordPress
Heading tags can be added to your posts in many different ways. Most users are familiar with the default method, using the mouse.
- Classic Editor: Choose a heading level from the drop-down menu
- Gutenberg: Add block > Heading > Select heading level
However, this method is actually slower because it requires you to stop typing and pick up the mouse, wasting precious seconds. Instead, I prefer to use keyword shortcuts.
Keyboard Shortcuts
In Gutenberg, you can access the block library by typing the ‘/’ (forward slash) at the start of a new line, then start typing the name of the block. This is usually pretty quick.
However headings have a dedicated shortcut that’s even faster.
You can type ‘/’ plus the heading level, then hit enter.
For example:
/h3 + enter (insert H3 heading)
This method is way faster than using a mouse and easily save you minutes in every single post.
Classic editor
If you’re still using the classic editor:
- You should really give Gutenberg a try
- There are keyword shortcuts here too
You can use the pound sign (#) to quickly add an appropriate heading level:
- H2 – ## + text
- H3 – ### + text
- H4 – #### + text (and so on)
View your heading structure
The Gutenberg Editor has a handy feature that lets you view the block structure of your page. It even indents the heading levels so you can see the hierarchy.
- In the top-left toolbar of the Gutenberg editor, click the details icon (i)
That will bring up this view which includes:
- Word count
- Block count
- Heading Count
- Document Outline (hierarchy)
For example, here’s the outline of this post as I’m writing it:
Wrapping Up
Heading tags are vital for both SEO and UX. They help break of the document, organize your content, and make it understandable for search engines.
If you follow these simple rules (outline above) you’ll be able to level-up your on page SEO for higher rankings and better user engagement.
Don’t forget to stick your primary (and secondary) keywords inside your heading tags to maximize the SEO impact. Higher level headings have more impact (H2 > H3).
Also, make sure to keep your headings punchy and concise so that it’s easy for both man (user) and machine (Google) to understand what each section is about.