Headings in these tags should only be used to break the text into logical parts. No highlighting of entire sentences or individual phrases.

In addition, headings H1-H6 have a hierarchy, which makes them different in design, at least in font size. Each lower level should be less noticeable than the one above it.

The image shows the correct design of headings in these tags, when the font size is descending from top level to the lowest. If you have a situation different from this, then you should turn to the design styles of your site and edit them properly.

But here is one thing - make sure that the lower-level headings (closer to H6) are similar to headings and do not merge with regular text. They should look like headings, not just bold font.

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 the first heading H1 comes first, and then immediately H5 or H6. After the first level, it is logical and correct to use only the title 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 maintain the structure. If we go down a level, then no jumping over the level. The structure should be as follows: H1-H2-H3-H4-H5-H6.

It is worth saying that using an H1 level heading in these cases will not be appropriate, since it should be used only once on the page and should contain the name of the material. Therefore, there is no need to use it in the text.

Now I will tell you the main points of using the H1 header, but before that I will give a couple of general tips that are valid for headings of all levels.

• Do not end with a period;
• We maintain a hierarchy when using;
• There is no purpose to place keywords;
• They occur even in very short articles, since any text can be divided into logical parts;
• Writes in the title brief summary the subsequent text, and not something “if only it was.”

H1 Basics

The above rules are also relevant, but in addition to them there are mandatory ones for this particular heading level.

• H1 is always once on each page;
• We encourage the user to read the material, so it makes sense to use catchy words (for example, secrets, best tricks, and so on);
• We make it different from the title tag, which displays the title of the page in search results and encourages a transition to the site page from the search. It should be slightly different, but it should definitely give an understanding 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 an exact occurrence;
• It is not recommended to use punctuation marks.

Use in practice

I wrote above that H1 is used only once on the page and it should be built automatically into the layout of the site template and will also be inserted automatically into the header. Check this moment. Analyze your article titles and make sure they are enclosed in an H1. If this is not the case, then edit your template.

A common situation is when instead of H1 there is H2. This is not a serious mistake, but it is better not to allow it.

If we are talking about using the remaining heading levels H2-H6, then they should already be used in manual mode.

Using some CMS to create a website, these headings are added to articles very simply. For example, in WordPress, in the formatting panel in the page editor, there is always a headings item where you can select the desired level, having previously selected the desired text that needs to be enclosed in the heading.

Same with every engine. If you use HTML layout site and you need to add tags manually, then there will be no difficulties. You just need to enclose the necessary parts of the text between the opening and closing tags at the required levels. See examples below.

2nd level header

3rd level header

4th level header

5th level heading

6th level header

As for the design styles for each level, it is worth adding rules for each level in the styles 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 marks before the title level name in the styles. Inside the brackets we indicate the styles themselves: font type, size, color, background, and so on.

Header Design H1-H6

If you make your headers a unique, eye-catching design, your visitors will only thank you for it and the content design will be at the highest level. Nowadays, simple headlines with large font size and bold highlighting are becoming a thing of the past.

Simple, but at the same time, design of headings using various highlighting lines, underlining with a background, and so on are coming into fashion.

I once gave some examples of such designs. Even if you take my blog, the main heading in H1 is not just in a large font on a white background with the rest of the text. It is separated by a gray frame against the general background of the site, which makes it more noticeable and focuses attention on it.

I will give you 2 more examples of designed headings in H1.

As you can see, this is not just a bold font, but a beautiful background with a wavy bottom surface and an emphasized top surface.

You can also see the interesting design for yourself on this page.

As for headings H2-H6, you can not only design them with some kind of background, but also number them (if you use content at the beginning of the page) in the form of beautiful pictures. Again, these don't have to be simple numbers. Here good example such an idea.

When you know something that most people don’t know, much less do, you can move on and look at the main mistakes in using headings at all levels on your site.

Errors in use

You could have already figured out all the mistakes yourself by studying all the material above, but there are some nuances. I will list everything that may apply specifically to you and what needs to be corrected immediately.

• More than one H1 per page. It is not right. Only once per document;
• Using H1-H6 tags to design additional website 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 website templates include these tags in the side columns to style 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 this situation exists, then replace the title tags in the service elements of the site with others, for example, with the “span” tag;
• We specifically enter keywords. Previously, there was an opinion that by entering keywords directly into the headings of all levels, you could increase their density and the position of such a page would be higher. But now this is already “punishable by law” of search engines and sanctions are imposed for spam in headlines. Moreover, these tags are ranked according to other algorithms. Conclusion: there is no goal to enter keywords;
• Frequent use of periods and punctuation marks. Dots in headings should not be used at all, as this is incorrect from the point of view of both copywriting and general rules text design. We also try to minimize the number of punctuation marks to increase the readability of headings. This also includes a large number of words - don’t make headlines too long;
• The structure is not maintained in terms of 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 rather than the title. This is what I talked about above, when the design styles of each tag are incorrectly configured and instead of the usual bold, you can use a heading of some level.
• The title is not appropriate or does not convey the context of the text that follows it. To learn how to create logical headlines, pick up a couple of well-designed books that you find easy to read. Also focus on the structuring of content on the Wikipedia website;
• Non-use of H1-H6 headings at all or absence on small texts. There is simply a complete absence and nothing to talk about, but the absence on small pages is a questionable point, since any text (even the minimum 1000 characters) has a logical structure. Transition from one topic to another. Why not break it down into logical parts with subheadings at different levels?

That's all, dear webmasters. The material about headlines on the site has come to an end. It came out rather drawn out. I repeated myself somewhere, but this is only to focus your attention on the key ideas of the article. I hope that this material was useful to you.

