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
you will have to fight with stuff like this
and no, you can't scroll
but yeah, just noto sans jp (https://fonts.google.com/noto/specimen/Noto+Sans+JP) takes 5mb per variant, or almost 10mb for a variable font
i don't know how well that works for seo, but then again, that's nintendo and not a good website to use as a test
yeah probably a bad site to point to... there are problems unrelated to imgs for headings. The point was they are using images like this: https://www.nintendo.com/jp/switch/aqmxa/assets/img/top/bnr_life.png with alt text
im saying that nintendo is a bad idea to compare seo stuff with because ... well, it's nintendo
it's a huge brand, known all over, with tons of searchs
An informative article that explores various potential solutions could be helpful in this context
https://css-tricks.com/css-image-replacement/
Chris Coyier
CSS-Tricks
Nine Techniques for CSS Image Replacement | CSS-Tricks
CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page.
There is no point where a company just doesn't have to worry about SEO. Sure searches for "Nintendo" will bring you to their sites/marketing materials but what about searches like "video game", "video game console", "side scrolling platformer". What's on top of the search results when people search the newest Nintendo game by title? Do they get the pages Nintendo made or a third party review site like polygon?
those are related to videogames, but they are way too big
i highly doubt that google would slow down serving results for big game related companies if their seo wasnt top notch
You could use a background image and clip path so it’s still text? Entirely possible I’m not understanding your use case and goal but came to mind first
the idea is to use an image to replace the text
i think it is a much better idea to use an svg than a raster image
you then can have a <text> element thats hidden
i need to test that
Ohhh I didn't know svgs had that
they do
its perfect if you need a number inside a circle
this way, you have something that scales for the device, without the risk of looking blurry, possibly lighter and with the text element, it may work just like a normal tag
however, i need to test that