Transcript
Introduction
This lesson will explore how to use headings for accessibility and SEO. Did you know that using headings on your websites, posts, and pages can be the difference between connecting with your websites and audience or resulting in bouncing away to find a different website? In this example, we have an article with no headings, making it quite difficult for a reader to navigate. In the next example, we added the appropriate headings to help a reader make sense of the content and find out what the article is about before actually reading it.
Importance of headings
Headings organize content and make navigating and locating information easier for the reader. Most importantly, they are essential tools for accessibility and search engine optimization. By the end of this tutorial, we will be able to use headings correctly for readability, accessibility, and SEO. Firstly, why is it important to structure content using headings? Well, it introduces new topics or sections. It guides a reader. It lets a reader skim content. It also gives the reader an idea of what to expect, and then, lastly, it breaks topics into more digestible pieces of information.
Information hierarchy
Headings are also used to indicate the hierarchy of information. Your pages and posts will be broken up into subheadings, such as heading 2 or H2, H3, and all the way to H6. You will notice when you add your first Heading block, H2 is automatically selected. That’s because your page or post title is your first primary heading. Once you have added a heading, you can change the type of heading you are using by selecting the relevant heading in the List View. Then, select the option that says H2 in your block toolbar, and from there, you can select between H1 and H6 to ensure your headings are in the correct order and hierarchy.
Outline feature
Did you know you can use the Outline feature under your List View to check your headings quickly? Double check if your H2 heading relates to your H1 heading and your H3 to your H2, etc. WordPress will also alert you in this outline section if you accidentally skip a heading level, helping you to ensure that they are in chronological order. You can check your pages for any errors to correct them quickly, rather than searching block by block. In this example, I want to ensure that all the types of sushi are listed as H4.
Accessibility
Headings are also important for accessibility. Using them incorrectly means many people cannot access the information on your website. When you use headings for accessibility, this allows screen readers to navigate the page better 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, in this example, 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 navigate to the section that is relevant to them quickly. Headings also help users with low vision maintain the page structure when zoomed in. As a user with low vision zooms into a page, the different text sizes allow them to track where they are on a website.
Structuring headings
Remember to structure your headings into logical chunks. For example, this post is about parrots, which is the title, the H1. I started my article by writing about parrot health, and for that, I used an H2. Another subtopic of parrot health is parrot nutrition, and then we can keep drilling down to the next subheading. Each subtopic should relate to the above topic, similar to a magazine article.
SEO
Lastly, let’s talk about headings and search engine optimization, or SEO. You can thoughtfully embed keywords into headings to boost your website’s rank in a search engine. Your headings should provide a clear and concise summary of the following content. They should accurately reflect the content of a section. When in the Site Editor, you can click on Styles and open up your Style Book. Here, you are able to globally style your headings using your sidebar settings on the right. Using the same heading hierarchy and styling throughout your site is advised to create a uniform look and feel. One last tip, never use the Heading block to style text. If you are looking for a stylistic flair, use an additional block, such as the Quote block, or transform the heading to a Paragraph block and use the Styles setting on the right to modify your text accordingly.
Conclusion
I trust that you will start using headings to improve the user experience on your site as well as search engine optimization.