How do you know that you have a good WordPress theme? It depends. We all have different business goals + different website goals. That said, it’s a pretty safe bet that most of us want our sites to be discoverable on Google. And one way that a bad theme can hurt your business or blog is by not following this one simple SEO rule: use one single H1 or Heading 1 per page.
Speaking of… H1 + Heading 1 are the same thing. H1 is the HTML tag that labels text as a Heading 1.
Good WordPress theme heading structure
Whether you use WordPress for blog posts or not, there’s a standard structure that any theme worth using will follow. The title of the page, post, or other type of content will be the only H1 on the page. On any sort of archive page — search results, blog landing page or index, category page, etc — any content linked will be shown with an H2 or Heading 2 for the title.
For example, the title of this post is set to H1. If you found this post from searching the site or by viewing tinyblueorange.com/blog, the title is shown as an H2.
This approach isn’t foolproof. Many site owners have pages that are titled one thing for easy reference in the backend, but need an SEO-friendly title on the frontend. Or perhaps your site is a custom one + that gives you the freedom to not show the page title on the frontend. In that case, you’ll want to make sure you add an H1 to your page content.
How to check your page + post headings
One way to check your heading use is within the backend of WordPress. While you’re editing content, you’re also styling WordPress blog posts (or pages) with the headings you have available. Making it a point to pick H2 or less can ensure you don’t add an extra H1.
But how do you know your theme uses H1s properly?
It’s time to get a tiny bit nerdy. We’re going to peek at the HTML code of your site to see what tags are in use + where. You’ll want to do this for at least one blog post (or the content type you share), your primary menu pages, + an archive page (search, categories, etc).
Chrome + Firefox Users: Open any page or post of your site + right click on the title. The flyout menu will show you a few options, including “Inspect.” Click that. Depending on your settings, it will open a new window or near the sides or bottom of your current window + show you some code. Think of this like an x-ray machine for your site. Does the title start with <h1 or does it start with <h2? Hopefully it’s set properly to an H1.
I’m not closing the tag like this — <h1> because many of our sites will include ids or classes on our headings. That final caret will appear after all of those details.
Another way you can look is by right clicking anywhere on the page + select “View Page Source.” This will open up the entire page of code for you to review. Simply type ⌘ + F to search for <h1. If there’s more than one instance, you have an issue.
Safari Users: The steps are the same, but the lingo is slightly different. You’ll either use “Inspect Element” or “Show Page Source” to look for issues.
What to do if you spot an issue
The good news is that some of these issues are easy to fix. If the extra H1 is something that was added within the editor, simply drop it down to an H2 + save your changes.
A hosting client had us update their theme code when they learned the individual pages were set to use H2 instead of H1 for styling reasons. With a tiny bit of development, that issue was fixed + the client did not need to do anything to their existing library of pages.
Editing theme files can cause your site to break. If you’re not ready for that step, bring in some help to turn your current theme into a good WordPress theme.