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:
<h2>
<img src="" alt="Heading text (something like About Us)" />
</h2>
<h2>
<img src="" alt="Heading text (something like About Us)" />
</h2>
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
Chooβ™šπ•‚π•šπ•Ÿπ•˜
Have you considered encoding as a font? Loading a custom font would not interfere with SEO.
vince
vinceβ€’13mo ago
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
Katre
Katreβ€’13mo ago
Yes, this is works
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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.
vince
vinceβ€’13mo ago
Maybe, but I wouldn't be interested in that solution
Chooβ™šπ•‚π•šπ•Ÿπ•˜
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.
vince
vinceβ€’13mo ago
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
ἔρως
ἔρως‒13mo ago
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
vince
vinceβ€’13mo ago
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?
ἔρως
ἔρως‒13mo ago
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
vince
vinceβ€’13mo ago
That's a good point
Hakira
Hakiraβ€’13mo ago
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
<h1> this is some <span><img....></span> cool right? <span><img ....></span> etc</h1>
<h1> this is some <span><img....></span> cool right? <span><img ....></span> etc</h1>
as long as the images have alt and are properly set, everything should be okay
vince
vinceβ€’13mo ago
This is a really interesting discussion, cool example. I'll have to check it out later πŸ‘€
ἔρως
ἔρως‒13mo ago
if you use a non-vector image, it's absolutely useless to use an image still
capt_uhu
capt_uhuβ€’13mo ago
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
ἔρως
ἔρως‒13mo ago
you will have to fight with stuff like this
No description
ἔρως
ἔρως‒13mo ago
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
capt_uhu
capt_uhuβ€’13mo ago
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
ἔρως
ἔρως‒13mo ago
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
Sanan
Sananβ€’13mo ago
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.
capt_uhu
capt_uhuβ€’13mo ago
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?
ἔρως
ἔρως‒13mo ago
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
clevermissfox
clevermissfoxβ€’13mo ago
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
ἔρως
ἔρως‒13mo ago
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
vince
vinceβ€’13mo ago
Ohhh I didn't know svgs had that
ἔρως
ἔρως‒13mo ago
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
Want results from more Discord servers?
Add your server