Contact us
Blog

The Marketing Guide to optimised heading structure for SEO and accessibility

An introduction to heading structure

Headers, or header tags, are essential components of web pages. They are part of the HTML elements that make up a page’s structure, with HTML supporting up to 6 header tags (H1 - H6). These tags provide a hierarchy for content on a page and are essential for enhancing readability, ensuring search engine optimisation (SEO) and promoting accessibility. 

A guide to each header tag

H1: This is the first and most important heading tag, which should summarise the main theme of the page. They should appear at the top of your page, before the rest of the content. For optimal use of heading structure, each page should contain a singular H1 tag. Examples of pages with H1 include ‘About us’, ‘Contact’ or the title of your blog post. 

H2: These function as secondary headings, helping to categorise the main content sections and break the H1 topic into sections. Following an H2 with another H2 indicates a shift to a new topic or section. 

H3: These are the subsections within H2s. If you’re detailing a point made in the H2, H3s further elaborate on that topic. 

H4: H4 are subsections that elaborate further on the points made in H3s.

These header tags follow a hierarchical structure, with H1 holding the most important, and H6 the least. Headings with an equal or higher rank start a new section, and headings with a lower rank start new subsections that are part of the already higher-ranked sections. This hierarchy creates content that is well-organised and easy to navigate. 

The benefits of an optimised heading structure

  1. It keeps ideas coherent and organised

  2. It enhances SEO by making the page’s themes clear

  3. It ensures an accessible and user-friendly experience

Header tags and SEO

Header tags do more than just break up text; they’re essential for SEO. They alert search engines, like Google, about the key themes of your page. The correct usage of these headers can elevate a site's visibility on search engines. This is essential, considering that poorly structured headings can leave users to quickly exit a page - leading to a higher bounce rate. 

Focusing on keywords in headers, especially the H1s and H2s, and ensuring the content in the headers is relevant, enables search engines to appropriately index and rank your page higher.

Header tags and accessibility

HTML header tags are essential for assistive technologies and screen readers to be able to navigate a web page, without which, it is very difficult and time-consuming for blind and visually impaired users to find the content they are looking for.

Assistive technology tools jump from header to header, providing a summary of the page’s content. This allows users to quickly land on the section they’re interested in.

Without proper headings, users with visual impairments would have to read the entire web page to get the information they need. 

Simply enlarging or bolding text just isn’t enough. If you’re styling for visual appeal, avoid misusing heading structures - it could render a site almost unusable for some. 

Heading structure best practices

  • One unique H1 per page: This should be at the top of the main content to describe what the page is about. 

  • Create a table of contents: This makes it easier for users to find the information they are looking for. 

  • Descriptive headers: Headers should reflect the content that follows and incorporate keywords (only where it's natural to do so!).

  • Short and sweet: While headers should be descriptive, avoid long, complex sentences.

Common mistakes to avoid when using heading structures

  • Overlooking hierarchy: For example, if an H2 is followed directly by an H4 instead of an H3. (Not to be confused with closing subsections. An H4 can be followed by an H2 because the H4 closes the previous section.)

  • Omitting headings: Just because the webpage design indicates the start of a new section, doesn't mean it doesn't need a fresh heading.

  • Solely using H2s: headings just because all the headings are the same size in the designs - the header tags need to follow a defined structure.

  • Overusing subheadings: Most pages will just need a few H2 and H3 headings - only very long and complex pages will require H5 and H6 level headings. 

  • Using heading tags for content: Never use heading levels simply based on their appearance, like making the text bold etc.