search
HomeWeb Front-endHTML TutorialHow to use h1 tags to better comply with SEO specifications

During the website optimization process, SEOers often use HTML tags to increase the optimization effect. The H tag is one of the html tags we often use. The H tag is a tag that emphasizes the text title in the web page, which can attract the attention of search engines. When the search engine accesses the web page for crawling, the H tag The content of the label serves as emphasis. In the SEO circle, many people think that websites should use H1 tags to promote keyword rankings. However, some people think that H1 cannot be used, which will cause excessive optimization, may also affect the appearance of the page, and will not have any effect.

Although the effect of whether there is an H1 tag on the page and whether there are keywords in the H1 tag is weakened in major search engines, the effect of the H1 tag still exists. The Google algorithm also points out that the text between the H tags must be more Articles in other places have more important meanings, but excessive use can easily have adverse effects. So we can definitely make good use of it, and there is no need to say that we should completely boycott it. So how should the H1 tag be used to comply with the principles of SEO optimization? 1. What is the H tag?

The H tag is also called the Heading tag. There are six sizes of heading tags in the HTML language. It is a tag that emphasizes the text title in the web page html, with the tags

,

, < ;h3> to define the seven tags of different text sizes in the title header, essentially to present the content structure. There are six pairs in total, with the text from large to small, showing the decreasing importance, that is, the weight decreases in sequence.

W3C points out that h1-h7 tags can define titles, h1 defines the largest title, and h6 defines the smallest title. h tags appear in pairs, starting with and ending with . h1, h2, h3, h4, h5, h6, h7 are used as title tags, in descending order of importance. It is necessary to follow this principle, which can make the hierarchical relationship of the page clearer and allow search engines to better crawl and analyze the subject content of the page, etc.

2. The use of H tags by major portal websites

Search engines are extremely sensitive to H tags. A well-used search engine will give it a very high weight, which can increase the keyword weight of the entire website and even bring in a large number of long-tail words. Indiscriminate use of H tags will not only not bring good weight to the website, but may also be considered cheating by search engines, eventually leading to K sites. Therefore, it is crucial to use the H tag well.

1. Usage of H1 tags

(1), NetEase homepage

The H1 tag appears only once in front of the LOGO on the NetEase homepage. The text content is NetEase, but if you look carefully, you can see that the H1 tag this time is to highlight the brand keywords. It is purely for search engines to see and is hidden from users.

(2), A5 webmaster network homepage

The homepage of A5 Webmaster Network was only used once, for the website LOGO. ​

(3), Webmaster’s Home Home Page

The homepage of Webmaster Home is only used once, also for the LOGO.

From the screenshot above, Ma Haixiang found that the H1 tag is only used once on the homepage of major websites, either in the brand keywords of the website or directly in the LOGO. Directly using H1 tags in web design may produce unsightly effects, so many people use CSS to hide them. Or add the H1 tag to the website’s LOGO. This not only emphasizes the main keywords and enhances relevance, but also does not affect the aesthetics. On the content page, it is also used once, usually to strengthen the title of the content page again.

2. Usage of H2 tags

(1), NetEase Home

From the screenshot above, Ma Haixiang found that it appeared 7 times on NetEase's homepage, some of which were article titles, and some of which were simply bold.

(2), A5 webmaster network homepage

There are only 8 words in A5 Webmaster Network, all of which are article titles on the homepage. As for Webmaster Home, there is no H2 tag. From the picture above, Ma Haixiang can find that the H2 tag is used more frequently on major websites. It is mainly used in the main article titles or column titles of web pages. Some even use it directly to bold, but use H2 to bold and emphasize the effect. It is definitely stronger than the strong tag. You can take a look at the following H3, H4, etc. through the articles on Ma Haixiang's blog. Because they are not too important, I won't say more here.

3. The role of H tag

Each tag in html has its own meaning, and the H tag, as a title tag, is even more important. The usage of H tags, especially the usage of h1, has always been a controversial issue.

1. The H tag intuitively tells users which parts of the web page are important and which parts are not so important. The heading tag is usually used to show the structure of a web page to users. Since the heading tag usually makes some text larger than ordinary text, it is easier for users to see the importance of these words more intuitively, and it can help them understand The content below the heading text. Headings with multiple gradient sizes initially create a hierarchical structure for the content of the web page, making it easier for users to browse the website intuitively.

2. The H tag guides search engines to determine the important content of the web page. For search engines, the main meaning of the tag is to tell the search engine that this is the title or theme of a paragraph of text, which plays an emphasis role. The weight of the h tag will be higher than Strong, so in search engine optimization, the H tag The use of is very important.

