How to set up smartphones and PCs. Informational portal
  • home
  • Windows 10
  • The h1 h2 h3 tags are all about headings and subheadings. Html headers (h1-h6 tags), html text formatting (strong, b, em, i, blockquote, pre tags)

The h1 h2 h3 tags are all about headings and subheadings. Html headers (h1-h6 tags), html text formatting (strong, b, em, i, blockquote, pre tags)

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.

  1. 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 the 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.

  1. 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.
  2. 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.
  3. 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 impact of headings H1, H2 - H6 on website promotion - has been revealed and you have found useful information for yourself. In case of questions - be sure to ask them in the comments, we will try to help.


Should H1 and TITLE be the same or should they be different? A long-standing question that always arises at every meeting where there are SEOs. Where he came from is difficult to say. Perhaps from the discrepancy between the recommendations of search engines and examples in the TOP10.

Arguments for different title tags and H1: they say, the search engine will “think” that we want to double use the meaning of the keyword, for which it will definitely punish 🙂
Arguments for the same tags: a quote in Yandex Help for Webmasters.

In order for the robot analyzing your site to be able to correctly highlight the most important sections and key pages, you need ... the text in the TITLE tag for key pages coincides with its title (with the page title highlighted, for example, with the H1 tag) and with the texts of links pointing to this page.

How, in fact, to make them the same or different? By and large - no difference. But there are a few things to consider.

- H1 and TITLE must overlap

If the title is about one thing, and H1 is about another, then it is more difficult for the search to determine which keywords the page is relevant to, and users will be in difficulty. Also, these pieces of code help search engines form special elements in a snippet, such as breadcrumbs or quick links. In other words, you don't need to make TITLE and H1 completely different. Let's see some examples (just as a demonstration, without preliminary analysis of semantics).

The site is a salon of Italian furniture in Moscow. Key queries: Italian furniture showroom, Italian furniture ...
TITLE: Salon of Italian furniture in Moscow. Buy furniture from Italy | Name-Salon

H1: welcome
Not an optimal option, since there are no promoted keywords at all in H1. Greetings can be written in the text.

H1: Exclusive furniture from Italy
Already better, since the tags overlap on the key "furniture from italy". But it may not be on priority requests.

H1: Salon of Italian furniture Name-Salon
Normal header for the main request, nothing superfluous.

As you can see, there is no point in making H1 and TITLE completely identical, but they should still overlap.

- H1 and TITLE are visible by users at different stages of interaction with the site

TITLE is often seen by the user even before going to the site. H1 sees already when it is on the page. In this regard, it is better to make H1 short and describe the essence of the landing page as much as possible, much depends on its purpose. As for the TITLE, in addition to the content of the keywords, it should motivate the user to click (transition). Otherwise, you can optimize text relevance, but not optimize the conversion in clicks and, accordingly, not receive all the traffic.

For example, the section on radio-controlled helicopters on the website.
H1: Radio-controlled helicopters (logical)
TITLE: Buy radio-controlled helicopters with delivery in Moscow

Here the word “buy” calls to action, and “delivery in Moscow” removes a number of questions before the click.

Information topic: how to weave bracelets from rubber bands
H1: How to weave elastic bracelets on a machine
TITLE: Elastic bracelets: step-by-step instructions and weaving patterns with photos and videos

"Step by step instructions and diagrams" not only expand the semantics, but also increase the likelihood of clicking on the title. A person looking for “how to weave” just implies step-by-step instructions from a photo, but may not include this in their request.

- TITLE pulls up on social networks

If the code is not additionally configured, then when users share a page on a social network, the title is taken from the title. If it is spam, then it prevents both the transition from social networks and sharing in principle. If it is just short, like H1, then this is also a bad option.

This item is most relevant for information and news projects. But some of them only work on social networks, so take an example from headlines like “This woman could no longer look at herself in the mirror. And here's what she did ... ”is not always correct for SEO. Just when composing titles, remember that they can get headlines on social networks.

- TITLE may contain additional key phrases

To promote the page not only by the selected mid-frequency phrases, but also by adjacent ones, as well as a large pool of low-frequency phrases, you can add some words from the core to the title. Accordingly, this will distinguish it from the H1 tag.

For example, we have a pool of requests: installation of bituminous tiles, installation of flexible tiles, instructions for installing tiles, technology of installation of tiles, technology of laying bituminous tiles, laying of bituminous tiles, installation of flexible tiles, video, etc., etc.

