WordPress and Headings
Heading 1, Heading 2, Heading 3…
Writing local content that is unique is one of the best ways to rank better in search engines and attract more visitors to your site.
When writing content in WordPress, you can use either the Visual or Text editor (toggle in the upper right corner of the editor). The Text editor allows you to edit the HTML markup directly while the Visual editor uses a WYSIWYG (what you see is what you get) editor. Many find the Visual editor easier to use – because it resembles what you’d see in a word processor, and they don’t have to know any HTML. It’s all handled behind the scenes. If you want to see what it looks like, just click the Text tab on any page or post.
How to Use Headings Properly
Before we start let me say I do not use the Visual editor when writing posts. I find it often leaves stray bits of HTML all over if you’re not careful when moving, copying or editing. I prefer writing in the Text editor and entering HTML directly. With that said, if you’re not comfortable writing HTML, then the Visual editor is definitely the way to go.
If you are using the Visual editor to write a post, your screen should look something like this:
Okay, so here’s the problem.
Most client sites I see are a mess when it comes to the proper use of headings.
Don’t use a heading just to make the text larger.
Headings are titles and they have a semantic meaning on how your page is structured. It signals the end of topic and the start of another. This is becoming even more important to comply with Web Accessibility standards. Screen readers need headings to make sense of the content on your page.
Headings play a crucial role in how search engines and screen readers make sense of your content.
If you want to make your text larger, you should do that using classes in your stylesheet, or using the bold and the emphasis (italic) tags in the Visual editor. There are free plugins like TinyMCE Advanced that will add more options to your visual editor like changing the font family, font size and colors, but hard-coding these into a page or post is not recommended. You’ll lose the ability to control the styling through your theme’s stylesheet. If your comfortable writing some code, you can explore some TinyMCE advanced options to customize the Visual editor to assign classes directly to highlighted text that are defined in your stylesheet.
[clickToTweet tweet=”Don’t use a heading just to make the text larger. #WordPress #a11y” quote=”Don’t use a heading just to make the text larger.”]
Never use the Heading 1 tag (H1)
Using the Heading 1 tag (H1) in your content is a bad idea and here’s why. Your page or post is already using the H1 tag for the title. The H1 tag tells search engines and screen readers what the page is about. Having more than one is confusing. Stick to using Heading 2 (H2) and Heading 3 (H3) inside your content and be sure you nest them appropriately if used. For most pages and posts, you’ll just use a few H2 tags.
Headings are useful to separate additional sections of content. Here are three rules to remember:
- Only use H3 within H2.
- Only use H2 element within H1. This is normally the case, since your blog post title will be H1.
- Don’t use H1 within your post or page if your page or post title is present (this is the default).
You should definitely try to use the phrase or keyword you are trying to rank for in your headings as well as the page title. The trick is to write the post for your readers – not for the search engines – BUT be mindful of the search engines in how you structure your content.
What about H4, H5, and H6?
Use sparingly and only if needed to provide additional sub-topics. Nest them in order the same as H2 and H3.
No H1’s and use H2’s to create sections for better readability. Don’t use headings to make text bigger. Use headings to create sections and add structure to your page. Following these guidelines will help you format your content for improved accessibility and search engine results.
Hope you find these tips helpful when writing your next post.