Image for heading
I'm curious on this. Typically, I always thought that having an image for a heading is bad practice, but what if you add it into a heading tag with descriptive alt text? Something like:
Possible use cases would be a very stylized font design made in Photoshop/Illustrator/etc.
I'm looking at this from an SEO standpoint. The search engine would be able to read the alt text (as would a user relying on assistive technologies), and it's inside a heading tag, so the search engine should be able to understand it's importance accordingly.
26 Replies
Have you considered encoding as a font? Loading a custom font would not interfere with SEO.
What do you mean by encoding as a font? Like turning my image into a font?
That would be a lot of extra work; and I'm thinking about it as something like a highly stylized image with text rather than a font.
This is purely hypothetical btw
Yes, this is works
You don't need to define the whole alphabet. You only need to define the characters that you are using, and your post implies that this text is already being created as a graphic. It's not as much work as you think, unless it's a script text in which characters overlap.
Maybe, but I wouldn't be interested in that solution
OK, but have you looked at what other high ranking search result sites are doing? All of the ones that I looked at use custom fonts when they have uncommon styling for their text. I have not found a single one that uses an image.
Oof that's good to know. If other websites do it then it's probably a good idea. Thank you
The reason why I'm hesitant to use a font in this hypothetical scenario is because what if I want to have more than just the text? What if I want to have other elements? Yea I could use absolute positioned elements but sounds like a lot of work
this is an incredibly terrible idea
if i were you, i would set an hidden h2 with the text, then use an svg as the header
I was thinking something like that at first, but I feel like a search engine would understand that worse than putting the image inside the h2
What makes it a bad idea?
the bad idea is that you will need multiple versions of it and only a select few will be readable at some resolutions
also, you throw away all accessibility tools
with the hidden h2, screen readers can still read the text in it
and the pretty svg is shown
but honestly, the best of it all is to just serve the font file and use text
That's a good point
hidden elements is way worse for SEO and google does not like it
images on headings are okay
if you take a look at notion, their H1 is full of spans and images
as long as the images have alt and are properly set, everything should be okay
This is a really interesting discussion, cool example. I'll have to check it out later π
if you use a non-vector image, it's absolutely useless to use an image still
I've run into a lot of Japanese language sites that still do the "headings as images with alt text" thing. Not sure why but finding it's still pretty common there (maybe the font files with all the Japanese characters are too large??): https://www.nintendo.com/jp/switch/aqmxa/index.html