Using images in an H1 tag

I Need Help
1

Hi all,

I have had 4 images sent me for 4 pages I am building. They have a nice design and they want to use the images as the titles as they have text in them too.

Now these will go at the top of the page - I know H1 tag with text is the best for SEO, but I have read using images in an H1 tag can be done.

How do I do this in Blocs so it works with SEO?

So basically need an image to act as a H1 tag !

Edit:
Had an idea, of having the image and then below it in an H1 tag, have the title and make the text transparent?..

3

Thanks @Jerry but for SEO, do I just name the image the page title in the ALT box to give me the H1 Tag text?

5

Just remember that the H1 is a very important tag for SEO. Seems to be mixed opinions about using images inside the tag like this. Make sure you have the alt text filled in.

To protect yourself, I would mention to your client that it’s not best practise and you’re not liable for any SEO penalty that arises.

6

Do you think hiding under the image an actual text H1 tag and make it transparent…a cheat and not the right away about going about it - but I saw it on a youtube video today and wondered if its worth doing it.

7

I’m not actually sure. Google move the goal post a lot. :joy:

I just know it’s not the intended use of the tag. That the tag is one of the most important to have one your page.

It may not even cause a penalty. Let us know how it goes :smiley:

2 Likes
8

As far as I remember the first days of the web, colours were used to create invisible Keywords in order to increase the ranking.
This practice is for sure known as a cheat our days, so I would be personally very careful setting an H1 transparent unless a very professional here in the forum can give green light. Just thoughts

1 Like
9

Apparently the alt text is seen as text inside the H1 tag. John is the Google guru on SEO.

https://twitter.com/johnmu/status/1228379854715834368?s=21

2 Likes
10

Thanks for the post - I will have a look at this.

11

Hi @Jerry,

Well I must be doing something really stupid ! as I can not seem to add an image into a H1.

tried adding it…dragging it from everywhere…and it will not add?

12

I don’t see that having an image (beside one for a bullet point) is allowed.

https://www.w3.org/MarkUp/html3/headings.html

2 Likes
13

Yeah. :rofl:. .

14

This practice is for sure known as a cheat our days, so I would be personally very careful setting an H1

1 Like
15

Would it be classed as a cheat if the canvas is black and the H1 is black too (under the image)

16

It disappoints me to see websites being built on the basis of tricking SEO analysis rather than being the best possible thing for the end user. I think that often SEO is used as a scapegoat for a poor product offering/poor service/website built for machines rather than people.

It makes me wonder if anyone has studied the effects of SEO on actual user engagement/conversion rather than in just fooling search engines.

17

I have to agree. I don’t understand what the benefit would be of having an image inside an H1 Tag. Images are visual elements that are designed to be seen by the site user. H tags, on the other hand are used as hierarchal headings to give structure to a webpage and to give degrees of importance to those headings. H tags are used by search engines for indexing purposes. The visual prominence of an H1 tag, for example, is a completely different issue to the prominence it is given by a search engine. The visual prominence is created with CSS styling. This doesn’t really happen with images. Images are what they are - visual, not hierarchal.

If an image contains text, that text cannot be indexed by a search engine, therefore if that text has to be used as an H1 tag, it’s better to add it to the page as a text element marked up as H1. As far as the image itself is concerned, it can have alt text associated with it for search engine use, but its primary purpose will be to provide screen readers with something that will describe the image to a user with visual disabilities.

In an ideal world, H tags and images should be used to reflect both the visual and digital layout of a page - the two should be in sync. That said, there is nothing to prevent the visual styling of an H1 tag being less prominent visually if the same text is being used in an image on the page. So you could, for example, use a caption under the image and designate the caption as an H1 heading.