Technical SEO optimization involves a number of tags and meta tags: <title>, <meta name = "description">, <link rel = "canonical"> and others. The correct use of these tags, their attributes and content largely affects how the search engine recognizes your content, how high it will be ranked, how the snippet will look in search results, and what version of the page will be shown to certain users.
Header tags are also important for search engine optimization. In addition, thoughtful headlines on the page can make it much more convenient for users, as well as draw their attention to the necessary information or push them to commit targeted actions. In this article, we will look at how to use headlines to "satisfy" both search engines and visitors of your site or landing page.
There are six header tags in HTML – from <h1> to <h6>. The number in the tag shows the relative importance of the following section: <h1> is the most significant, while <h6> is the least significant. In accordance with this, HTML displays headings of different levels with fonts of different sizes by default: <h1> will be the largest, and each subsequent one will be a bit smaller.
Header tags are block elements: they are always placed on a new line. The elements following them are disposed on a new line too.
How to optimize headlines for SEO
One of the strongest signals for search engines is the first level header <h1>. It is somewhat weaker than <title> tag; however, the keywords in it also have a strong influence on search ranking.
Basing on this, we use the following approach to making headings at Arto Web Agency. We place the high-frequency and important keywords in the <title> tag, and the next by importance we put into <h1>. You can use the same words in these two tags. However, for optimization, it is better to make them different: you can use more keywords and their synonyms.
Lower-level headers (<h2>, <h3>, and so on) are weaker signals for the search robot. They can include low-frequency and less important keywords. The keywords that do not fit in the headings should be used directly in the text. Here you can see the example technical task for a copywriter.
Cluster of requests for optimizing an article. The second column shows the frequency of each request per month in Google Ukraine
An example page from a technical task for a copywriter with header structure based on search queries
It is important not to spam keywords in headers. You should use each keyword only once within each header, if possible. If the context requires using it several times, then it is better to include the different word forms.
Title tags have an important semantic value. Therefore, using plain text with styles as header is incorrect. On the other hand, you should not use <h1> – <h6> tags as design elements, for example, mark semantically insignificant page elements with these tags, such as a link to a cart in an online store or “Our blog” phrase in the side panel of the product catalog.
Make sure that the heading is relevant to the text that follows it, as well as readable and understandable to users. It will help to make the content more convenient and useful, and therefore – more trusted by search engines. Sometimes you can ignore some keywords in favor of the readability of the header and move these keywords to the text of the page.
It is also important to make the headlines catchy and intriguing, if possible. The users, having read the title, should want to read the text that follows it. This is important for informational articles first. For commercial end especially landing pages, the headline can also motivate the user to make a targeted action or to get acquainted with the information that will push him to it.
Logical sequence of headings
Placing the headers on the page, you should ensure that they are in the correct hierarchical sequence. According to HTML4 standards, there should be only one first level heading on a page (this rule can be broken in HTML5, as discussed below). Within the text labeled <h1>, there may be several sections, each of which begins with the heading <h2>; in turn, each of them can be divided into subsections by the headers <h3> and so on. However, some of the sections may not have subsections. For example, the correct logical structure of headings will look so:
And this is how the wrong will look:
Third level headings are less common than the second level are. For a small article up to 5000 characters, you can usually use only <h1> and <h2> tags. Headings of the fourth and lower levels are rarely used. They can make sense for large texts of complex structures, for example, legal or technical documentation. However, such documents will often be more convenient to upload in PDF format, rather than make a separate HTML page for them.
To check the headers throughout the site quickly, you can use Screaming Frog SEO Spider or another software for SEO audit. After checking, you will be able to see pages where the first level headings are missing or duplicated, are too long and so on.
To check the structure of headings on a single page, you can use HeadingsMap browser extension. It shows all headings on the page, their levels, text they contain, and automatically builds a tree of their hierarchy.
Example of page structure in HeadingsMap
In addition to the correct sequence of <h1> – <h6> tags, you need to remember that the font size should be consistent with the importance of the heading. For example, if the page has three levels of headings, then its structure is already quite complicated; if suddenly it turns out that the third level heading is displayed in a larger font than the second level, than the user can easily get confused.
HTML5 header tags
HTML5 standard introduced new semantic elements: <section>, <article>, and others. Using these elements allows you to place the separate hierarchy of headings within each of them. There may be more than one <h1> header on the page now. This can be convenient, for example, for a blog feed, where the general first level headline for a page is “Our blog”, and the headings of individual sections are the titles of articles. On the other hand, you can maintain the united structure of the headings for the entire page. That is, both options are acceptable:
Google also claims that there is nothing wrong with using multiple <h1> on a page: the search engine correctly recognizes this markup.
Thus, summarizing what all the foresaid, we can give several main tips.
- Always use the first level heading <h1> on the page, one for the whole page or separate for each section. Use other headers only when you really need them to structure the content.
- Use keywords in headlines. The higher is the heading level, the more important and frequent keywords should appear in it. Do not abuse keywords to avoid over-optimization.
- Pay attention to the relevance of the headings: they should briefly express what the text is about.
- Follow the logical sequence of header tags.
- Do not use headings as design elements.
- Try to make headlines catchy to attract users.