entrancePutting together the correct h1 and subheadings structure. How to use H1 and H2 headings correctly when optimizing copy heading tag h1 h2 h3 div
Reading time: 6 minutes
Good afternoon, dear visitors.
Today there will be an article on the topic of headings H1-H6 for the site.
Surely, everyone already knows what kind of headings they are, but I am sure that not everyone knows the subtle points in their use and not guess that their use on the pages of the resource pursues only 2 tasks.
Objectives and examples of use
The main 2 purpose of the headings in the H1-H6 tags is to design and structure the content on the resource pages in order to make it more readable and easily consumed by site visitors. We should not pursue any other goals from these tags.
In addition to their simple use as elements of structuring content and its design, visitors often use these tags to give the necessary design to individual phrases or even whole sentences. It turns out that the H6 tag (for example) has a design of just bold type and instead of highlighting a line in the text with a tag , they wrap it in an H6 tag. This is fundamentally wrong.
Headers in these tags should only be used to break the text into logical parts. No highlighting of whole sentences and individual phrases.
In addition, H1-H6 headings are hierarchical, which makes them different in design, at least in font size. Each lower level should be less noticeable than the one higher above it.
The image shows the correct design of headers in these tags when the font size descends from top level to the lowest. If you have a situation different from this, then you should already refer to the design styles of your site and edit them properly.
But here's one thing - make sure that the headings of the lower level (closer to H6) are similar to the headings and do not merge with the regular text. They should look like headlines, not just bold.
Based on this design, we can understand that headings must maintain their hierarchy when used as an element of text structuring. It cannot be that first there is the first heading H1, and then immediately H5 or H6. After the first level, it is logical and correct to use only the heading in the H2 tag. This is important, both from the point of view of the design of the material itself, and from the point of view of maintaining the correct structure.
Search engines are now paying attention to these tags. But not as SEO elements, but as structuring elements. Therefore, it will be strange if there is H1, and then immediately H6.
When using these tags, we make sure to adhere to the structure. If we go down one level, then no jumping over the level. The structure should be as follows: H1-H2-H3-H4-H5-H6.
It should be said that the use of an H1 level heading in these cases will not be appropriate, since it should be used only one time on the page and should contain the title of the material. Therefore, there is no need to use it in the text.
Now I'll cover the basics of using the H1 heading, but before that I'll give a couple of general tips that are valid for all heading levels.
- Do not end with a dot;
- We maintain a hierarchy in use;
- No purpose to place keywords;
- They take place even in very short articles, since any text can be divided into logical parts;
- In the title, he writes a brief essence of the following text, and not something "if only it was."
Basics of using the H1
The above rules are also relevant, but besides them, there are also obligatory headings for this level.
- H1 always once on each page;
- We encourage the user to read the material, so it makes sense to use tenacious words (for example, secrets, the best chips, and so on);
- We make it different from the title tag, which displays the title of the page in the search results and encourages the transition to the site page from the search. It should be a little different, but it should definitely make it clear that the context of the material on the page has not changed;
- We use the keyword of the article, but in a diluted form, and not in the exact occurrence;
- The use of punctuation marks is not recommended.
Practical use
Above I wrote that H1 is used only 1 time on the page and it should be embedded automatically into the layout of the site template and will also be automatically inserted into the header. Check this moment. Analyze your article titles and see if they are enclosed in H1. If this is not the case, then edit your template.
A common situation when instead of H1 is H2. This is not a gross mistake, but it is better not to allow it.
If we are talking about using the rest of the H2-H6 heading levels, then they should already be used in manual mode.
Having used some CMS to create a website, these headers are added to articles very easily. For example, in WordPress, the formatting bar in the page editor always has a headings item, where you can select the desired level, having previously selected the desired text, which must be enclosed in the heading.
So with every engine. If you use HTML layout of the site and you need to add tags manually, then there will be no difficulties here. One has only to enclose the necessary parts of the text between the opening and closing tags with the required levels. See below for examples.
2nd level heading
3rd level heading
4th level heading
5th level heading
6th level heading
As for the styles for each level, it is worth adding rules to each level in the style file.
H1 (styles here) h2 (styles here) h3 (styles here) h4 (styles here) h5 (styles here) h6 (styles here)
Notice that there are no dots or hash lines in front of the heading level name in the styles. Inside the brackets, we indicate the styles themselves: font type, size, color, background, and so on.
H1-H6 Header Design
If you make your headlines a unique eye-catching design, then the visitors will only thank you for this and the content design will be at the highest level. Simple titles with large font sizes and bold text are now a thing of the past.
Simple, but at the same time, design of headings with the help of various selections with lines, underlining with the help of a background, and so on are coming into vogue.
I once gave already some examples of such designs. Even if you take my blog, the main heading in H1 is not just a big font on a white background with the rest of the text. It is separated by a gray frame on the general background of the site, which makes it more visible and draws attention to it.
Let me give you 2 more examples of styled headings in H1.
As you can see, this is not just a bold type, but a beautiful background with a wavy bottom surface and an accentuated top.
You can also look at an interesting design on this page for yourself.
As for the headings H2-H6, they can not only be decorated with some kind of background, but they can be numbered (if you use the content at the beginning of the page) in the form beautiful pictures... Again, these shouldn't be simple numbers. Here good example such an idea.
When you know what you don't, much less do most, you can go over and look at the main mistakes in using headings of all levels on your site.
Errors in use
You could already think of all the mistakes yourself, having studied all the material above, but there are some nuances. I will list everything that may apply specifically to you and what immediately needs to be corrected.
- More than one H1 per page. It is not right. Only once per document;
- The use of H1-H6 tags for the design of additional site elements. At the very beginning, I wrote that the purpose of these documents is the design and structuring of content. Therefore, they should only be used in content. Most site templates contain these tags in the side columns for styling their titles, and so on. This is clearly expressed in WordPress templates, when the name of each widget in the sidebar is enclosed in H3 or other tags. If such a situation exists, then replace the heading tags in the service elements of the site with others, for example, with the "span" tag;
- We specially enter keywords. Previously, it was believed that by entering keywords in direct entry into the headings of all levels, you can increase their density and the position of such a page will be higher. But now it is already "punishable by law" search engines and sanctions are imposed for header spam. Moreover, these tags are ranked according to other algorithms. Conclusion: there is no purpose to enter keywords;
- Frequent use of periods and punctuation marks. Dots in headlines should not be used at all, since this is wrong from the point of view of both copywriting and general rules text formatting. We also try to minimize the number of punctuation marks in order to increase the readability of headings. This also includes a large number of words - don't make too long headlines;
- The structure is not followed from the point of view of the hierarchy. Try to follow a logical chain in building the hierarchy of H2-H6 tags on each page;
- Using H1-H6 tags to style other text elements, not the heading. This is what I said above, when the styling of each tag is incorrectly configured and instead of the usual bold selection, you can use a heading of some level.
- The heading is inappropriate or does not carry the context of the text that follows it. To learn how to create logical titles, grab a couple of well-designed books that are easy for you to read. Also focus on structuring content on the Wikipedia site;
- Not using H1-H6 headings at all or not using small texts. It's just a complete absence and there is nothing to talk about, but about the absence on small pages is a questionable moment, since any text (even the minimum 1000 characters) has a logical structure. Moving from one topic to another. Why not break it down into logical parts with subheadings of various levels?
That's all, dear webmasters. The headline material on the site has come to an end. He came out rather drawn-out. Somewhere I repeated myself, but this is only to draw your attention to the key points of the article. Hope you find this material useful.
By the way, can you find a small flaw in my titles on the site? If so, write in the comments. This moment is not very noticeable, but it is there.
See you in the following articles. Still to come.
Best regards, Konstantin Khmelev!
The first title that a site visitor often doesn't pay attention to is the one shown in the browser tab (). For a search engine, he is the most important, since it is his Yandex, Google, etc. often() is used as the title of the snippet.
The second heading is in the h1 tag. Further subheadings are smaller. If you collect them all, then the structure of the web document should be clearly visible, like the chapters of a school textbook. Such information, divided into sections and subsections, is easily perceived, to find required material on the page is straightforward.
Important notes:
- the heading clearly explains the content of the page, section, subsection. It is not a text decoration tool. They do not need to highlight a menu item that contains nothing but a title.
- heading is a word, phrase, sentence. It doesn't have to be long.
- the heading is the whole sentence, not part of it. For the design of one or several words, there are such tags as strong, mark, em, etc. ().
- if the article is built in the "question-answer" format and the answer is short in most cases (for example, the instruction for a medicinal product), then instead of the h tags, it is more correct to use the triple dl, dt, dd.
Check h1 pages
Now a phrase in any tag can be made a heading using CSS styles: Increase the font and / or size of the text. In order to check the number of h1 tags and their content, it is enough, no additional extensions are required. Such a tool can be displayed by pressing the key
Difference in using h1, h2, h3, h4, h5, h6 in HTML5 and HTML4
Before further reading, it is advisable to familiarize yourself with the examples described in the standards yourself.
One h1 per page (HTML4 version)
- Step by step sudoku solution
- Sudoku solver program with explanations (online)
- Rules of the game
- Algorithm for filling the cells of the crossword puzzle
- Method 1. "Hidden loners"
- Method 2. "Loners"
- Methods for solving sudoku
- Strategy 1. Candidate in two or three cells of the same square
- Strategy 2. Groups of candidates
Name of the site
Heading
Statement 1: The page title or part of it must not be a link (see Common Sense and Help News.Google). Hence the consequence: the name of the web project on the Main page should not be a link either. In general, the page does not need to link to itself (excl.). But this is acceptable (on Avito, on the announcement page of each similar entry, h3 is given):
Interest rates from 1% to 5%
Statement 2: there is a slight difference in how to position the link: inside the h tag or the h tag inside the link. And it lies in the fact that in the first case, the link is only the text, and in the second - the entire block.
text only
whole block (rectangular area)
Should title differ from h1?
"Can title be the same as h1?" - Yes maybe.
"Are different title and h1 useful for SEO?" - yes, they are useful. You can add additional keywords to the tags in question to increase the tail of queries that come to the site. Or, to make a more attractive snippet, in the title add, say, the name of the company, if the company is heard, or the phone number (for a taxi, for example).
Note: in order for the page to appear in Google News or Yandex Quick Links, the main part of the title and h1 must match. This may be due to the fact that visitors expect to see the same title on the page of the site as in the search engine results. On this moment it is worth paying attention to information sites.
Do side block headers need to be in h?
If the headings are indexed (see), then it is better to be in the h tag. Anyway, they are used on every page of the site and the weight of these words ("Advertising", "Recent messages", "Subscription", etc.) is overstated. One can assume that the parent of the aside should decrease their value.
In addition, for the visually impaired, it will be clear what is what, and not continuous untitled.
On my top information projects, first a subject matter expert draws up the structure of the article (headings and subheadings), and then copywriters write the text on them.
Structure is actually very important if you are concerned about quality. And to get it right, you need to understand how h tags work.
h1 is the main subheading in the article and is usually placed above the text.
The first heading should be visually larger than the rest of the headings on the page.
h2-h6 are small subheadings that are nested.
What are headlines for?
For those who are not very much in the subject - here is, in principle, a good video about the basics of drawing up subheadings h1-h6. If you don't consider yourself a specialist, take a look:
And to consolidate the material, a slightly weaker video:
Headings are designed to highlight the main essence, the idea of the subsequent text in one phrase or even a word. Usually, a person pays his attention to them first of all, deciding whether to read the rest of the material. Headlines are especially important in advertising texts, letters, and serve as the main tool for attracting the attention of the target audience.
In the code, the tag looks like this:
, where the letter h comes from the word "header", which means "heading" in translation. Each level is indicated by a corresponding number.
H-tags through the eyes of people
The text, broken into subheadings, looks more "neat", it is easier to read. The modern user has long learned to scan articles in just a few seconds and quickly draw conclusions whether it is worth reading the entire text, whether it contains the useful information that he is looking for. Headings catch the eye, highlighting the main thing and giving the user the opportunity to analyze the material.
Tags h1, h2, h3, h4, h5, h6 allow you to create a kind of map for the reader, by which he can quickly navigate in the text. And if these secretions managed to catch attention, then the person will linger on the page and will probably read the entire article. You can check the result by behavioral factors. If people linger on the page, take any action, then the SEO work was not done in vain.
H-tags through the eyes of search engines
Search robots collect information from them for semantic analysis. Of particular importance for bots are headings of levels h1, h2, h3. Their inconsistent or incorrect application can negatively affect the ranking of the page. If there are no h-tags in the HTML code at all, then the site will have a hard time promoting. The h4, h5, h6 levels are less significant.
H-tag hierarchy
The main rule in the placement of headings is their hierarchy. It is not necessary that the tags go one after the other in size, but it is unacceptable to use, for example, h3 in the text, if you do not have the h2 meta anywhere, or to use h6 without h5.
This is how a properly nested hierarchy looks like:
What is the h1 tag
The h1 tag is a table of contents for the text (like the title of a book or the title of an article in a newspaper).
Each page should have one and only one h1 tag.
In terms of attractiveness to the user, it is of prime importance. But for SEO promotion, it will have more weight.
Title is also a title, but it is prescribed not only for people, but also for robots. It is displayed not on the page itself, but only in the browser tab and in the snippet as active link to the website. In fact, title is an alternative but main title for the html document. If it is absent, then the search engine takes h1 as a basis and uses it in the sickle.
Why h1 should be different from Title
It's pretty important to understand that h1 and Title are different headers. And, accordingly, they must be skillfully combined. Here are the basics on this topic:
Failure to follow the rules of uniqueness and relevance of headings can lead to the fact that the site will fall under the filter. Recently, search engines have begun to pay special attention to the quality of content and its SEO settings. Duplicates, spamming, chaotic distribution of headers, their inconsistency with the content is punished.
Length Requirements H1
It is recommended to make H1 more concise than Title, not exceeding the number of characters more than 50. But there will not be a disaster if the heading turns out to be longer, when it is not possible to squeeze the whole essence into the indicated number.
Special plugins for WordPress allow you to analyze the correct filling of all metrics right in the editor.
Rules for correct spelling of h1
- Must be unique for the entire site and absolutely readable;
- Does not duplicate the title tag, but does not contradict it either;
- Do not make it too long (you can make the title more voluminous);
- Used only once per page;
- Relevant to the text and reflects the semantic essence of the material;
- Interesting, attractive to the user;
- You cannot put a full stop at the end and it is recommended to use punctuation marks at a minimum.
Key application
The main key phrases, first of all, should contain the title. But they should be written in h1 as well. And there, and there it is better to do it at the very beginning. But it would be better if the keywords do not duplicate each other in these two tags. You need to use different word forms or diluted occurrences in h1 and straight in title.
Some take all the keys on a page and from them make up the structure of the articles. Please note right away - without cool PFs, such a scattering of keys by subheadings will be punished by the filter for spamming.
Psychological Tricks for Writing an Attractive Headline
The headline should be catchy. Here is a video from Maxim Ilyakhov, a media specialist, rector of the School of Editors and creator of the Glavred service:
Here are a couple more "tricks" that are used when writing headings.
Solution
Remember that a person is always looking not for information or goods, but first of all - a solution to his problems, needs, needs. Operate specifically for the intended problem of the target audience
An example of a good headline: “Hair falling out? Stop the loss in a week. "
An example of a bad headline: "Can Hair Loss Be Stopped?"
In the first case, we clearly identify the problem and offer a specific solution. In the second case, the problem is indirectly touched and the options for its solution are blurred.
Intrigue
An example of a good headline: "Revealing the secret of the most effective recipe for hair loss."
An example of a bad title: " Best recipe from hair loss ".
Reception "exam"
A sentence in this form challenges the reader to test himself.
An example of a successful headline: "Are you sure you are fighting hair loss the right way?"
An example of a bad headline: "Do You Know Everything About Hair Loss."
Of course, these are not all methods that help to influence the perception of a person and attract his interest. Read books on marketing to read more if the topic is interesting. By the way, title can also be "enticing". Moreover, most likely it is he who is highlighted in the search results. You can check its display after indexing the page.
Why h2-h6 subheadings are needed
Tags from h2 to h6 are located already in the body of the article itself, structurally dividing it into thematic paragraphs, and in the code of the HTML document, highlighting its significant elements. They are also identified by search engines for semantic analysis of the page.
Are needed in order to hierarchically designate everything important and worthy of attention user on the page. Such a structure helps a person quickly navigate the information and assess its compliance with his needs.
h2 - focuses the attention of users and search engines on the main content of the article. Shows the most significant in the text.
h3 - is a sub-item for the information that goes under H2, revealing it even deeper.
h4, h5, h6 - are defined as nested subheadings (reveal in detail the essence of H2 or H3) and are used in the text, as highlighting small points and significant words, as well as in the menu, sidebar and other components of a web document.
All h-tags must be within 50 characters.
How to write h2-h6 subheadings correctly
- It is impossible for the smallest subheading to be present without the larger one. That is, if the text contains the h4 meta tag, then it must be preceded by h2 and h3.
- The higher the heading level, the larger the font should be. In WordPress, the default settings are usually set in such a way that tags are automatically formatted in the correct form.
- All h-tags must match the content of the content, display the essence of the information.
- It is unacceptable to use h1-h6 as anchors or active links.
- You cannot write other tags inside the h tag.
- Only text and punctuation marks are allowed in h tags.
- Subheadings should not contain overspam of keywords. It is best to use keywords in title, h1, h2, and in smaller ones, such as h3, h5, h6, focus on a detailed disclosure of the topic.
If the title and the main heading H1 are registered in the page markup, but the text of the article itself is not too large and does not contain subheadings, this is not an error. There are quite a few pages in the TOP where the content goes in an almost continuous strip, perhaps divided into paragraphs. You can get into a leading position without "witchcraft" over the markup of the text, placing more emphasis on. WordPress sites are perfectly indexed by search engines. But still, the use of these tags not only makes the task easier, but also makes the content easier and more pleasing to the visual perception.
How to fill in h tags in WordPress
h1 is usually filled in the field above the text in the record:
To make subheadings h2-h6, you need to select the required element and, hovering over the “headings” tab, select the desired one by clicking on it. Do the same for each of the subheadings, including them in the correct format.
There is an even easier way - you can type the text in the Word using the necessary markup and simply copy-paste the article to the editor of Wordpress. Headings selected in Word will automatically appear in the correct sizes. If necessary, you can tweak them using the WordPress CMS editor tools.
Hello, friends! We are glad to welcome you to Andrey and Dasha's blog - Thebizfromscratch. Something for a long time we have not written anything about SEO and in this article we want to catch up, because the topic for today is the Impact of H1, H2 - H6 headings on website promotion. We will tell you according to what rules and principles we write titles on your blog and we hope that our experience will be useful for you.
How to place meta tags H1, H2 ... H6 correctly
So, when making out a publication, we prescribe the meta tags in the following order:
It is the most significant heading, therefore, it is customary to enclose the main search key in h1 tags, preferably diluted with neutral words, i.e. diluted title.
The next most important header, which is used to select a low-frequency request matched to the main request.
- H3, H4, H5, H6
In fact, they do not have much influence on the promotion. However, the inclusion of keywords in them can lead to over-optimization, which will only cause a negative response from search bots. Therefore, we use these meta tags only for the beautiful structuring of the article. To make it easier for visitors to read and immediately understand where one thought ends and another begins. Moreover, do not forget that all posts are written exclusively for readers and you should not get carried away with the frequent repetition of the same words / phrases.
And so that the above information is correctly understood, let's look at an example! Suppose you wrote an article under search query- "How to make a website." This phrase must be registered in the Title field and repeated at least 2 times without changes in the text itself. Or, as many do - they repeat the search query 1 time per 1000 characters. 
If further you need to select the structure, then feel free to use H2 containing a low-frequency query. Again, in the framework of the example - "How to make a high-quality website on the WordPress engine." Write the rest of the meta - tags without keys. 
- Do not include links to other promoted pages in your titles. The link code will be regarded by search engines as keywords and will only harm the ranking.
- Don't place lower-order headings above more significant ones. The first should be followed by H1, then H2 and further on an ascending basis. A tree structure should emerge.
- It is recommended to use H1 once, H2 no more than 3 times, and H3-H6 as much as necessary (only without keys and only if necessary).
Perhaps these were the basic principles and rules that we use when writing articles. We hope that the topic - the influence of H1, H2 - H6 headings on website promotion - is revealed and you have found for yourself useful information... In case of questions - be sure to ask them in the comments, we will try to help.
3 main levels of text hierarchy that allow the designer to grab attention and guide the user towards further reading.
Typographic hierarchy levels
The design of headings and subheadings is a very important part of any interface. Headings and subheadings allow you to create visual hierarchy, draw attention to the main content, and nudge the reader towards further reading.
There are three main levels of typographic hierarchy:
- First level- this is the title itself. The task of this level is to attract the reader and lead him in the direction of the second level.
- Second level- these are subheadings, quotes, descriptions and everything else that goes separately from the main text, but in support of it. The purpose of this level is to increase the scannability of the text and to nudge the reader to further reading.
- Third level Is our main text. The goal of this level is to get out of the user's path. We must not interfere or draw attention to things that can distract the user and take away from this page. The user decides whether he needs to move to this level based on the previous two.
First level (heading)
The main goal of the first level is to attract readers and motivate them to continue (start) reading our text. Reading large blocks of text is difficult and time consuming, so you need to offer the reader a benefit in the title.
On average, 8 out of 10 people will read your headline, and only 2 out of 10 will read the rest of the text. Therefore, maximum information content is important for the title.
The heading should be the most visually prominent element on the page. Usually, the main heading is enclosed in the H1 tag.
To highlight a heading, you can use the standard visual highlighting techniques:
- Contrast- the heading should be in sufficient contrast to the rest of the elements.
- The size- increasing the size of the text for the title is the most in a simple way highlight the given item.
- Inscription Is another way to highlight the title. You can make your heading text bold, super bold, or italicized. This will make the text stand out.
- Space- for a clearer identification of the heading, you need to add free space around it. So that the user clearly knows that this is the main element on the page, and it is necessary to focus on it.
Second level (subheading)
The subheading has a similar purpose to the heading, only on a smaller scale. Subheadings are also used to guide the reader to further reading the text and allow you to retain the attention that the heading grabs.
The subtitle, together with other secondary elements, should maintain interest and make the reader want to read the text in more detail.
Also, subheadings allow structure the text and create a hierarchy On the page. They allow a person to understand where he can start reading, and where to finish, in order to take for himself the maximum amount of useful information.
To highlight subheadings, you must use the same methods as for highlighting headings. But at the same time, you need to remember that the subheading is one level lower than the heading, and one level higher than the plain text. You need to visually correspond to this. The subheading should not stand out more than the heading or less than the normal text.
Third level
Usually a lot of information is presented at this level (the body of your information), so it should be as readable as possible and not distracting. You should enable the reader to concentrate on reading the text and not interfere his.
- The text should be in contrast to the background. The user should be able to read the text without any additional effort.
- It is better to use a monochrome background and refrain from using textures as a background, as they make it difficult for the user to perceive the information.
- The size of the text should be easy to read. There is no need to shrink and make this text too small. If the text is hard to read, the user simply won't read it.
- If you have links at this level, they should be different from the main text. The user must understand where the link is in the text and what will happen when it is clicked.