Why White Space and Typography Matter in Minimal Design

The h1 tag is an important text that describes the theme of the page. Even when thinking of SEO, it is necessary to take strategic measures such as incorporating primary keywords higher in the h1 tag.

When using the h1 tag, you may want to visually appeal with an “image” because of design considerations. In that case, setting the h1 tag as an image is safe (of course, from the SEO perspective, it is preferable to write it as text).

In this blog, I will explain in detail the meaning of the h1 tag and the considerations when you want to set it with an image.

If you want to set up h1 with images to create a website that is particular about design, but dont not want to cut your SEO measures, please refer to this information.

What is h1 tag?

The h1 tag is one of the “h tags” that sets the heading with the html tag.

There are six h tags, h1, h2, h3, h4, h5, h6, and h1 is the highest rank among them. Therefore, the h1 tag should be a summary of the entire page, and it is common for the content of the h1 tag to be described in the same meaning as the “title” of the article.

Role of h1 tag

The h1 tag describes the text content of the page summary. Therefore, the search engines and the user can easily understand what is written in the article by the content of the h1 tag.

The role of h1 tag has the following.

  • Communicate the content to users in an easy-to-understand manner
  • Prevent users from leaving
  • Aim to have positive SEO effects by including keywords

– Communicate the contents to the users in an easy to understand the manner

The h1 tag is usually placed at the top of the content and is the most prominent part. By describing the theme of the article here, you are telling the users that the article is exactly as they expected when they landed from the search results.

– Prevent users from leaving

If the h1 text is difficult to understand, or if it is far from the content of the text, it will result in high exit rate that will cause search engines to determine that the content is bad for the user and will devalue that article.

– Aim for Increasing the SEO effects including keywords

In the past, if h1 was packed with a lot of keywords, it was displayed in the top position. However, in the current search engine algorithm, the content of h1 tag is not directly related to the top display. However, including the target keyword in the h1 tag plays a role in enhancing the SEO effect of the target keyword.

Relationship between h1 tag and title tag

There is also a title tag in the tags that represent the theme of the content. The title tag is a tag described in <head>~</head> among html tags.

The h1 tag is the title for “the person who is viewing the page”, while the title tag is the title for “the person who is not viewing the page yet”. Since both have the meaning to indicate the theme of the content, it is okay to use the same text. From an SEO perspective, it is important to put primary keyword in both title and h1 and adjust them so that the contents are clearly communicated.

How to check h1 tag

When you open the contents of a web page, you will first notice the title of the page. This is the part surrounded by the “h1 tag”.

If you can’t find it visually, check the html source by displaying it. (If you are using the Google chrome browser, click “Ctrl + U” to display the source code in a separate tab.)

The above example is an example in which the h1 tag is written in text. The h1 text is visually important because it is written in a larger font than the body font and other headings.

Does using the image img tag for the h1 tag affect SEO?

The h1 tag is generally displayed as text, but if you feel that the design of the text display is constrained by “I want to display it as an image as an eye catching image”, or because “I don’t like the design of the h1 tag”. Then in some cases, you may want to create an image to make it more eye-catching.

In such a case, when you choose to set the h1 tag as an image, you may think if there is a problem with setting it as an img tag.

No?. There’s nothing wrong with placing an h1 tag with an image; by placing an img tag will not put you at an extreme disadvantage in terms of SEO or subject you to a penalty.

Text is recommended as SEO rather than images

From an SEO standpoint, it’s better to use text rather than images in the h1 tag . Search engine robots are not that powerful and cannot understand all of the images at this stage. It doesn’t matter how many keywords you cram into an image and design it, search engines will never understand everything.

As you develop that understanding, you’ll find that text is better at making people understand the meaning of h1 tags than images.

Unlike the days when headline tags and keyword lists in the text were effective for SEO, nowadays, search rankings and the algorithm for determining h1 tags has also evolved significantly. It won’t determine your rankings, but it will tell the search engines a little bit about your content and SEO.

Points when setting an image for the h1 tag

There is no SEO penalty for using the h1 tag as an image, but it may be more disadvantageous than writing it in the text. Also, depending on the setting method, the search rank may be lowered.

To prevent this from happening, be careful of the following points when setting the image in the h1 tag.

  • Be sure to set the alt tag
  • Do not reuse the same image between pages
  • Make the image have the same meaning as the text

I will explain each in detail.

– alt tag must be set

The alt attribute is text information that is set in the img tag and is used to supplement image information as alternative text to the image.

At the same time, it plays a role in indicating to the user what image is displayed here, as well as conveying the content of the image in an easy-to-understand manner to search engines that cannot read the content of the image.

If you want an image to describe the content of the h1 tag, be sure to set the alt attribute.

Again, the h1 tag is the part that conveys the theme of your content. If you set it with an image, you won’t be able to convey that content to search engines, so use the alt attribute By telling the content of the image in text, you can tell what is written in the image (i.e., what is written in h1 and ultimately what is the theme you are working on?.

If you are setting an img tag within an H1 tag, make sure you use the alt tag appropriately as shown below

Details will be described later, but at this time, it is important that “the contents of the image and the alt attribute match”. It is counterproductive to SEO that text that is not written in the image is written in alt. Keep in mind that placing unnatural alt text will result in a lower rating.

– Don’t use the same image from one page to another.

When setting an image in an h1 tag, don’t repeat the same image on another page. Given that the h1 tag is a summary of the page, you should not have the same image set up on multiple pages.

It’s similar o using a same h1 tag across different pages. If you use the same h1 with the same KWs across different pages, then you will end up consuming both your users and search engines around the theme of those pages.

So it’s a good idea to change the alt element on each page to make each page unique if you are using images as h1 tags.

If you are using the same image on all pages h1 such as a company logo, you can’t force the alt. In that case, Adjust the image so that it is unique to all pages. Or you can set the image h1 tag only on the home page, and not on other pages, etc.

– Make the image have the same meaning as the text.

The h1 tag is appropriate for content that indicates the theme of the page, and the same is true when setting h1 tags for images.

The h1 tag is often placed at the top of the page, so set an eye-catching image at the top. You don’t want to set up an article called “How to do SEO” with “cat pictures” as an h1 tag. It doesn’t matter how nice the design is, or how much you like the image, it’s not appropriate to use it as it does not correlate with the theme of the article.

When a user arrives at the search results and sees an image that doesn’t match the title (the text in the title tag) of the search engine, they may get confused as to whether it is the page they really want to visit.

As a result, people are more likely to leave the page without reading it. Content is only as good if people read it. While it may be tempting to create a catchy image, you should think about your users and make sure you have set up an “image to convey the content of your article”.

And make sure you set the alt attribute in the img tag to be the text that you include within the image.

This way, even if you place the image within the h1 tag, you can still convey the theme and title of the content to both search engines and viewers.


The h1 tag is responsible for communicating the theme of your content to search engines and users. From SEO viewpoint, you want to strategically set these items to include the keywords you want to rank for.

However, from a design perspective, you may want to place them in images. In that case, there’s nothing wrong with setting them as images, but make sure you do it the right way.

If you want to include an image in the h1 tag, make sure;

  • Images should be related to the theme of the article and always have an alt tag to convey the theme.
  • The h1 tag should be unique, so don’t use the same image across pages
  • Make the image have the same meaning as the text.
Our time: 11:28am AEDT