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.
<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:17H1
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 anh1
or any other tag. If you use anH1
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