In this lesson, we 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, audience, or resulting in bouncing away to find a different website?
In this example, we have an article with no headings, which will make it quite difficult for a reader to navigate.
In the next example, we have added the appropriate headings to help a reader make sense of the content, and to find out what the article is about before actually having to read it.
Headings 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, 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.
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 selecting the option that says H2 in your block toolbar, and from there you can select between H1 to H6
to ensure your headings are in the correct order and hierarchy.
Did you know you can use the Outline feature under your List View to quickly check your headings?
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.
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 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 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 to maintain the structure of a page when zoomed in.
As a user with low vision zooms into a page, the different text sizes allow them to keep track of where they are on a website.
Remember to structure your headings into logical chunks.
For example, this post is about parrots, which is the title, the H1.
I decided to start 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 topic above it, similar to a magazine article.
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 content that follows.
They should accurately reflect the content of a section.
When you are in the Site Editor, you can click on Styles and then open up your Style Book.
Here you are able to globally style your headings, using your sidebar settings on the right.
It is advised to use the same heading hierarchy and styling throughout your site 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.
I trust that you will start using headings to improve the user experience on your site as well as search engine optimization.