Properly configured h1 tags can improve a site's usability and have a positive effect on SEO.
In this article, I would like to discuss the impact of h1 tag on SEO and its proper setting.
2. Difference between h1 tag and title tag
- Use h-tags according to the hierarchical structure
- Use an appropriate number of headings
- Specify alt attribute for images in h tags
6. Multiple h1 tags are allowed
7. Summary
1. What is h1 tag?
h1 tag is one of the heading tags in HTML, meaning a major heading.
There are six heading tags: h1, h2, h3, h4, h5, and h6, with the smaller number indicating a more important heading.
| タグ名 | 意味 |
|---|---|
| h1 | Major-Heading |
| h2 | Middle-Heading |
| h3 | Sub-Heading |
| h4 | h4 Heading smaller than h3 |
| h5 | h5 Heading smaller than h4 |
| h6 | h6 Heading smaller than h5 |
It is safe to assume that h1 is the highest-level heading tag among its h tags and is similar to the title tag, which indicates the page's content.
Google recommends the proper use of heading tags for user convenience.
"Use heading tags to emphasize important text
Use meaningful headings to indicate important topics, and help create a hierarchical structure for your content, making it easier for users to navigate through your document."
Search Engine Optimization (SEO) Starter Guide
2. Difference between h1 tag and title tag
The main difference between h1 tag and title tag is whether they appear in search results or not.
Unlike page title(title tag), which appear prominently in search results, h1 tag do not appear in search results.
However, when a visitor clicks on a search result and goes to the site, h1 tag is displayed on the screen, but the title tag is not.
In other words, h1 tag is indispensable as a headline that briefly indicates the page's content to the user who visits the site.
3. The SEO effect of h tag
Google recognizes the h tag as an "important word on the page."
"Headings give you the opportunity to tell both Google and users what’s important to you and your website. The lower the number on your heading tag, the more important the text, in the eyes of Google and your users."
Holiday source code housekeeping: Website clinic for non-profits
Appropriate use of h tags, including h1 tag, will improve page ratings and, consequently, SEO benefits.
4. Proper use of h tag
If misused, the h-tag can decrease, rather than increase, user-friendliness, which can harm SEO.
So, let's learn how to use the h tag appropriately in a way that is easy for users to understand.
1. Use h-tags according to the hierarchical structure
There are six types of HTML heading tags, h1~h6, and the smaller the number, the higher the Heading in the document structure.
So in a page, set up important text in the following order, starting with the highest-level h1.
<h1>What is h1 tag, how does it affect SEO, and how to set it</h1>
<p>Text</p>
<h2>What is h1 tag</h2>
<p>Sentence</p>
<h2>What is the SEO impact of h1 tag</h2>
<p>Sentence</p>
<h2>The proper use of the h tags</h2>
<p>Sentence</p>
<h3>Use them in the right order</h3>
<p>Sentences</p>
<h3>Use the right number of tags</h3>
<p>Sentence</p>
<h2>Notes on h tags</h2>
<p>Sentence</p>
I often see cases where the h-tags are determined for design reasons and are not placed in the correct order.
Therefore, it is essential to place h-tags so that the meaning can be understood as a headline based on the text, not based on the design.
By doing so, you can adequately show both users and Google what is essential.
Also, when writing a blog post, it is a good idea to structure your h-tags in advance with SEO in mind. It will save you a lot of rework.
2. Use an appropriate number of headings
While h-tags can convey important text to users and Google, more is not always better.
Google recommends the following uses for headings.
"Imagine you're writing an outline
Similar to writing an outline for a large paper, put some thought into what the main points and sub-points of the content on the page will be and decide where to use heading tags appropriately.
Use headings sparingly across the page
Use heading tags where it makes sense. Too many heading tags on a page can make it hard for users to scan the content and determine where one topic ends and another begins."
Search Engine Optimization (SEO) Starter Guide
In other words, too many h-tags can make it hard to tell which ones are important, which can be detrimental to the user's experience.
Also, search engines will not be able to grasp the structure of the text, making it challenging to improve SEO ratings.
Therefore, be sure to place only the right amount of images in the right places.
3. Specify alt attribute for images in h tags
On-site top pages and landing pages, there are times when img tags such as logo images and main visuals are specified in h1 tag.
In such cases, set the text of h1 tag to the alt attribute of the img tag.
<h1><img src="/images/logo.svg" alt="How to write h tags and examples"></h1>If you omit the alt attribute, h1 tag will not be effective.
5. Notes on h tags
Google officially lists the following cautions for writing h tags.
"Avoid :
- Placing text in heading tags that wouldn't be helpful in defining the structure of the page.
- Using heading tags where other tags like
<em>and<strong>may be more appropriate. - Erratically moving from one heading tag size to another.
- Excessive use of heading tags on a page.
- Very long headings.
- Using heading tags only for styling text and not presenting structure."
Search Engine Optimization (SEO) Starter Guide
You mentioned earlier about not overusing h-tags, but you also talked about the design of h-tags and the amount of text.
Suppose the same type of h-tag is used in different sizes. In that case, the superiority of the importance of that text will not be visually apparent.
Avoid overly long headings as well, as they detract from the original role of "concisely expressing the page's content.
The text in h1 tag should be a concise description of the page content, and at the same time, it should match what the user wants to know (i.e., search intent).
I also recommend using a blog structure design document to list headings and check the length and content of headings.
6. Multiple h1 tags are allowed
HTML syntax allows for multiple h1 tags per page, but is it better to have only one h1 tag for SEO?
Google's John Mueller answers such a question as follows.
"Use as many as you want."
However, h1 tag is essential for the user to understand the page's content.
Usually, the exact text as the title tag is placed in h1 and displayed somewhere on the screen.
Here, if there are multiple top-level headings, the user may not know which one is the page title.
From the user's perspective, using only one h1 tag is easier to understand and prevents site management confusion.
7. Summary
The h tag is often neglected in SEO.
Still, when correctly set up, it can be a means of conveying page information to users and Google in an easy-to-understand manner.
If you have not yet optimized h tags, not only h1 tags, please take this opportunity to review them.
