How to use headings on your site
Headings help users and search engines to read and understand text. For example, they act as signposts for the readers and make it easier for them to figure out what a post or page is about. Headings also define which parts of your content are important, and show how they’re interconnected. Here, we’ll give you pointers on how to think about headers and use them to improve your content.
Why use headings? (H2)
Why use headings? (H2 Proxima)
Use headings to show text structure
Headings are signposts that guide readers through an article. Therefore, they should indicate what a section or a paragraph is about. Otherwise, people won’t know what to expect.
Readers like to scan content, to get an idea of what the text is about and to decide which sections of the text they’re going to read. Headings help them do that. Scanning the text becomes significantly harder for your readers when it doesn’t contain any headings. It’s even worse when you add long stretches of text after a heading.
For web copy, it’s good practice to make sure that your headings are informative to the reader. Some people like to tease their audience in the headings, trying to entice them to read further. While that can work very well, it’s easy to get wrong. Remember that the main focus of headings should be on the content – and the primary purpose should be to make the text easier to read and understand.
Use headings to improve accessibility
Heading structure is important for accessibility as well. Especially for people who can’t easily read from a screen. Because headings are in HTML, a screen reader can understand the article structure and read them out loud.
By reading or listening to the headings in an article, visually impaired people can decide whether or not to read an article. Also, screen readers offer shortcuts to jump from one heading to the next, so they are used for navigation as well.
When reviewing web sites, a UNI student employed by IT who is blind and using a screen reader noted that proper heading structure was one of the main contributors in making a web page easily understood to the user. Skipping web headings, going from an H2 to an H4 with no H3 in between, for instance, can be confusing to the user of a screen reader.
Use headings to improve SEO
It’s generally agreed that how you use headings doesn’t specifically impact your SEO. Making minor tweaks to individual headings likely won’t help your performance. However, there are indirect benefits. Using headings creates texts of higher quality that are also easier to read. A better text is better for users, which is better for your SEO.
If visitors can’t quickly find what they’re looking for, they’ll probably leave your site and look for another answer to their question. This is why text structure and heading use also impact SEO. Search engines pick up on people bouncing from your site. When you have a high bounce rate, search engines can conclude that your page doesn’t give searchers what they’re looking for. Consequently, you might get lower ratings.
With headings, you should always put the user first. Use them to add structure and signposts to your content, and to describe what each section is about. If your headings let users know what your article is about, they’ll help Google understand your content, too.
Structuring your headings
You should structure your headings well, and you should use your keyphrase in them.
When you’re editing an web page in Drupal, you’ll see different ‘levels’ of headings in the text editor – from ‘Heading 2‘ to ‘Heading 6‘. These come in different sizes; moving from largest, to smallest. (H1 is not available in the editor, because it's automatically assigned to the site title (on the site’s home page) or the page title (on subpages).
Behind the scenes, these are converted into HTML heading tags; from <h1> to <h6>. Your theme probably uses these HTML tags in its templates, too.
That’s why, when we talk about how to structure headings and content well, we talk about H1 tags, H2 tags, and so on. We’re referring to the underlying HTML code.
How to structure your headings
You are limited to using one H1 heading on each page. The H1 heading should be the name/title of the page, and is automatically set for you.
Then, as you write your content, you can use H2 and H3 subheadings to introduce different sections. Those individual sections might also use more specific headers (H3 tags, then H4 tags, etc.) to introduce sub-sections.