Just how important are header tags and why your webpages should structure them correctly? Well, having clearly defined headings help two sets of audiences, both of which contribute to benefiting your search engine optimisation (SEO). Firstly, your user audience, headings break down pieces of content and make it easier for users to understand sections of text on your website. Header tags act as a great method to briefly summarise what the following piece of text will contain, aiding your users and improving your user experience (UX) into understanding your website.
Secondly, and importantly for SEO, your header tags make web pages easier to read for search engine bots to crawl and index your pages. Search engine bots “crawl” websites and essential “read” your pages, categorising, and ranking them accordingly. Therefore, with clearly defined headers, in the right hierarchical structure, search engine bots can easily crawl your content.
Therefore, we can define header tags as being beneficial for both on-page SEO and technical SEO. Header tags are available in 6 different formats, from H1-H6, with each header serving a different purpose over the navigational value of the content, making it easier to categorise. This article will help you understand how to use header tags that benefits your SEO, how to add them to your WordPress or HTML website and summarise the importance of header tags on your website.
- How to use Header Tags for SEO?
- How to Add Header Tags in WordPress?
- How to use Header Tags in HTML?
- Why are Header Tags Important?
How to use Header Tags for SEO?
As mentioned, header tags are available for use in 6 different formats, H1-H6, and by understanding how to use these forms of headers, you can correctly structure your content that is beneficial to both your audience and search engine bots. By optimise your header tag structure, you can benefit your on-page SEO and your technical SEO (By technical SEO, we are referring to practices that do not affect content directly, but the infrastructure of a website, such as the hierarchical structure of header tags).
Header Tags for On-Page SEO
Did you know that only 16% of internet users actually read your articles word-for-word, while the other 84% just scan? Therefore, with accurately defined header tags in place, your users can find the content they are looking for quickly and easily and gather the information they need. This is how header tags benefit your on-page SEO. On-page SEO refers to optimising your web pages in terms of content, linking, keywords and other content-focused methods that all contribute to aiding your UX.
It is important to strike the right balance between optimising for your users and optimising for search engines, however, SEO experts are increasingly finding information that concerns benefiting your UX that, in turn, benefits your search engine optimisation. Therefore, by laying out clear and concise headers that integrate a well-balanced keyword ratio, you can make sure to provide your users with an easy-to-read webpage where they can scan and scrape your information and answer their questions and intent easily.
Header Tags for On-Page SEO – Summary
- Break-up text with headers
- Include summarising and relevant keywords in your headers
- Update your headers and track any differences in organic traffic, bounce rate etc…
- Structure your webpages for user experience
- Focus on your user’s intent – write engaging copy and do not stuff with keywords
- Keep your header tags design consistent – easily recognisable
Header Tags for Technical SEO
Now that we have addresses header tags for on-page SEO, let’s see how they can have an effect on your technical SEO, which can help increase your page rankings on search engine results pages (SERPs). As we previously mentioned, header tags are available in 6 different formats, H1-H6, each format serves a specific purpose in relation to the text around it, creating a structured and hierarchical piece of content that search engine bots can effectively crawl.
Header Tags Structure
My header “Header Tags Structure” has been attributed as an H4 tag, but why? Well, headers serve a purpose in reflection to the greater piece of content. My article, as all pieces of content, begins with an H1 tag “How to Use and Optimise your Header Tags for SEO?” then as we move into the core categories of the article, we split them up into H2 tags. Within each core category of your content, if you have sub-categories, these become H3 tags, then H4-H6 tags just further categorise your subcategories content. So, why am I using an H4 tag for my header in this paragraph? Simply, the header “Header Tags Structure” is a subcategory of the header “Header Tags for Technical SEO” which is an H3 tag and itself is a subcategory of the header “How to use Header Tags for SEO?”, this being an H2 tag, which means it is one of the main categories of the entire article.
Header Tags Structure – Example
H1 Tags
Your H1 header tags are, arguably, the most important for every webpage. This tag practically defines the page’s title and acts as a fundamental ranking factor for SEO. Search engine bots use this as a frame of reference to ultimately define what a website’s page is all about. Additionally, your H1 tag in your structure is usually, if not always, the largest and most stand-out header, which provides even more important for the reader. The keywords in your H1 tag hold the most importance out of all your tags.
H2 Tags
H2 tags are secondary to H1 header tags for SEO. They are the chapters of a book, the categories of a website, the subheadings reflect the main pieces of content below the H1 tag, still reflecting and relevant to the H1 tag, but it divides your piece of content into sections.
H3 Tags
These tags go one step further in dividing your content, which aids webpage crawlers to navigate through your website and content, understanding what your content is and how it should be categorised and ranked. Think of it as a book, you have your book title (H1 tag), your chapters (H2 tags) and within your chapters, you can have subheadings and sections, these are your H3 tags.
H4-H6 Tags
These tags just further split up your content into smaller and more specific snippets, each tag related to its subheader. These tags can be helpful to provide highly detailed information in your content without having to have large chunks of texts, but something more easily readable by the user and search engine. These tags also provide additional opportunities to rank for keywords, if done correctly.
Header Tags for Technical SEO – Summary
- Helps search engine bots understand your webpage
- Website content should be split into sections using H1-H6 tags
- Header tags describe a piece of content
- Headers should contain keywords to make it easier to scrape for search engines
How to Add Header Tags in WordPress?
For WordPress users, it is pretty straightforward, whether you are using the classic Gutenberg/WordPress editor or a page builder, like Elementor, you can easily add header tags to your content and assign them a specific value, depending on their role in your overall content. It is important to assign your header tags and they are often overlooked when added, so make sure to add “header tags optimisation” to your to-do list when writing content on WordPress.
How to Add Header Tags with the Gutenberg Editor?
The main page editor on WordPress, the native one to the platform, is the Gutenberg editor, also known as the WordPress editor. When you add content to your website you can simply assign a value to your headers, from H1-H6.
In this image (above), you can see I have a header and it is set to H2. The far-left icon refers to the “block type”, so in my case, I have selected “header”. Then where it says “H2” you can click it and change the header structure to whatever one you need, from H1-H6.
How to Add Header Tags with Elementor Page Builder?
Using Elementor is slightly different, but if you are using this page builder, then you are likely to be familiar with how it works, and you can add header tags very easily. Although, when you are using Elementor, assigning the correct header tag value is very often overlooked and can be detrimental to the SEO of your website.
Elementor works with widgets on its page builder, and one of the widgets is “Heading”, when you insert this widget, you will be allowed to write your own text and assign the heading value.
When you add the widget, on the left sidebar you will see something like this in the image above. The section “HTML Tag” is the indicator that allows you to change the header value for SEO. Here it gives you additional options such as using div, span and the p tag (paragraph). But, as you are using the heading widget, it is important and best practice to stick to the H1-H6 tags for your headers.
How to Add Header Tags in HTML?
HTML header tags are very straightforward and are used just as we have been quoting throughout this article. Your H1-H6 tags are used just as explained, but they need to be inserted in opening and closing tags. Below outlines how to use your header tags in HTML.
- H1 Tag – <h1> Your Title </h1>
- H2 Tag – <h2> Your Category Title </h2>
- H3 Tag – <h3> Your Category Title of your H2 Tag </h3>
- H4 Tag – <h4> Your Category Title of your H3 Tag </h4>
- H5 Tag – <h5> Your Category Title of your H4 Tag </h5>
- H6 Tag – <h6> Your Category Title of your H5 Tag </h6>
Why are Header Tags Important?
Incorporating header tags in your website and across your web pages is important for SEO, UX, accessibility and a whole lot more. If you are still not sure why header tags are important to use, then these points listed below will be sure to answer that question for you.
1. Improve your SEO
As discussed, the correct implementation of header tags can be a benefit to both your on-page SEO and to your technical SEO. By guiding your users across your content and summarising sections, also by including keywords that users are looking for, all contribute to your website’s UX, and therefore, your website’s SEO.
Additionally, using clear and concise header structures help search engine bots to scan and read your content easily. This then allows search engines such as Google to categorise and rank your content based on what information you have presented and how you have presented it.
2. Improve your Website’s Accessibility
Website accessibility is a highly important factor to consider and we have written a comprehensive article if you wish to find out more about making your website more accessible. But headers can contribute to making your webpage more accessible by helping users who rely on assistive technology such as screen readers. These screen readers will scan and read your content out loud and can allow screen readers to jump from section to section, indicated by your use of header tags.
3. Improve your User Experience
By simply breaking up text and separating information into multiple sections, you will be helping your users navigate across your content, finding the precise information they are looking for, with ease. This improves the overall UX of your website. With mobile usage overtaking desktop usage in 2016, it is more important than ever to provide easy-to-read information over smaller devices such as mobile phones. Headers separate text and help users skip to the necessary parts (for them) especially on phones where it is already much harder to read on.
