What is SEO Title Layout? What Should the Heading Hierarchy Be Like?

One of the metrics frequently encountered in search engine optimization (SEO) work is related to the proper heading structure. One of the questions that people new to or completely unfamiliar with SEO find difficult to understand is what the SEO heading structure should be. When creating an SEO-friendly page, the titles on the page with heading tags are very important. Heading tag types are used to correctly reflect the page content, and to give the user and search engine bots the content parts and focus titles on the page. So why are heading title types so important? In our article, we have included this information for you!

What Are Heading Tags?

Search engine bots aim to show the most accurate and rich websites with content to users who are searching for a topic. However, since search engine bots are not human, they try to make sense of web sites by scanning them within a certain set of algorithm rules. During this interpretation process, they try to learn what the page content is about and what it explains by taking some metrics as a basis.

Heading tags are one of the very important SEO metrics that help search engine bots make sense of the page. Heading tags are usually written in the "" code block and proceed hierarchically from 1 to 6.

Why Should We Use Heading Tags?

Heading tags are highlight texts that allow the page content to be interpreted by both the user and search engine bots. By default, style structures such as size and thickness are different and more prominent than other text. When interpreting web pages, search engines want the pages to be prepared in accordance with the user's reading and navigation order. This is because providing websites that allow users to access the information they need in the most efficient and practical way increases the reliability and prestige of search engines.

For this reason, search engines want page contents to be created in an academic structure and hierarchy. Heading tags play an important role in determining this hierarchy. Because the heading tags added hierarchically on the page interpret the "main topic > sub-topic > sub-heading and description" structure and list the site results in the SERP according to the order of importance within this heading structure for the user performing the search.

The use of heading tags not only helps search engines interpret the page, but also allows users visiting the web page to easily access the titles and information texts they need. Therefore, the use of heading tags is one of the most important metrics for creating an SEO-friendly web page.

What Are Heading Tags?

There are different types and usage examples of heading tags from 1 to 6. These heading types vary from a larger and more prominent style to a more normal and smaller font style according to the number they take. Heading types are as follows:

• H1: It is the main title of the page. There should be only 1 H1 tag on each page. The H1 tag specifies what topic the relevant page provides information/content about and reflects the main keyword that the page is intended to be visible for in the SERP.


• H2: These are the topic titles that support the main title of the page (H1). H2 tags refer to the main titles in the page content.


• H3: These are the subheadings that support the main headings on the page. It is used to specify titles and topics related to that tag under the H2 tag.


• H4, H5 and H6: They are used to specify subheadings if needed in the page content. For example, if the H3 title and texts used under the H2 main title need to be divided into more subheadings, H4, H5 and H6 headings can be used.

How Should the Heading Hierarchy Be?

If heading tags are to be used on a web page, these tags must be added hierarchically to the page in a way that ensures topic integrity. For example, if a web page content is created with the title Digital Marketing and this content has subheadings and topics; the heading hierarchy of the relevant content could be as follows:

H1: Digital Marketing
H2: What is Digital Marketing?
H2: Why Digital Marketing?
H2: Advantages and Disadvantages of Digital Marketing
H3: Advantages of Digital Marketing
H3: Disadvantages of Digital Marketing
H2: Digital Marketing Courses
H3: Which Course Should I Take for Digital Marketing?
H4: Udemy Digital Marketing Course

What is important when creating the heading hierarchy is that the titles maintain their topic integrity and that the subheadings are always added after the main headings related to that topic. For example, while there is an H2 in the Digital Marketing Courses title, the title Which Course Should I Take for Digital Marketing? should be a subheading of the Digital Marketing Courses title. Therefore, this title is added in the H3 tag and this title should be placed immediately after the Digital Marketing Courses H2 title.

Common Mistakes in Using Heading Tags

Many websites make mistakes in topic integrity and heading hierarchy when using heading tags in their content. These mistakes make it difficult for search engine bots to interpret and make sense of the page, while also providing the user with an aesthetically inefficient content. Common mistakes when using heading tags are usually as follows:

Adding All Content Titles with H2 Tag

Generally, due to its style and font size, websites can only use H2 in content titles. However, this is a very wrong method. This is because the style and font sizes of the headings (H2, H3, H4, etc.) can be adjusted with the help of CSS and brought to the desired size and highlighting tones. The main reason for using heading tags in the content is not style and form, but to help search engine bots understand the page hierarchy. Therefore, using all headings within H2 tags is a very wrong method.

Using H2 Heading Without Adding Text After H1

One of the mistakes many websites make is to add the H1 tag used on the page just for the sake of using it. However, the H1 tag is arguably the most important heading tag that reflects the main keyword of the page content. Therefore, a text content of 100-150 words should be included after the H1 tag. This text content supports the H1 heading tag by providing a summary of the page and the main topic of the page. After that, H2, H3 and other subheadings should be included.

Placing All Subheadings at the End of the Content

Some websites misunderstand the heading hierarchy and add all H2 headings first, then all H3 headings on the page. The hierarchy here is related to the topic integrity of the writing and headings. Therefore, using heading types in order on the page is a wrong hierarchy. The correct heading usage structure is as we gave in the example above: Main Heading > Subheading that concerns the Main Heading if any. So, after using H2 and then H3 on the page, if a different main heading that does not concern the used H2 and H3 headings is to be added, it should be added to the page again with the H2 tag.

Using Heading Tags in Fixed Areas of the Page

Heading tags are often used in many fixed areas on pages due to their form and font size. For example, using heading tags in menu links in the header, in social media links, or in links and category sidebars in the footer is a method that spoils the interpretation of the page content. This is because heading tags are used to ensure the heading hierarchy and topic integrity of the page content. Therefore, for fixed areas and links on pages, instead of headings, span tags can be used and their form and font size can be adjusted with the help of CSS.

Hiding H1 Tag with CSS

On many websites, the H1 tag is not wanted to be used because of its font size and form. This is because the H1 tag is the tag with the largest and most prominent font on the page. In this case, websites hide the H1 tag they added just to have used H1 on the page by making it display:none or visibility:hidden with the help of CSS. However, this method is old and provides no benefit. This is because search engine bots can interpret texts and headings that are hidden on the page. Therefore, when the H1 added to the page is hidden with the help of CSS and not shown to the user, it is considered invisible to search engine bots and cannot provide the benefit it should. Instead of hiding the H1 tag added to the page with the help of CSS, the size and form of the H1 tag can be adjusted in the same CSS code line to make it compatible with the page aesthetics.