H1: Installation instructions for flexible shingles
TITLE: Installation of flexible tiles, laying technology. Price, video

Here, the title and H1 are completely different, they intersect only with a few words (installation, bituminous, tile). There is no point in inserting all words from the core into the title or into H1, it will look spammy, and dividing words into code sections (including other headings) is a good strategy.

Absolutely everyone knows what a headline is. This is a capacious, attractive title, in which, with all its brevity, lies the essence of an entire publication, article, etc. But the heading on a site page is not quite 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 heading of the first level. Each page on the Internet has its own structure. Headings H1-H6 just allow you to properly structure materials, both for search engines and for users. H1 - main heading, H2-H6 secondary, nested subheadings. In the code, the headers look like this:

the title itself

, the number just denotes the heading level.

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

Condition 1. Keywords in titles

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

When placing keywords, do it carefully: do not overuse keywords and do not create spamming headers (for example, buy an apartment Moscow, buy a refrigerator bag, buy a motorcycle Krasnoyarsk price, mine is yours not to understand, etc.). Maintain the beauty of the phrase and its consistency. In the great and mighty Russian language, words are conjugated and bowed, and robots now understand the meaning, understand the language no worse than you and me! And do not often - spam is obvious to everyone, and Baden-Baden is just a stone's throw away, well, don't forget about Panda from Google.

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

From the main heading it is clear which product will be discussed. Of course, in the first paragraph you can't do without a key, but do it unobtrusively, and not so openly and aggressively.

Well, I hope that no one will ever think of cramming all the keywords intended for one page into the headline. Obviously nothing good will come of it. =)

Remember that text is not only created for search engines, but also for people. In general, robots like human, simple and understandable texts. If in the title the keywords organically appear at the beginning of the sentence, then it will work a little better. Those. from the point of view of page optimization 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 -

-

... Now people do not read large texts, and even based on the logic of things, nesting such a number of headings is not needed. 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 dimension and significance of tags.

-

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

Links in titles should not be used, especially in

: this will take the person away from the page to another material or, if you link to the same page, create a circular link that does nothing good.

Allowed to link from level headings

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

Search engine crawlers attach great importance to headlines because they are used to indicate important information. So it will be easier for machines to read the text and understand its structure, logic; see what is most important. Don't try to cheat and use tags

-

for all the text on the page, because there will be no sense from this. Robots are not fools, and in general they are very vulnerable - they can take revenge for this with something unpleasant for your site. So think seven times beforehand, the consequences are dire. When writing headings in the text, adhere to the following rules:

    We put things in order. Tags

    -

    are arranged according to the principle of hierarchy: tag

    more important than the tag

    ... In fact, 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 younger son cannot be born earlier than the older one. This is not permissible - here is an example with a broken hierarchy:

    Also, the tag

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

    If everything works out, then the effect of such a 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 if the headings of your site are spelled out correctly, correctly register in case of errors and answer any questions. Compilation of headings for 1 page (+ selection of 3 relevant keys) - from 450 rubles.

Igor... Update: Oct 6, 2012.

Hello dear readers! I continue to publish in the section and today's post will be devoted to the formation of html headings (h1-h6 tags), as well as ways to format html text by highlighting the necessary words or phrases (strong, b; em, i tags) and text fragments (blockquote, pre tags) ...

I must say that these tools are very often in demand in the work of a webmaster, so I thought it necessary to talk about them, especially since the correct use of the above html tags contributes to the successful promotion of the project. Generally speaking, all the information that I offer is very important, its volume is thought out, so try to familiarize yourself with it as closely as possible, I try not to give anything superfluous.

This applies to both this section on basic html and other headings. Within the framework of this heading, we have already considered the concept, as well as the definition. Let me remind you a very important rule: block tags can contain other block elements, however, it is strongly discouraged to place block tags inside inline tags.

H1-h6 heading tags

I'm sure many of you have come across h1-h6 heading tags many times, however, perhaps some underestimate their importance from a seo perspective. The fact is that these tags play an important role in the case, and I will try to touch on this aspect too. The h1-h6 elements are named after the capital letter of the English word "Header". The syntax for headers in the html code is as follows:

H1 header content

H2 heading content

H3 header content

H4 heading content

H5 heading content
H6 header content

Writing this piece of html code when displayed in a browser, we get:

