Last week I came across another client’s website that was using a 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 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 a 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:
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 sized 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 a 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.