By the way, can you find a small flaw in my headers on the site? If yes, then write in the comments. This moment not very noticeable, but it is there.

See you in the next materials. There's more to come.

Best regards, Konstantin Khmelev!

Absolutely everyone knows what a title is. This is a capacious, attractive title, which, despite all its brevity, contains the essence of an entire publication, article, etc. But the title on the site page is not exactly what we are used to seeing in newspapers, magazines or books. Why? Let's try to figure it out.

What is H1?

H1 is the main heading in the article, the first level heading. Each page on the Internet has its own structure. Headings H1-H6 allow you to properly structure materials, both for search engines and for users. H1 is the main heading, H2-H6 are secondary, nested subheadings. In the code, the headers look like this:

the title itself

Headings on the Internet serve not only to indicate the structure and essence of what is being described, but also to optimize the site. To bring your site to visible positions in the search results, write the correct headings, observing 2 simple conditions:

Condition 1. Keywords in headings

To do this, you must have developed a high-quality semantic core - treat it extremely responsibly and remember that you cannot insert the same key on all pages of the site. Relevance is everything: you need to meet the expectations of clients and search engines. In the headers of the main page you can take mid-frequency and high-frequency queries. And on product pages (product card), headings with low-frequency keys are quite acceptable. The key should lead to a specific position or unit, be precise, and not generalized.

When placing keywords, do so carefully: do not overuse keywords or create spammy titles (for example, buy an apartment in Moscow, buy a refrigerator bag, buy a motorcycle in Krasnoyarsk, price, mine is yours, don’t understand, etc.). Keep the phrase beautiful and logical. In the great and mighty Russian language, words are conjugated and inflected, but robots now understand the meaning and understand the language no worse than you and me! And don’t be too frequent - spam is obvious to everyone, and Baden-Baden is just a stone’s throw away, and don’t forget about Panda from Google.

An example where the number of keys is off scale, overkill.

From the main heading it is clear what product we are talking about. Of course, you can’t do without a key in the first paragraph, but do it unobtrusively, and not so openly and aggressively.

Well, I hope that it will never occur to anyone to cram all the keywords intended for one page into the title. Nothing good will clearly come of it. =)

Remember that text is created not only for search engines, but also for people. And in general, robots like humane, simple and understandable texts. If in the title the keywords organically appear at the beginning of the sentence, it will work a little better. Those. from the point of view of optimizing the page for the keyword “Moscow hotels”, the heading “Moscow Hotels - official sites, reviews, photos” will work better than “Reviews, photos and official sites of Moscow hotels”.

Condition 2. Tags

-

When posting texts on the site, do not forget to place the tags correctly. Tags for text headings are defined by the following HTML code:

-

. According to our observations, two tags are quite enough -

-

. Nowadays people don’t read large texts, and even based on the logic of things, nesting so many headings is not necessary. An exception may be pages with a lot of videos, pictures, interactive elements, etc. But this is still the exception, not the rule.

Search engines also take into account the size and significance of tags

-

. When designing, you should pay attention so that the headings visually stand out from the general text.

Links in headings should not be used, especially in

: This will lead the person off the page to other material or, if you link to the same page, you will create a circular link that does no good.

It is acceptable to link from level headings

and lower, but also if it is justified and logical.

Search engine crawlers place a lot of importance on titles because they are used to indicate important information. This will make it easier for machines to read the text and understand its structure and logic; see what is most significant. Don't try to cheat and use tags

-

for all the text on the page, because it won’t do any good. Robots are not fools, and in general they are very vulnerable - they can take revenge for this by doing something unpleasant for your site. Therefore, think seven times in advance, the consequences are terrible. When writing headings in the text, adhere to the following rules:

Let's put things in order. Tags

-

arranged according to the principle of hierarchy: tag

more important than the tag

. In reality it looks like this:



Search engines are perfectionists: they love the correct sequence, so that everything is in its place, on its shelves. Therefore, we follow the logic: the youngest son cannot be born before the eldest. This is not acceptable - here is an example with a broken hierarchy:



In addition, the tag

plays an important role in the formation of quick links in Yandex search results.

If everything works out, the effect of such seemingly insignificant and easy work will not be long in coming.

And if you have any difficulties, contact our specialists, we are ready to check whether the headings on your site are written correctly, write them correctly in case of errors and answer any questions. Drawing up headings for 1 page (+ selection of 3 relevant keys) - from 450 rubles.

Hello dear readers. Today I want to pay special attention to the topic of headings in the h1 h2 - h6 tags, because... In the near future I am planning (as promised) several practical articles on editing headings in templates. But before mastering anything in practice, I think you need to understand the theory, even if not to know it. Let's define the concepts from the very beginning, what a title is in HTML documents, a title on a website, a page.

You and I all know the Russian language, and as for the generally accepted concept title– there should be no questions. A title is a word or phrase that summarizes the entire meaning of some text or information that comes after it.

Just as any book begins with a title, so any document on the Internet has its own title.

But if, when opening a book, we understand that this phrase is a title because it has a larger or bolder font, then Internet pages have slightly different rules. On the Internet, the word title has several meanings and is used for different purposes. Therefore, you need to know and understand what kind of heading we are talking about and what exactly you need.

The first and most important thing we need to understand is that there are three different concepts of a header in an HTML document.

Any document includes three main HTML tags:

Here you can find technical information about the document +
page title in tags



Here is the main content of the site, articles that have titles in the tags:

Title of the site or article

Article title

Subtitle of the article

Other blocks of information

Other blocks of information

Other blocks of information

So from the code above we see that HTML document has its own title , in which it is located Technical information, here are also meta tags, and one of the most important tags in SEO -