The highest level is 1, the lowest is 6. Thus, any text can be classified in terms of its importance. H1-h6 tags are block-level tags, so the heading they define takes up as much space as possible. However, even though these elements are block tags, they must not contain other block tags, only inline tags. If we are concerned with the optimization of articles and the entire resource as a whole, then there are several recommendations:

  • the most important from the point of view of ranking by search engines, respectively, they are most in demand and often used. It is recommended to use the heading of the h1 tag once on the page (usually it is located on the page with the article as the title of the post, I have a bit of a problem on my blog so far, but I'm going to fix the situation). The h2 heading is used for subheadings if the material is large and needs to be divided into logical parts, h3 - for subheadings of logical fragments of these parts; in addition, h2 and h3 are allowed to be used on the home page and category pages.
  • Tags h4, h5, h6 are rarely used, since they are poorly taken into account in the ranking. However, if the article is large and it is necessary to highlight some fragments for the convenience of the readers, then they also come to the rescue (for example, in a voluminous manual in each of the parts defined by the h3 element, it is required to select logical chunks with a subheading h4). In addition, the h4, h5, h6 tags can be used for the names of any blocks in the sidebar, footer (footer), etc.
  • It is advisable to use the headings h1, h2, h3 without fail. Of course, I did not analyze the severity of search engines when this rule is not followed, but it is logical to assume that this is taken into account when ranking.
  • It should be added that the content of headings, especially h1-h3, must necessarily include keywords determined by, since search engines attach great importance to keywords and phrases.

Well, of course, the use of html heading tags, and this is the main thing, makes the material more user-friendly. As for the align attribute of h1-h6 tags, now I will not talk about it, since it is not recommended for use according to the rules of the html specification. We'll talk about how to diversify the look of your subheadings by using acceptable methods that won't break down as we start exploring.

Formatting text using special HTML tags

Text formatting is the choice of means to change it, such as editing a font or using a variety of effects. In many cases, their correct use contributes to the promotion of the site.

Logical and physical formatting - specifics of using each of them

Let me point out the difference between logical and physical (visual) formatting tags. The physical is intended primarily for users, which allows them to highlight important sections of the text for them. The logical one focuses on the selected text for search engines, which take this site into account when ranking.

The most striking examples are strong and em, which are logical formatting tags, and respectively b and i are physical formatting tags. There is no visual difference when displaying text framed by strong and b (bold), em and i (italic) tags in a browser:

Bold text for search engines Bold text for users Italicizing text for search engines Italicizing text for users

Rumor has it that the value of the strong and em tags has seriously dropped recently and search engines are now paying little attention to them. However, I still would not advise to get carried away with their use, marking keywords with them, especially since there is a reasonable alternative in the face of the em and i elements.

What other tags are there to format text content

Now a few more words about other text formatting tags that are rarely used, but are still needed since they exist. Perhaps this information will be useful to someone. As usual, I will mark only those tags that correspond to the html 5 specification. Let's start with the physical (visual) formatting tags (the b and i tags are discussed above).

  • Small - serves to decrease the font size by one, when compared to regular text.
Seo optimization sites, blogs, portals.
  • Sub - the text is displayed as a subscript
  • H 2 O - chemical formula of water
  • Sup - display text as superscript
  • X 2= Y - mathematical formula

    Of course, these are just some of the physical formatting elements, but I chose only those that are valid in relation to html 5, it is recommended to replace the rest with css styles, which I will introduce you to shortly. Below are examples of logical formatting tags.

    • Abbr - Indicates that the given character sequence is an abbreviation. The abbreviation is deciphered using the attribute title and pops up when you move the cursor over the text.
    Html - hypertext markup language

  • Cite - used to highlight quotes Tommy Dewar Sometimes a step forward requires a step back.

  • Code - used to display various codes, for example, script code
  • (function () (var request, b = document.body, c = "className", cs = "customize-support", rcs = new RegExp ("(^ | \\ s +) (no -)?" + cs + " (\\ s + | $) "); request = true; b = b.replace (rcs," "); b + = (window.postMessage && request?" ":" no- ") + cs;) () );


  • Del - Highlights text by strikethrough. This is very useful when you want to mark text that has been removed from a new version of a document. The use of this tag allows you to keep track of changes that have been made to the text.
  • Still there were no updates blog
  • Ins - highlights text by underlining it. This indicates that this piece of text was inserted after the document was published.
  • Still there were no updates blog, but now this flaw will be corrected
  • 1 bulleted list item
  • 2 bulleted list item
  • 3 bulleted list item
  • The above tags of logical and physical formatting are often not found when writing html code, however, knowledge about them is necessary at least to clarify their role in modern website promotion. Next, let's look at two more html text formatting tags that play an important role.

    How to insert a quote using blockquote and highlight a text fragment using pre

    The html blockquote tag is used to format text by highlighting quotes within a document. It is quite common and is often used when writing posts on websites and blogs of a certain topic. Here's an example:


    The blockquote tag is paired and can include both block elements (such as the p paragraph tags) and inline elements.

    A paragraph of text enclosed in a p tag

    A paragraph of text enclosed in a blockquote formatting tag.

    It does not have a set of unique attributes, but it can be applied to it. In each theme, the design of a quote in the text can be different, it depends on the style and design of the template, which is determined by the css styles, which I have already mentioned many times and which we will definitely get to in the near future.

    Well, and finally, about one more formatting element that is quite often in demand - pre tag... This element allows you to display a piece of text that has been preformatted directly in the html code. Feature of display in the browser by default is that any number of spaces that go sequentially are transmitted on the web page as one. The pre tag helps to bypass this specific feature. That is, the way you wrote it will definitely be reproduced on the page if a piece of text is enclosed between the opening and closing pre tags.

    HTML formatting text using the pre tag pre tag - pair and block element

    The text will be displayed in exactly the same form in the browser:

    HTML formatting text using the pre tag pre tag - pair and block element

    Well, that's probably all I wanted to talk about today in relation to h1-h6 heading tags, as well as basic html text formatting elements. Continuation will surely follow, so be sure to subscribe to blog updates so as not to miss fresh materials. Well, in conclusion, after a long difficult article, smile as you watch our smaller brothers:

    Do you want to receive timely, relevant and useful articles? Then you can subscribe:

    More articles on this topic:

    34 reviews

    1. Sergei

      Thank you for the detailed article on a current topic, but questions immediately arise.

      First of all, headers, or rather, their direct use. I have met two opinions.
      1. the code should contain the name of the site, - the title of the article, - the subheadings. There must be only one tag on the page.
      2. - the title of the article and the name of the site, - subheadings.

      You use the first option, I use the second, but I cannot justify the choice on my own, since I was advised to do so.

      Another question is pot tag strong - again, there are rumors that PS are beginning to treat him not just indifferently, but hostile, more precisely, to the allocation of a key word or phrase to them. Alternatively, it is proposed to highlight the entire sentence containing the key.

      At some point, I abandoned this tag altogether, but it's too early to talk about the results.

    2. Sergei

      I'm sorry, I forgot that the engine strips tags:

      1. in the h1 code there should be the name of the site, h2 - the title of the article, h3 - the subheadings. There must be only one tag on the page.
      2. - h1 article title and site name, h2 - subheadings.

    3. Basil

      Igor, I just can't figure out where the H1 tag is. You and I have an image in the cap. You have this tag there. When analyzing my site with one service, as a result, they told me that I do not have an H1 tag on my site at all. How to insert it into the site header at all?

    4. Igor

      Sergey, a lot of what concerns seo is comprehended in practice through experiments. I cannot answer unequivocally at the moment, which is better, but no one can. There is no universal solution, it all depends on the topic of the resource and its promotion. But I understand your concern and desire to comprehend the truth. As soon as I have certain data for each item, I will immediately post them in the publication. As for the strong tag, in my opinion, highlighting keywords or phrases once in an article should not do any harm, all this is unnecessary hype.

    5. Igor

      Exactly. 🙂

    6. Igor

      Vasily, I wrote the title in the theme functions right in the admin panel. Appearance - Themes, for my theme there are many options with which you can edit a particular area of ​​my theme, including entering a title. And you, as I understand it, changed the original header of your theme, didn't you? Moreover, they completely changed the image, and the image already had the name of your resource. You didn’t put h1 in the cap, where does it come from. Take a closer look at the functions of your theme, maybe there is a similar function there too. Where "Themes management" look, there should be links, something like "Customize", "Theme options" and already there look for a link like "Site name and description". In my theme, for example, you can change a lot, even the site colors and header, by uploading a new image. Unsubscribe in the comments how it happened.

    7. Basil

      Yes, I changed the image in the header. On the test site, returned the original image. Anyway, I did not find H1 anywhere. Put a very similar twin theme, there is no this tag either, only H2. Could there be threads without an H1 tag? Then I put the standard theme, I did not find this tag on the main page, but on the page the H1 tag is in the title of the article. I don’t know how to add it to the header of the site.

    8. Igor

      Vasily, read my previous answer more carefully and try to write the name of the site through the admin panel. There should be a theme management function, you have styles for the h1 heading written in your css, I looked.

    9. Basil

      The standard theme has everything. There are no such options in the settings of the theme itself. Across
      Admin panel -> Themes -> Customization and description of the site. There I wrote the Site name and
      Short description. But there is still no h1 tag. On the test site, I re-installed this
      topic, here is the address http://komp.vellisa.ru/. You can go through Yandex, as it is closed
      from indexing. Previously, when I wrote the name of the site in the Admin panel, it was added to the header, but it didn’t look pretty. For some reason, inscriptions are not being added now.

    10. Igor

      Vasily, I researched your problem. The fact is that according to the css styles of your theme, the title enclosed in h1 tags simply does not fit into the header. Try the following. If you are working with the Chrome browser, move the cursor to the image in the header and right-click, from the context menu select "View element code". In the lower half of the window, you will see the html code of this particular image, this line will be highlighted in dark blue. This link is to the header image of your topic. Styles for this element will be presented on the right. Right-click on this link and select "Delete node" from the context menu. See the item is gone? I hope you understand that after restarting the browser everything will fall into place, so you can experiment as much as you like. You have this element in a container<_div class="span-11">... After removing the link to the images, the link to the main page will remain. As an anchor for this link, write any word enclosed in h1 tags, for example, World. That is, it will look something like this: a link to the main page enclosed in a span-11 container<_a_href vellisa.ru_=""><_h1>World<_><_>... And immediately you will see this word in the place of the image (which, by the way, is not needed, since there is the name of the topic, as I understand it. Try instead of this image, upload a smaller picture and again try to write the name of the site through the admin panel. If it does not work out, we will act more substantively.

    11. Basil

      Igor, thank you very much for your help. I deleted the element, then how to insert it is not very clear. By typing, I inserted this word, it didn't quite work out, but the word was there. Changes to the name of the site cannot be written, I change it, but nothing is displayed in the header.
      In general, it is possible to make sure that I have an image on the main site, what is there now and somehow add h1 tags?

    12. Igor

      Vasily, a little patience, now too busy, as soon as I solve the problem, I do not promise, but I will try to help, I will post the answer in the comments.

    13. Basil

      Thanks Igor. Of course I will wait, this is not an urgent matter.

    14. Evgeniy

      I agree that tags are a necessary thing and ignore them is my own dear. If H1 H2 almost automatically appears on the page (title of the article and site), then H3 should be written with pens in the body of the article.
      At the expense of the attribute align to these tags a controversial option. I have not noticed its influence on promotion yet, rather it is not. there are no violations from the side of validity either. So I guess it's up to everyone.

    15. Igor

      Eugene, there really is no influence on the promotion of the align attribute, but as far as validity is concerned, you got excited. It is not recommended for use not only in accordance with the html 5 specification, but even in accordance with html 4.01. Instead of this attribute, it is recommended to use the similar property text-align, which is written in css.

    16. Igor

      Vasily, I'm sorry I had to wait a long time. I just unloaded a little and now I solved your problem. Follow my further instructions to have the H1 header appear in the header. First you need to edit your header image. You have it here: http://vellisa.ru/wp-content/themes/cooltext643525798.png, that is, in the folder with the current theme. Download it to your computer using eg. Open it in any graphics editor, even a simple paint program will do. There, erase the inscription "vellisa.ru" with a simple eraser. If this is not done, then there will be a double inscription, or the inscription with h1 will be superimposed on it, it will look ugly. Then open the header.php file with notepad ++, which is responsible for the header, find the line there.

    H1 tag or H1 heading Is the first level heading and it has the most meaning and importance of all headings. H1 tag must be applied once per page, positioned above all other headings, and in the largest font size.

    There are six heading tags in total. These are h1, h2, h3, h4, h5, h6. These tags are used to format text on a page. H1 is the most significant among them both for the visitor and for the search engines.

    Welcome to the pages. In this article, I will share with you some points when using H1 header on blog pages powered by WordPress CMS.

    H1 tag - value for promotion

    Search engines use the words and phrases used in this tag to determine the relevance of pages to a search query. This tag is one of the most significant elements of relevance. When optimizing page text, search engines only value the TITLE tag over the H1 tag.

    And to be more concise and specific, then the H1 tag is recommended for the page titles of our sites and they must contain the key phrase by which this page is being promoted.
    Page relevance, along with, is one of the most significant indicators for gaining search engine loyalty.

    Rules for filling in the heading H1

    To get a good result when promoting website pages, you should follow the following rules for filling it out:

    1. Each page must contain ONE H1 tag.
    2. The tag should contain one keyword that the page is being promoted by.
    3. The content of the H1 heading must be unique for each page.
    4. The H1 tag must not be a hyperlink.
    5. It is desirable that the tag does not contain classes, identifiers and other CSS elements, but is in a "naked" form.
    6. It is not recommended to use punctuation marks, commas, colons and so on in the content.
    7. The tag size should not be more than two sentences, one is better.

    In html-code, the page title should look like this:

    The H1 tag is the title of the page

    The most common blunders are the absence of an H1 tag on a page or the presence of more than one heading. Such errors are usually common on section pages that list the articles that are included in those sections.

    Control over the filling of the H1 tag throughout the site is carried out within the framework. There are many decent tools for conducting such an audit. I will recommend you a service from Megaindex - audit.megaindex.ru .

    H1 tag used in WordPress

    The theory was repeated and now let's dwell on some technical points related to the use of the H1 tag on sites using the WordPress CMS. Since most blogging beginners use free templates, there may be some flaws in them.
    In particular, there are options when the page title is highlighted not with the H1 tag, but with another tag, most often H2.

    The same flaw was revealed on my blog after I created it using Artisteer. When looking at the HTML code, it was found that all page titles are rendered with an H2 tag.

    To fix this, I had to edit the file single.php, this is what most templates name the files that display information for each individual record. How I did it now I will demonstrate clearly.
    In the body of the file single.php looking for a piece of code that displays the title. In my case, this one looked like this:





    Change the h2 tags highlighted in red to the required h1 and file single.php fixed and ready to use. It turned out to be quite simple, change a couple of symbols and you're done. Now this block looks like this:





    In your case, the expression may be of a slightly different kind, but I hope you understand the meaning.

    I had to make similar changes with another theme file page.php, which is responsible for displaying blog pages. As you know, a blog on CMS WordPress contains posts and pages.

    The functions for creating and modifying them are located in different sections of the blog administration, they are stored in different places and, accordingly, different program modules are responsible for their output.

    As a result, a piece of code in the file page.php, which displays the title of the page, looks like this:


    "Rel =" bookmark "title ="»>


    But that was not all, on my template I found that the H1 tag is used when displaying the title of the blog itself. And I had to decide whether to leave it as it is or to achieve the output of the page titles with the H1 tag.

    After all, the use of two or more headings of this type on one page is not recommended. Search engines can regard this as over-optimization and draw appropriate conclusions.

    H1 tag, WordPress template adjustments

    In the end, I decided to correct this flaw, especially since it did not bring much trouble. Now I will tell you about everything in detail.

    To do this, it was necessary to amend only two files.

    First header.php Is the output file for the blog header.

    Second style.css- a file describing blog styles.

    Header.php changes

    We find in header.php a fragment that displays the title of the blog and change the heading tag h1 (highlighted in red those characters that I change) to the paragraph tag p. As a result, we got the following code.

    Style.css file changes

    In blue, I highlighted the name of the css class, which we will have to correct in the file style.css so that the font and size of the blog title output remains the same as before the changes. Next, open the style file, search for the required class "art-Logo-name", the fragment below

    h1 .art-Logo-name, h1 .art-Logo-name a, h1 .art-Logo-name a: link, h1 .art-Logo-name a: visited, h1 .art-Logo-name a: hover
    {

    font-size: 29px;
    text-decoration: none;
    padding: 0;
    margin: 0;
    color: # E0EDF0! important;
    }

    I change all h1 highlighted in red to p and get as a result

    p .art-Logo-name, p .art-Logo-name a, p .art-Logo-name a: link, p .art-Logo-name a: visited, p .art-Logo-name a: hover
    {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 29px;
    text-decoration: none;
    padding: 0;
    margin: 0;
    color: # E0EDF0! important;
    }

    That is, in fact, all that I wanted to tell you about the H1 tag as one of the elements.
    I will only note that I carried out all the work on test subdomain so that visitors to my blog do not have any difficulties in the occurrence of problems that may arise with this kind of manipulation. And from the point of view of the safety and security of the site's functionality, this will be the right decision.

    In conclusion, I would like to suggest that you watch a short video, it is true, it was dubbed in English, but everything was clear to me, I hope it will be easy for you to figure it out. This video is a good addition to the text of the article and for beginners or those who are not good at programming it will be a good help. Happy viewing.

    On this I will allow myself to finish, and wish you success.

    Top related articles