Last week I came across another client’s website that was using an H1 tag on an image file. I did some research on the topic and I was surprised to see that many people are actually following this practice.
Because this situation occurs to me for a second time, I decided to write a short blog post in order to explain why I believe it is a BAD idea to put images in the <h1>.
So if this idea has ever crossed your mind, keep on reading.
The importance of the H1 tag in SEO
First, let me remind you that the Heading 1 tag, which is written as <h1>…</h1> in the HTML code of a webpage, is one of the main on-page SEO elements.
According to the latest studies, Google’s search engine algorithm weights it as heavily as the meta title tag. Therefore, it’s in the best SEO practices to have your targeted keywords in the Header H1 tag.
Each page should have only one <h1> tag.
What happens when you put an image file in an H1 tag?
In my experience, people would put an image in the h1 tag when they can’t put more text on the page or when their website template doesn’t allow them to easily apply the tag on the title they want.
So they assume that applying the tag on an image file that has an Alt text, would do the job and that the search engine bot will consider the text in the alt attribute as a header tag.
In the HTML source code, the final result would look like that:
<h1><img src="/images/image-file.gif" width="300" height="30" alt="Can I Use An Image as a H1 Tag?"></h1>
Another reason people do that could be that they want to “hide” the content of the tag from the users and they’ll do keyword stuffing in the tag.
Why you shouldn’t put an image in an H1 tag?
No matter the reasons, placing an H1 tag is not a good idea for several reasons:
H tags are basically meant for text not for elements
The Header tags are meant to hold text that describes the main topic of the paragraph they introduce. And the text is more accessible, file size, and SEO friendly.
So the text from the alt attribute inside of an H1 tag won’t carry the same SEO weight as a textual H1 tag.
In its official guidelines, Google recommends to
“avoid embedding important text in images for elements like page headings and menu items … To ensure maximum accessibility of your important text based content, keep it in regular HTML”.Google Webmasters Guidelines
It doesn’t make sense for a search engine bot to put an H1 on an image
Header tags help search engines to “understand” the structure and the content of a specific webpage.
It’s possible that a “false” H1 may confuse the robots on the structure and on the content of the page, and eventually misrepresenting your content or miscategorizing it in aggregators elsewhere.
Bots are using Header tags as a table of contents of a specific page. The image is not relevant information about the content of the page.
You are missing an important SEO opportunity
As I wrote in the beginning, the H1 tag is one of the main SEO elements of the page. In addition, being an on-site SEO element, it’s entirely in your control. So why put it on an image, instead of following SEO best practices and place it on a descriptive, keyword-rich page title?
“If you have an image as the page’s H1 tag, keep in mind that the H1 is one of the most important clues for a search engine to determine what the page is about, so consider using text instead of an image or at least using descriptive ALT text.”Vannsa Fox, an ex-googler.
6 thoughts on “Should you put an H1 tag on an image?”
Hi, nice article, but what if to put the text under h1 and not as img alt?
like this >
John Mueller says images in h1s are fine, as Google uses the alt text for the h1. It makes perfect sense to wrap a logo in an h1 tag for a home page.
Thank you for your comment. I’ve also seen sites doing that, but I recommend against it for several reasons:
1. It creates a problem with duplicate content (h1 tags) across your entire website: usually websites display the same logo sitewide
2. It creates multiple h1 tags across all pages: usually website templates automatically apply an h1 tag to the page titles.
3. HTML headings should be used for headings only because search engines use them to understand the structure and content of pages.
I recommend putting the logo in a div class, like this:
Today, we have access to lots and lots of web fonts. That was not the case 15 years ago, and font licensing was often not covering the case of font use on a website. So in order to be able to use other fonts than what your OS manufacturer supplied as standard, it was common practice to render headlines as images, provide alt text and wrap that into h-elements. Cufón was one tool among others that did this. Googlebot never had any issues with my websites built that way.
I prefer not having to resort to this anymore today, but I would not confirm that “h1 on img is bad”.
In my case the heading has to be the logo of the product, and I can’t imagine there’s a penalization for this.
I have a several products pages, each product has an easy to read SVG logo. Best approach in my opinion is to use it in a H1, with the logo text as an alt attribute.
Otherwise, I’ll have to place the logo in a div and, underneath, an H1 with the same text. Resulting in repeated content. That doesn’t make sense!
The bottom line of my article is not that a website might be penalized or suffer from the use of heading tags on images, it’s just that putting an < h1 > on an image is not the optimal use of the tag. In your example, without looking at your product pages, I would have advised exactly to place the logo in a div and the < h1 > on the product name.
Is there a technical reason that made you decide to put the product names in an SVG file instead of using styled text?