3

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 text on image would be an issue because of responsiveness issues.

What if we place the h1 live text under the image (it would NOT be visible, using z-index etc.)?

Would this be an SEO issue and would Google not like this?

Improve this question
4
  • 1
    If it's not to be visible, why put it at all? – BenoitLussier Feb 4 '18 at 7:41
  • It sounds to me like you should be using <img alt="The text" src=....> instead of an H1. Text included in an image should go in the alt attribute of the image tag. – Stephen Ostermiller♦ Feb 5 '18 at 9:17
  • I also assume that somebody told you that you need an H1 for good SEO. That just isn't true anymore. Google now renders pages and sees what text is big and prominent. It will weight that text for SEO regardless of if it is using an h1 or any other tag. If you use an H1 but re-style it to make it look like normal text or if you hide it, then Google will no longer treat it specially, or will ignore it. – Stephen Ostermiller♦ Feb 5 '18 at 9:20
  • Hi Shraga, it is good for the community to mark a question answered if you think any of the answers below are satisfactory, it is also good to have questions marked as finished. Please mark the best answer below as the correct one if you think is ok. – Raul Reyes Jan 18 at 2:57
5

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.

Improve this answer
1
  • Note: <img> does not use or need a closing slash and never has. – Rob Feb 4 '18 at 12:09
-1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.