Putting together the correct h1 and subheadings structure. Headings of articles H1, H2, H3 in WordPress, as well as ways of displaying categories (the_content, the_excerpt and others) How many headings with the H1 tag can there be on a WordPress page

Viewing 11 replies - 1 through 11 (of 11 total)

Probably we should start by reducing the size of the picture used in the title. What size image for the title does the theme recommend?

P. S. Personally, I do not see anything bad or ugly either on the computer or on the smartphone. It looks like you're just fixated on nonsense.

Thank you for your reply! Reducing the size of the picture does not lead to anything, just its quality eventually deteriorates (it is stretched to the same width). Maybe I got stuck, I just wasn't used to such a design, I wanted to understand how to change it

I may not put it quite correctly. Do not resize, but crop the picture - to make it smaller in height with the same width.

Doesn't the theme suggest cropping the image to the recommended sizes when setting the image for the header?

Picture height 225 pixels
Set in styles:
.inner-header-image (
position: relative;
height: 225px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}

Override this parameter in the additional theme styles and everything should work.

I put the Corporate Blue theme on my test site http://wp5.j807534.z9496.spectrum.myjino.ru I came to the final conclusion that you are engaged in nonsense. The theme looks great with just such a "large" header image on all devices. Don't break the topic. Better not. You are just used to old designs with narrow banners in the header.

2Spectrum_Admin (@perdyllo)
When you click on the specified link, Chrome issues:

Caution Malware!
The wp5.j807534.z9496.spectrum.myjino.ru website can install malware on your computer that steals or deletes personal information (for example, photos, passwords, messages and bank card details).
Automatically send information to Google about potential security issues. privacy policy

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 h1-h6 subheadings. 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, idea of \u200b\u200bthe 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 to attract 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 people's eyes

The text, broken into subheadings, looks more "neat", it is 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. 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 use h6 without h5.

This is what 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 an active link to the site. 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 falls 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 title 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 spelling h1

• Must be unique for the entire site and absolutely readable;
• Does not repeat the title tag, but does not contradict it either;
• Don't 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 per 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, 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 exactly on 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 affected and the options for its solution are blurred.

Intrigue

An example of a good headline: "We reveal the secret of the most effective recipe for hair loss."
An example of a bad headline: "The best recipe for 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 in the body of the article itself, structurally dividing it into thematic paragraphs, and in the code of an HTML document, highlighting its significant elements. They are also identified by search engines for semantic analysis of the page.

They are needed in order to hierarchically designate everything important and worth the user's attention on the page. This structure helps a person to quickly navigate the information and assess its compliance with their 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 information 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 paragraphs 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, putting more emphasis on. WordPress sites are perfectly indexed by search engines. However, 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 h2-h6 subheadings, 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 simpler way - you can type the text in Word, using the necessary markup and just copy-paste the article to the editor of Wordpress. The selected titles in Word will automatically appear in the correct sizes. If necessary, you can tweak them using the WordPress CMS editor tools.

Hello!

[Update: I recently wrote a more recent tutorial on pro, be sure to check it out too].

That is, in order to take the text into the h1 tag, we need:

1. Highlight the required text.
2. Where formatting is set (see the picture above) click on the drop-down list.
3. Find the item "Heading 1".

The situation is similar with the h2, h3, h4 and further tags:

The right WordPress titles for smart SEO optimization

