: Is placing an image over H1 text an SEO issue? We have a main image on every page of a website. This image includes some text. We want to use text in image as h1 but to make it live

@Samaraweera270

Generally, putting the <image> tag inside H1 tag is not recommended. Header tags are meant to hold text only. This text is intended to briefly describe the section you see below the heading. So as was suggested by Stephen, use the <img alt="xxx" src...> to supply your text. In addition, in terms of SEO, having image alternate text is recommended to provide another location for search engines to find keywords.

In terms of image overlay and text, it does not have to impact your performance. The important factors are to optimize your images, do not deliver unnecessarily large files, strip the meta data from your images, and do not resize images on the browser side.

Vote Up Vote Down

@Angela700

The <img> tag is classified by the living standard as Flow content, and <h1> </h1> accepts flow content. It is fine to use the image tag inside any heading tag.

In terms of SEO it will be an issue trying to present content visible to the bots but hidden from the user. According to google this is a direct violation of their guidelines. You can easily trigger a penalty by doing this if they detect algorithmically that you are trying to manipulate rankings that way.

However, you can still hide text from the user for legitimate purposes, such as accessibility.

According to WebAim there are a couple of techniques to hide content for the user but not from screen readers, this will allow people with disabilities to "see" the content but not regular users. This technique is about positioning the text off-screen:

.hidden {
left:-10000px;
}


There are some limitation of course, such as you can not use this technique if the image inside the H1 will be used as a link.

For more information about the techniques you can implement visit this page.

Vote Up Vote Down