Because the search engine needs to understand what it is writing in a pile of text, so it also follows people's reading habits and first looks for the title of the article. However, unlike people who can quickly determine what the title is, the search engine is " "Blind people", so using the tag directs search engines where the title is, allowing them to quickly grasp the gist of the text.

The title (H1-H6) tag is an important place to use keywords. This tag should include the most important keywords in the text. The Google algorithm points out that the direct title text of and must It has more important meaning than articles in other places, but excessive use can easily have adverse effects. For more information about Google’s algorithms, you can learn more about it through Ma Haixiang’s blog’s “Inventory of Google’s Updates and Improvements to Search Engine Algorithms Over the Years.”

4. How to use H1 tag?

1. It is best to use the H1 tag before H2-H6, and only use it once on a page, do not use it all the time. Some sites use a lot of keywords on one page, even dozens of times. They use keywords when they see them, thinking that they can enhance the effect, but this is not the case. H1 can be used but don’t overuse it. We stack it effectively instead of forcing it randomly. Reasonable use of H1 tags can bring good results to the website, but improper use will bring adverse effects to the website, and even lead to K sites.

2. The keywords used in the H1 tag should be the most important keywords or brand words on the page, and should be the keywords used in the title of the web page. H2-H6 decrease step by step according to this principle, from general keywords to long tail keywords, from long tail keywords to titles, but generally H3 is used less after that. , because H1 represents the most important, H6 represents the relatively least important, and the meaning becomes less and less as you go to the back.

3. Keywords must be included between H1 tags, but this keyword also needs to be readable and reasonable. Don’t add this keyword for emphasis, but because this keyword needs to be emphasized. Add H1 tags, pay attention to the order. First have the keywords, and then add H1 tags to the keywords.

4. If you add the H1 tag to the LOGO image, the website name or brand word should be added to the ALT information of the image, so as to highlight the keywords on the homepage. Otherwise, what effect do you think will be achieved by adding H1 to an image?

5. The H1 tag should be as close as possible to the body tag in the HTML, the closer the better, so that search engines can find the topic as quickly as possible. From the above example, Ma Haixiang can find that the H1 tag is at the front of the body code. Why? Because search engines crawl from top to bottom, the keywords emphasized by the H1 tag can be discovered as quickly as possible.

6. The H1 tag on the content page is generally used in the title of the content. It is best to use it only once. However, many content pages also use it twice, once for the LOGO or the main keyword that appears at the front of the web page, and once for the main keyword that appears at the front of the web page. Used in headlines of content. If there are no main keywords at the beginning, it is recommended to only use them once in the headline.

7. When you don’t want to use the H1 tag on the LOGO and the main keywords of the webpage are at the back, if you still want to add the H1 tag and want the keywords of the H1 tag to be in the front, Ma Haixiang suggests that you can use DIV+CSS layout to adjust the main key. The position of the word will not affect the page effect.

8. Don’t always think about adding H1 tags. Many large websites do not use H1 tags. Baidu, Sina, Aizhan.com, etc. do not use H1 tags at all, so as long as they really provide users with information, as for It is not necessarily necessary to use the H1 tag.

5. SEO suggestions for using H tags

1. Each web page can only have one

tag.

2.

is used to modify the main title of the web page, usually the title of the web page, the title of the article, and the main keyword is placed in

.

Try to be as close as possible to the tag in the HTML, the closer the better, so that search engines can understand the theme as quickly as possible.

3.

represents the title of a paragraph, or subtitle, and deploys long-tail keywords.

4.

represents the section title of the paragraph. The effect of

is similar to Strong, and is generally used in paragraph sections.

5.

-

are rarely used. They tell search engines that these are not very important content. When an article has a lot of content, it can be used to indicate that some content is not very important.

The above is the detailed content of How to use h1 tags to better comply with SEO specifications. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
What is the purpose of HTML attributes?What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

HTML in Action: Examples of Website StructureHTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

How do you insert an image into an HTML page?How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

HTML's Purpose: Enabling Web Browsers to Display ContentHTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AM

The core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.

Why are HTML tags important for web development?Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

Explain the importance of using consistent coding style for HTML tags and attributes.Explain the importance of using consistent coding style for HTML tags and attributes.May 01, 2025 am 12:01 AM

A consistent HTML encoding style is important because it improves the readability, maintainability and efficiency of the code. 1) Use lowercase tags and attributes, 2) Keep consistent indentation, 3) Select and stick to single or double quotes, 4) Avoid mixing different styles in projects, 5) Use automation tools such as Prettier or ESLint to ensure consistency in styles.

How to implement multi-project carousel in Bootstrap 4?How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.