The h1 tag is commonly used to specify headings. That is, ideally, as I believe, on the post page, the h1 tag should only be encountered once... I will say this: search engines attach the greatest weight to words in the h1 tag, then in the h2 tag, then h3, etc. decreasing. And since we set using keywords (I hope I'm right? You do this?), Then we simply have to give the title of the page or post an h1 tag (at least I do that).

How to find out the title of the page in the h1 tag or not?

As you can see, the title of the article is taken in the h1 tag (class \u003d "title" is also set there, ignore it). If you don't have h1 here, I recommend changing it. For this:

That is, you just need to register at the beginning

, and then

H2 tag

I usually use the h2 tag in an article 1-2 times. Why? Because, the more h2 selections, for example, then the less significant this tag for search engines. This is why you shouldn't overuse tags.

But note, using tags is not only beneficial for SEO optimization, but also improves readability for the LIVE reader. You not only "sniff" keywords, but do it beautifully. That is, dilute your keywords. Notice, for example, this post contains h2 at this point:

As you can see, this title includes one of the keywords of the lesson. “WordPress headers” (note, I also "shoved" this keyword here).

H3 tag

It is reasonable to use the h3 tag under the h2 tag. It is better not to cost brother text in heading 3 if there is no h2 tag in the post. That is, it is desirable to follow the logical chain. For example, in this lesson the words “h1 tag”, “h2 tag” and “h3 tag” are taken from h3. Again, they are keywords. I hope you understand the principle ...

Tags h4, h5, h6

The h4, h5, h6 tags are very rarely used, usually I don't use them at all. They can set some specific style properties. For example, the h4 tag will capitalize all letters, the h5 tag will change the color of the text, draw a border around it, etc.

To change these properties, just open the style.css file and, using the search, find there, for example, the phrase “h1”:

And already there you change the properties by applying.

Friends, don't forget to use WordPress titles in your posts, search engines will love you very much for that.

See you soon!

Hello dear friends. Today we will talk about a painful problem for me, namely, the h1 headers. In general, you already know that by installing a WordPress theme, you will also have to modify it to suit your needs. And this is normal, the design must be corrected, if it is necessary to combine design elements into , maybe the font sizes can be tweaked, but the listing can be long. So what's the problem?

What problems with h1 headers were on my blog

The bottom line is that all these improvements should not fly off when updating the theme. For me, as soon as I updated the theme, let's set everything up again. But the trick is different, the design elements are flowers, and the trash is that after these updates, the headers h1 and h2 are constantly changing places for me. Did you know that search engines do not favor sites where the h1 tag is absent or is used too often.

Here I will tell you a little more in detail. So, almost every WordPress theme has the ability to write a site title and description.

And also install the logo.

My theme also has it all. The title is written with the h1 tag, and the site description with the h2 tag. And if you install a logo, then it will be designated as a title and will be added to the h1 tag.

And everything seems to be fine - on the main page, the site title has an h1 tag, and the article titles have an h2 tag. But in the articles and pages, too, it was originally like this. And this is not one of my topics, in many WordPress themes the titles of articles and pages are spelled out in the h2 tag - which, according to SEO rules, is incorrect.

I corrected this moment - in articles and pages I changed the headings to h1, and the site title to h2.

But now the update has passed, visually I noticed only design problems. I fixed it and I don't worry about anything. After some time, another update took place and, in addition to the design, tree-like comments stopped working. Well, this is what I noticed visually.

Everything, I decided not to update the topic anymore, but to replace it completely. But there is no time yet. Until I do this, I need to deal with my current topic.

But after the last update, in fact, everything turned out to be worse - the h1 and h2 tags were replaced. More precisely, the image that I used as a logo, and which was enclosed in the h1 tag, - the tag just disappeared (on the main page). So on the main page there is no h1 tag left at all. But in articles and pages, the site title has acquired the h1 tag. And accordingly, the site title and the article title were marked with the h1 tag. Overkill!

And this confusion also influenced - the title of the site disappeared.

And therefore, to eliminate these shortcomings, I decided that it is necessary to display the site title with the h1 tag, depending on which page is being opened. And you need to do this bypassing the theme functions.

How to change the h1 heading tag based on conditions

For myself, I outlined such a logical order - if the main page, search results, archive, in general, any page, except for articles and individual pages, opens, then the site title should be indicated by the h1 tag.

If an article or a separate page is opened, the site title should be indicated by the h2 tag.

So, let's get down to implementing our plans.

As you know, in almost all themes the template consists of several blocks and such blocks as header (header.php), footer (footer.php), sitebar (sidebar.php) are connected as separate elements to the main page (index.php), articles (single.php), pages (page.php).

Therefore, the title and description of the site are in the header ( header.php). And you just need to write a condition that will change the h1 tag depending on which page is being opened.

To do this, open the WP admin panel - "Appearance" — "Editor" — "Header (header.php)".

You need to find a line of code with an h1 tag, in some cases it can also be an h2 tag. In any case, you need to pay attention to the contents of these lines. Initially, it was like this in my topic.

Site title.

">

Description of the site.

This is what needs to be tweaked. You can only add the micro-markup code to the site description, but we'll work with the site title.

So, before the line of code with the heading h1, insert this code:

This condition means: If (if) “not” (!) Article (is_single) and (&&) “not” (!) Page (is_page) are open, the site title will be indicated by the h1 tag.

And after the line with the h1 code, you need to close the condition, with this code:

As a result, you should get something like this:

">

And now, by analogy, add one more condition, right after the first:

">

This condition means: If (if) an article (is_single) or (||) page (is_page) is open, the site title will be indicated by the h2 tag.

Notice that I changed the title tag in the second condition from h1 to h2. You can also replace h1 with paragraph (p) or div, span blocks. It is important!

We save the file and check.

How it should be after the implementation of the conditions

On the home page, headings, search, and so on, the site title should be indicated by the h1 tag, and all article titles and so on, h2, h3 ...

When opening an article or a separate page, the site title changes to h2. If you changed h2 to p, div, span in the previous step, then you will have corresponding changes. Just don't forget to style these elements.

It is very important here to check in the files single.php and page.php that the titles of articles and pages are indicated by the h1 tag. If yours is wrong, open these files and fix the number.

Summarizing

With this solution, I got rid of the conflict with the heading tags h1 and h2 and restored the micro-markup to work. Just a couple of lines of code, and what a convenience.

Friends who have a similar situation, take it into service.

And at the end of the video tutorial on the topic. I'll show you on my blog how this method works.

And that's all for me today. I wish everyone a good mood and see you in new articles and video tutorials.