How to use H1 and H2 headings correctly when optimizing texts. Optimizing text for keywords: heading design rules Use in practice
How to optimize a page using the html heading of the first level H1? How long should it be and how many H1 tags can be used on a page? Examples of good and bad headlines. Read more about everything in this article.
H1 is the base title of the first level page. There are only 6 headings in the Html markup, showing the importance of the blocks below them. The most important heading is H1, the least important is H6.
By default, heading styles are different: H1 has the largest size, then descending, respectively, H6 is the smallest of the headings. The visual difference in display is made for users who visit web resources. For robots, syntax matters.
H1 header syntax
In the HTML code of the page, the H1 header is usually placed within the body pair tag as close to the top of the page as possible. It looks like this:
H1 - basic heading of the first level
An example of using the h1 tag on this page:
H1 is a pair tag. Text between the opening tag
and closing tag
and is the first level heading. Headings H2-H6 have a similar syntax.
Important! Headings H1-H6 should have a hierarchical and semantic sequence. A third-level heading should not contain a block with a second-level heading, just as a fourth-level heading should not be inside a block with a second-level heading.
A simple example of a proper hierarchical header structure:
Popular cat breeds in Russia and the USA
Cat breeds in Russia and the USA
Introduction
Cat breeds in Russia
Text about cat breeds in Russia
Russian blue cat
Text about Russian blue cat
Siamese cat
Text about Siamese cat
Cat breeds in the USA
Text about cat breeds in the USA
Maine Coon
Text about the Maine Coon breed
You can learn more about the hierarchy and structuring of the page using headings in the HTML5 specification.
What is the H1 heading for?
Headings as a whole are necessary for the correct structuring of the document. Compliance with the structure of the web page is necessary both for users who visually perceive information on the site, and for search engine robots. For the former, a clear page structure is the key to ease of perception of information, for the latter, headings and blocks under them are of semantic importance.
The title of the page, unlike the tag, is visible to all users of the site. H1 is a semantic generalization of the content of a web page.
H1 Header Features
The first level heading is a block element that always starts on a new line. It is bold by default and has its own distinctive features that are not inherent in other lower-level headings.
What to write in H1?
As mentioned earlier, H1 is the first level heading both visually and in terms of meaning. The base title should reflect the content of the entire page, not just parts of it. H1 should not duplicate the title tag, but like the title and description should contain the main keyword of the page. The H1 tag has a high chance of being in the title of a dynamic snippet, so duplicating the H1 and title is bad practice. In this way, you narrow down the variability and relevance of your snippet for low-frequency queries.
The main requirement for H1 is relevance to the content of the page. The title, in addition to having a keyword, should attract attention and be interesting to the user. An example of a correctly composed H1:
H1 heading size and length
Let's start with the size. In many SEO blogs, you can find information that the H1 heading must be visually larger than the rest of the headings, otherwise search engines will consider this content as non-optimized content, and the site's position may decrease in search results. Does this information have an objective basis? No. Neither in the HTML spec nor in the reference information of search engines will you find data reflecting the importance of visual heading styles.
What's more, many beginner optimizers mistake the largest text for a first-level heading, which is often not the case. Here's a great example:
At the request "Buy men's jeans" in the TOP-5 of Yandex results (at the time of writing), there is one of the leaders in E-commerce online store Lamoda.ru. The screenshot shows that the first level heading "Men's Jeans" is much smaller than the descriptive block.
, and other text elements placed on the page.
Visual display is a matter of usability, while semantics is a matter of search engine optimization. Do not confuse these two concepts. In your particular project, you should be guided by common sense, the aesthetics of the resource and the convenience of presenting information to users.
Length H1 is recommended to be no more than 60 characters, as search engines take into account their limited number. If you can't fit this limit without losing the meaning of the title, write a title longer than 60 characters. Ideally, you should stick to this figure, since H1, as mentioned earlier, can be used when generating a dynamic snippet. And the displayed length of the title (link) in the snippet is limited.
How many H1 headings can be on a page?
If you find inaccuracies, or you have comments on the article, please write in the comments.
How to properly use headings H1-H3 on the page in terms of SEO? There are a number of rules regarding the hierarchy and content of H1-H6 headings, the observance of which has a positive effect on the promotion of the site.
To predict how search engines will evaluate the use of headings on a page, you need to clearly understand what they serve. Users are more comfortable and easier to perceive well-structured content. The text should be divided into logical blocks and equipped with pictures, where necessary - lists and tables.
Headings are used for such blocks, which in turn consist of paragraphs. You need to try to make each paragraph a logically complete thought. Let's turn to the diagram that best demonstrates the correct hierarchy of H1-H3 headings on the page:
The H1 tag should only be used once per page. The rest of the headings should display the logical hierarchy of the page. H2 headings will be H1 subheadings, while H3 headings will be H2 subheadings.
As for the headings H4-H6, they can be used for blocks with non-basic, additional, information on the page. Or they may not be used at all. The content of lower-level headings, obviously to a lesser extent, affects the relevance of the page in the eyes of search engines.
The following diagram demonstrates the violation of hierarchical header nesting:
In general, html documents should not only have a logical structure, but also have semantic markup. This means using tags for their intended purpose. Do not use them to decorate the page. The logical structure and markup allow search engines to easily determine the semantic parts of the page, and it ranks better.
H1-H6 tags in terms of SEO
If the HTML standards allow some liberties regarding the use of tags, then from an SEO point of view this is unacceptable. H1-H6 tags should not contain other tags inside themselves, such as B, Strong and others. Some time ago, a Panda filter was applied to my site, the main reason for which, in my opinion, was not following this rule.
From an SEO perspective, H1-H6 tags should not have CSS classes. Search engines perceive the class of H1-H6 tags as an attempt to manipulate. It is understood that you reduce the font size of the headings and use them for other purposes, but to increase the relevance of the page. The way out is: use CSS, but without classes.
As for the generic id attribute, it is used as an anchor in HTML5. If the identifier is the only one not only on the page, but on the entire site, then apparently the attitude towards it will be more loyal.
Links within headers are also not allowed. The HTML5 specification allows the opposite situation: you can put in the A tag the entire block consisting of any elements except the A tag itself: heading, paragraph, image, Span line elements. Perhaps in this case, this is also acceptable.
Keywords in H1-H6 tags
Now about the presence of keywords in the H1-H6 tags. Of course, they must be present in the headings. It is necessary to follow the general rule for all keys on the page. The closer they are to its beginning, and to the beginning of the containing element, the higher their weight will be.
Pay attention to the gradient background of the illustrations for this article - it displays the importance of the keys on the page. Where the color is darker, the weight of the keys will be higher.
Let's look at the document hierarchy again. More important key phrases should be in H1, and less important keywords should be in descending order: in H2, H3. But what about the Title tag? It's best not to make the Title and H1 tags identical, but it's a good idea to have the main keyword in both.
Some of the words from the Title, which are not included in H1, can be "spread" to other titles. They may also repeat some words from the main key phrase. You will get “diluted” keys that will drive traffic for low-frequency queries. But do not abuse such repetitions, no more than 2-3 per page, otherwise you will run into sanctions for re-optimization.
Now about typical mistakes, and let's summarize. Do not list keys in headings separated by commas, use punctuation marks to a minimum. You should not stress on one high-frequency keys. The best would be a short title that displays a logically expressed thought.
Don't forget about the uniqueness of the titles on the scale of your site, and preferably the entire Web, although this is difficult to achieve. The mistake will be their excessive use, when there will be one “thin” paragraph under the heading, and then the heading will follow again.
Often, novice webmasters are tormented by the question of why some sites rank higher and outperform competitors in search results. The reason for this may be incorrectly placed h1 , h2 ... h6 tags. If these tags are placed incorrectly, without taking into account the specifics of the resource, then it is more difficult for search engines to get accurate information about the articles and the keywords contained in it.
Tags h1 -h6 allow you to highlight the headings of different levels. They make it clear which parts of the text more accurately reflect the topic of the article and provide a ranking advantage.
Proper tagging allows search engines to more accurately display the page for queries in the search results, which favorably affects the position of the resource:
Why do we need h1-h6 tags?
The tags contain the site name, headings and subheadings of the text:
In HTML, heading tags are denoted by h from the English "header", which means " title, header". Here is an example of what it looks like:
header
Heading tags should be placed on each page of the resource. At the same time, the importance of the title will be envy of its number, the smaller it is, the more important the title is:
- the most important tags
- less important tags...
- last most important tags
However, their placement should be treated with caution. Misuse may result in your resource being penalized by search engines.
Syntax of h1-h6 tags
Name of the text
Subtitle 1
...
Subtitle 2
Subtitle 3.1
...
Subtitle 3_2
Subtitle 3
The most popular tags are h1 h2 h3 .
How to use the h1 tag correctly?
By ignoring the h1 tag, webmasters are depriving themselves of such an important advantage as content optimization. On engines, it is often written automatically, but not always, and this fact should be taken into account.
The HTML h1 tag is the most significant of its kind. It contains the name of the site and the title of the article. However, it should not be confused with the tag
(<span>page title</span>). The title is displayed in the browser at the top of the screen on the left side at the moment when the resource page is opened. Title is written in the header of the page between <head></head>, while h1 -h6 are specified in the “body” of the page itself and are enclosed in tags <body></body>.</p>
<p>There can only be one h1 tag per page. If you specify several headings with the h1 tag, search engines may regard this as spamming, which in turn threatens with a ban:</p>
<p>Rules for compiling the main heading h1 :</p>
<ul><li>The tag should use the keywords used to promote the page;</li>
<li>Do not make the h1 heading too voluminous, a few words are enough;</li>
<li>The title text should be readable;</li>
<li>The h1 meta tag should not contain anything other than the text itself. If you want to make it stand out, put the codes outside the tag;</li>
<li>Before manually writing h1 , make sure the engine doesn't set it automatically;</li>
<li>The h1 content should correspond to the topic indicated in the title of the page;</li>
<li>When compiling h1, be sure to use the key phrase that the page is advancing on;</li>
<li>The content of the title should be unique, capacious and thematic. Don't make h1 a complete copy of the Title tag. It is important that unique h1 -h6 are written on each page of the resource, so avoid repetition;</li>
<li>You can not list key phrases in the title separated by commas. The content of h1 should be clear not only to search engines, but also to visitors of the resource.</li>
</ul><h3>How to use h2-h6 tags correctly?</h3>
<p>In addition to h1, tags h2 , h3 , h4 , h5 , h6 , etc. are used to arrange headings that are identified by search engines.</p>
<h4>h2 tag</h4>
<p>As a rule, it is used for the headings of posts in the feed placed on the main page or for subheadings in the article.</p>
<h4>Tags h3, h4</h4>
<p>Often, they are used to highlight the names of subheadings, categories and widgets in the sidebar .</p>
<h4>Tags h5, h6</h4>
<p>Designed for even smaller page elements that should be separated from the rest of the text.</p>
<p>The arrangement of headings h1 - h6 in different versions of the engines can be implemented in different ways.</p>
<p>Arrangement rules h2 -h6 :</p>
<ul><li>Heading structure. Heading hierarchy must be respected;</li>
<li>Font size. The lower the heading level, the smaller the font. Font editing is done in styles. But, as a rule, fonts have the correct sizes by default;</li>
<li>Title tags cannot be used together with other accent tags. In headings it is recommended to use keywords by which this page will be promoted in the search;</li>
<li>Unlike h1 , h2-h6 tags can appear multiple times on a page.</li>
</ul><p><body>
<h1>I'm the head of the hierarchy of titles</h1>
<h2>My kids</h2>
<h3>my grandchildren</h3>
<h3>my grandchildren</h3>
<h3>my grandchildren</h3>
<h2>My kids</h2>
<h3>my grandchildren</h3>
<h3>my grandchildren</h3>
<h3>my grandchildren</h3>
<h4>my great grandchildren</h4>
<h4>my great grandchildren</h4>
<h4>my great grandchildren</h4>
</body></p>
<ul><li>There should be no spam;</li>
<li>The composition of the text h1 - h6 should be done using synonyms and taking into account the rules of morphology;</li>
<li>The main keywords are best placed closer to the beginning of the heading;</li>
<li>Key phrases written in the headings should be found in the text of the page;</li>
<li>H1 - h6 tags should be short, concise and informative:</li>
</ul>
<i>
</i>
<blockquote class="bq-idea"><p>On my top information projects, first a specialist in the subject draws up the structure of the article (headings and subheadings), and then copywriters write the text on them.</p>
</blockquote>
<p>Structure is actually very important if you care about quality. And to make a normal structure, you need an understanding of how h tags work.</p>
<p>h1 is the main subheading in the article, which is usually placed above the text.</p>
<blockquote class="bq-vajno"><p>The first heading should visually be larger than the rest of the headings on the page.</p>
</blockquote>
<p>h2-h6 are small subheadings that are nested.</p>
<h2><span>What are headers for?</span></h2>
<p>For those who are not very in the subject, here is, in principle, a good video about the basics of compiling h1-h6 subheadings. If you don't consider yourself an expert, check out:</p>
<p><span class="JuB6WeW7bcU"></span> <span class="JuB6WeW7bcU"></span></p>
<p>And to consolidate the material a little weaker video:</p>
<p><span class="MlX8xFRRAXE"></span> <span class="MlX8xFRRAXE"></span></p>
<p>Headings are called upon in one phrase or even a word to highlight the main essence, the idea of the subsequent text. Usually, a person pays 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.</p>
<p>In code, the tag looks like this: <h1>, where the letter h comes from the word "header", which means "header" in translation. Each level is indicated by a corresponding number.</p>
<h3><span>H-tags through the eyes of people</span></h3>
<p>Subheading text is cleaner and easier to read. A 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. Headlines catch the eye, highlighting the main thing and giving the user the opportunity to analyze the material.</p>
<p>Tags h1, h2, h3, h4, h5, h6 allow you to create a kind of map for the reader, according to 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, perform any actions, then the work on SEO was not done in vain.</p>
<h3><span>H-tags through the eyes of search engines</span></h3>
<p>Search robots collect information from them for semantic analysis. Of particular importance for bots are the headings of the levels h1, h2, h3. Their inconsistent or incorrect use 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 in promotion. Levels h4, h5, h6 are less significant.</p>
<h2>Hierarchy of H-tags</h2>
<p>The main rule in the arrangement of headings is their hierarchy. It is not necessary that the tags go one after another in size, but it is unacceptable to use, for example, h3 in the text if you do not have the h2 meta anywhere, or use h6 without h5.</p>
<p>This is what the hierarchy looks like with proper nesting:</p>
<h2>What is h1 tag</h2>
<p>The h1 tag is the table of contents of the text (it's like the title of a book or the title of an article in a newspaper).</p>
<blockquote class="bq-vajno"><p>Each page should have one and only one h1 tag.</p>
</blockquote>
<p>In terms of attractiveness to the user, it is of paramount importance. But for SEO promotion, .</p>
<p>Title is also a title, but it is prescribed not only for people, but also for robots. It is not displayed on the page itself, but only in the browser tab and in the snippet as an active link to the site. In fact, title is an alternative, but the main title for an html document. If it is missing, then the search engine takes h1 as a basis and uses it in the sickle.</p>
<h3><span>Why h1 should be different from Title</span></h3>
<p>It's pretty important to understand that h1 and Title are different headings. And they must be skillfully combined accordingly. Here are the basics on this topic:</p>
<p><span class="U6ODRKPEJ_M"></span> <span class="U6ODRKPEJ_M"></span></p>
<p>Neglecting the rules of uniqueness and relevancy 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 placement of headings, their inconsistency with the content is punishable.</p>
<h3><span>Length requirement H1</span></h3>
<p>H1 is recommended to be more concise than the Title, not exceeding the number of characters more than 50. But there will be no disaster if the title is longer, when it is not possible to squeeze the whole point into the designated amount.</p>
<p>Special plugins for WordPress allow you to analyze the correct filling of all metas right in the editor.</p>
<h4><span>Rules for competent writing h1</span></h4>
<ul><li>Must be unique for the entire site and absolutely readable;</li>
<li>Doesn't repeat the title tag, but doesn't contradict it either;</li>
<li>You should not make it too long (you can make the title more voluminous);</li>
<li>Used only 1 time per page;</li>
<li>Relevant to the text and reflects the semantic essence of the material;</li>
<li>Interesting, attractive to the user;</li>
<li>You can not put a period at the end and it is recommended to use punctuation marks to a minimum.</li>
</ul><h4><span>Application of keys</span></h4>
<p>The main key phrases, first of all, should contain the title. But they should also be written in h1. And there, and there it is better to do it at the very beginning. But it would be better if the keywords did not duplicate each other in these two tags. You need to use different word forms or dilute occurrences in h1 and direct occurrences in title.</p>
<blockquote class="bq-istoriya"><p>Some take all the keys to the page and make up the structure of the articles from them. Keep in mind right away that without cool PFs, such a scattering of keywords by subheadings will be punished by the filter for overspam.</p>
</blockquote>
<h2><span>Psychological tricks for compiling an attractive headline</span></h2>
<p>The title should be catchy. Here is a video from Maxim Ilyakhov, media specialist, rector of the School of Editors and creator of the Glavred service:</p>
<p><span class="b7Cjj3KPEYg"></span> <span class="b7Cjj3KPEYg"></span></p>
<p>Here are a couple more "techniques" that are used when compiling headlines.</p>
<h3><span>Solution</span></h3>
<p>Remember that a person is always looking not for information or goods, but, first of all, for a solution to his problems, needs, needs. Operate exactly to the intended problem of the target audience</p>
<blockquote><p>An example of a successful headline: “Hair falling out? Stop the fallout in a week." <br>An example of an unsuccessful headline: "Can hair loss be stopped?"</p>
</blockquote>
<p>In the first case, we clearly identify the problem and offer a specific solution. In the second case, the problem is affected indirectly and the options for solving it are blurred.</p>
<h3>Intrigue</h3>
<blockquote><p>An example of a successful headline: “Revealing the secret of the most effective recipe for hair loss.” <br>An example of an unsuccessful headline: "The best recipe for hair loss."</p>
</blockquote>
<h3>Reception "exam"</h3>
<p>A sentence in this form challenges the reader to test himself.</p>
<blockquote><p>An example of a successful headline: “Are you sure that you are fighting hair loss in the right way?” <br>An example of an unsuccessful headline: "Do you know everything about hair loss."</p>
</blockquote>
<p>Of course, these are not all methods that help to influence the perception of a person and attract his interest. Read marketing books to read more if you're interested in the topic. By the way, the 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.</p>
<h2><span>Why h2-h6 subheadings are needed</span></h2>
<p>Tags from h2 to h6 are already located in the body of the article itself, structurally dividing it into thematic paragraphs, and in the HTML document code, highlighting its significant elements. They are also identified by search robots for semantic analysis of the page.</p>
<p>They are needed in order to hierarchically designate everything important and worthy of the user's attention on the page. Such a structure helps a person to quickly navigate the information and assess its compliance with their needs.</p>
<p>h2 - focuses the attention of users and search engines on the main content of the article. Shows the most significant in the text.</p>
<p>h3 - is a sub-item for the information that goes under H2, revealing it even deeper.</p>
<p>h4, h5, h6 - are defined as nested subheadings (reveal the essence of H2 or H3 in detail) and are used in the text as highlighting small paragraphs and significant words, as well as in the menu, sidebar and other components of the web document.</p>
<p>All h-tags must be within 50 characters.</p>
<h2><span>How to write h2-h6 subheadings correctly</span></h2>
<ul><li>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.</li>
<li>The higher the heading level, the larger the font should be. In WordPress, the default settings are usually set in such a way that the tags are automatically formatted in the correct form.</li>
<li>All h-tags must correspond to the content of the content, display the essence of the information.</li>
<li>It is unacceptable to use h1-h6 as anchors or active links.</li>
<li>You cannot write other tags inside the h tag.</li>
<li>Only text and punctuation marks are allowed in h-tags.</li>
<li>Subheadings should not contain overspam of keywords. Keywords are best used in title, h1, h2, and in smaller ones, such as h3, h5, h6, focus on detailed disclosure of the topic.</li>
</ul><p>If the page markup contains the title and the main heading H1, but the text of the article itself is not too large and does not contain subheadings, this is not a mistake. There are many pages in the TOP, where the content is almost a continuous strip, perhaps divided into paragraphs. It is possible to get into the leading positions without “witchcraft” over the markup of the text, placing more emphasis on . WordPress sites are well 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 visually pleasing.</p>
<h2><span>How to populate h-tags in WordPress</span></h2>
<p>h1 is usually filled in the field above the text in the post:</p>
<p>To make subheadings h2-h6, you need to select the necessary 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.</p>
<p>There is an even simpler way - you can type text in Word using the necessary markups and simply copy-paste the article into the WordPress editor. Headings selected in Word will automatically appear in the correct size. If necessary, you can correct them using the WordPress CMS editor tools.</p>
<p><b>HTML tags h1, h2, h3, h4, h5, h6</b>- these are six headings showing the relative importance of the block after the heading depending on the heading level h1, h2, h3, etc. <b>The h1 tag is the first level heading</b>, the h2 tag is the second, the h3 tag is the third, the h6 tag is the least significant heading of all. <b>Heading h1</b>- the second most important element on the page after the title tag (page title) and the most important tag of all H tags.</p><p><b>Using html h1 header tag</b> allowed on the page <span>no more than once</span> and by default, the first-level H1 heading is displayed in the largest (amongst other H tags) bold font. The remaining H heading tags have a smaller font size depending on the level.</p><h2>An example of using the h1 heading</h2><p><b>Headings h1, h2, h3,…, h6 - html tags</b> with a required closing tag. They belong to block elements and are always displayed on a new line. Elements following the H header also start on a new line without using <br />. Also, an indent is added before and after the heading h1-h6. When using the h1 tag and other heading tags, the use of the align attribute is allowed, which determines the alignment of the heading. By default, all h1-h6 html tags are aligned to the left (h1 align left), using the align attribute, you can align the h1 tag to the center (h1 align center) or to the right (h1 align right).</p><p>Also, it is undesirable to use tags inside H1, H2, H3,…,H6. Especially the sharing of H headers with html tags: STRONG, B, EM and A.</p><p><b>Tags h1,h2,h3 example:</b></p><p> <html>
<head>
<title>Headings H1, H2, H3
Article title
Introduction.
Article heading 1
Part of article 1.
Article subtitle 1
Point 1 of part 1.
Article 2 subtitle
Point 2 of part 1.
Article heading 2
Part of article 2.
Article 2 subtitle
Point 1 of part 2.
