How to use headings for accessibility and SEO
Have you ever wondered what the difference is between using bigger text, or using the heading block? Do you want to learn how to make your website more accessible and enhance its SEO at the same time? Watch this short video to learn how using the WordPress headings block.
Learning outcomes
- Use headings correctly across your website’s posts and pages for readability, accessibility, and SEO purposes
Comprehension questions
- Why shouldn’t you just make paragraph text bigger when using headings?
- How do headings help people who use screen readers or are users who navigate using only their keyboards?
- True or false: You should stuff your headings full of key words for best search engine optimization.
- How can you quickly check to see if your headings are working correctly?
Transcript
Did you know that using headings on your website’s posts and pages can be the difference between connecting with your website’s audience or result in them bouncing away to find a different website.
For example, imagine you are a parrot owner in a coastal town and a hurricane is coming–and you need to find information fast on how to keep your feathered friends safe. Which of these two articles are you more likely to read?
Most people will bounce away from this first example because without headings, they can’t find what they’re looking for quickly, and they’ll go in search of a different website if they can understand it a lot more quickly.
Headings serve to organize content and make it easier for the reader to navigate and locate information. Most importantly, they are essential tools for accessibility and search engine optimization. By the end of this tutorial, you will be able to use headings correctly across your website’s posts and pages for readability, accessibility and SEO purposes. For content purposes, it’s important to use headings to introduce new topics, sections, or articles; to guide the readers, let your readers skim your content; to give the reader an idea of what to expect ;and break topics up into smaller, more digestible pieces of information.
Headings use typography and formatting to distinguish them from the rest of the content. Website headings often use larger font sizes and different font weights or colors to differentiate them from the main body of the text. However, to use headings well in a way that will rank your website higher in search engines and make your website more accessible, you need to do more than just adjust the size of your paragraphs. Instead, use the headings blocked to organize content and indicate the hierarchy of information. Here I am transforming this paragraph block into a heading block.
Each page should have one main heading the topic of the post or page. By default WordPress makes your page or post titles an h1. This first important Heading should accurately and concisely summarize the content of the poster page. To start adding heading blocks open up your inserter and search for the heading block. Your pages and posts will be broken up into sub headings subheadings such as h2, h3, all the way to h6 with WordPress can then be used to break the content into sections and subsections funfact. You’ll notice when you use your first heading block that h2 is automatically selected. That’s because your page your post title is your first primary heading.
Once you’ve added a heading, you can change which heading is visible by selecting the heading in the list view, then selecting the option that says h2. From there, you can structure your headings.
Headings are important for accessibility. Using them incorrectly means many people will not be able to access the information on your website.
When you use headings for accessibility, this allows screen readers to better navigate the page and quickly find relevant information. Also keyboard only users can quickly skip to the right section with a click of a button.
Without headings, the screen reader has to read this entire chunk of text out loud, there are no headings to allow users to jump ahead.
If I add headings the screen reader or keyboard can allow its users to quickly navigate to the section that is relevant to them, such as if they own an eclectus parrot and not an Amazon parrot. Properly using headings also makes content more scannable for users with cognitive disabilities, such as dyslexia, or ADHD.
Finally, they help users with low vision to maintain structure of a page when zoomed in. As a user with low vision zooms into a page, the different sizes of texts allow them to keep track of where they are on a website.
Here are some tips on writing headings. First, structure your headings into logical chunks. For example, this post is about parrots which is the title, the h1. It’s considered a best practice to only use one h1 per page, though there may be some use cases where you use more than one. However, when in doubt, stick to one.
I decided to start my article by writing about parent health which I use an h2 for. This relates to about parrots.
Another subtopic about all parents and then parrot health is nutrition. It falls under the heading parrot health, so I’ll drill down to the next subheading.
Each subtopic should relate to the topic above it, similar to a magazine article.
Next use headings in chronological order: h1, followed by h2, h2 followed by h3 as your topics get more individualized. When you finish writing in one topic and switch to another, it’s okay to switch back to an earlier heading that relates to your poster page topic like you see here. For example, parrot enrichment is important to parrot health, but it isn’t really about nutrition. So I switched back to an h3 in this example.
Next, use headings with consistency.
While you do have the option to style each heading uniquely in your site editor Style section, it’s a good idea to use the same heading hierarchy and styling throughout your site to create a uniform look and feel. Next, make your heading stand out with font size, weight, and other styling options.
This will make it easier for users to quickly identify the most important parts of your content.
Also, use headings sparingly be descriptive, concise, and relevant. Your heading should provide a clear and concise summary of the content that follows, they should accurately reflect the contents of the section. Be careful not to overuse headings. Overusing these can be confusing and overwhelming for users, so use headings only where they add value to the user experience. Consider SEO and writing headings otherwise known as search engine optimization. You can choose to thoughtfully embed keywords into headings to boost your website’s rank and a search engine. But be careful not to overuse this as this can be seen as spammy and harm your rank in a search engine. Don’t only use headings for SEO purposes, as this can result in poor user experience. Your main goal should always be to organize and present content in a way that is clear and intuitive for the user.
Did you know you can use the outline feature under your list view to quickly check your headings? Select the list view icon then outline. As you read over your headings, imagine yourself as a reader quickly skimming your page–would these headings make sense? If you didn’t see anything else on the page, does your h2 heading relate to your h1 heading? WordPress will also alert you in this outline section if you accidentally skip a heading level, helping you to ensure that they’re in chronological order. You can check your pages for any errors so that you can correct them quickly rather than searching block by block. One last tip, it can be tempting to use your heading block stylistically for emphasis like I did here. Don’t do this. If you’re looking for a stylistic flair, instead, use an additional block such as the quote block or transform the heading to a paragraph block and use your settings to adjust.
There! That looks better.
For more information on using headings, please see the WordPress handbook page on using headings in content. Happy writing.
