H1-H6 Hierarchy: How do I structure headings?

The appearance and content of a website play an important role in search engine optimisation. A meaningful structure of the headings in the body text and above a page helps both the search engine and the user.

Heading tags are used for structuring. We will explain how to structure the content of a website logically by nesting headings.

SEO and Headings: How are they connected?

Google assesses the quality of websites on the basis of user-friendliness, among other things. Clarity and suitable keywords are essential.

To give a website a clear hierarchy, the use of heading tags is important. Heading tags are HTML tags for defining different types of headings.

They are defined with the tags <h1> to <h6>. The <h1> tag identifies the main heading of a website with the highest priority. The higher the number after the h, the lower the hierarchy of the heading.

Structure Headings Correctly With Heading Tags

The <h1> heading has the highest priority on a page and is usually also displayed the largest in the design. It is placed above the content, similar to the headline of a newspaper article. There should only ever be one <h1> heading in the text of a subpage. It should also contain the focus keyword.

Tip: In WordPress, open the outline in the top left-hand corner to see the heading structure of your post.

The outline in the top left-hand corner in WordPress shows the heading structure of your post.

Subheadings <h2> to <h6>

The headings following <h1> in the hierarchy are <h2> to <h6>. These subheadings should be used in a logical order, i.e. always in numerical order. Do not use <h4> and then <h2>, but <h3> first.

Generally, tags up to <h3> are used in continuous text, rarely up to <h4>.

For a very complex, long text with many subheadings, it is recommended to precede it with a table of contents.

Tip: You can permanently change the formatting of the headings in the CSS of your theme. In WordPress, you can find the stylesheet under the menu item Appearance > Theme Editor > style-rtl.css. There you can, for example, change the colour of an <h2> heading to blue with the code:

h2 {color: #0000FF}

Conclusion

The appropriate nesting of headings helps users of a website get a quick overview of its content. Heading tags also allow Google to categorise your content correctly. It is important to use the right keywords and adhere to the tag hierarchy.

Is this article helpful?