Hi,
this question overlaps html and css I guess. I am working on a site with small round graphics which have 2 or 3 words of text in them. The original supplied graphics included the text. Then it was decided for SEO reasons maybe the graphic should be separated and the text should be regular text.
I have worked out a way to have the text be regular text and it works fine. BUT the designers are using lots of fonts and now I am thinking adding this many google fonts is going to slow down the site for what is a really a design element not major content. Adding a font for what may be 2 or 3 words seems a bad idea.
So I was thinking if the designers add the text into the graphic and I put the text in a plain web font on the page as well but set its z-index so it is not seen below the graphic that might solve the problem. Nice font in graphic, real text for SEO.
I can not find any information on the SEO situation. Will the text which would not be visible still get picked up by search engines?
Does my solution seem reasonable or does anyone have a better idea?
Hm, I was going to give the same link as Mark, but personally, I would use the graphic, and the technique in Mark’s link. this is called “image replacement”, so you can Google that for other approaches, though the method in that ink is the best.
Another half-way option is to include the real text but move it way off screen. That covers the search engines, but it does mean that people will see no text at all if images are disabled.
I agree that loading a whole font for a few words is overkill.
Thanks for the replies. I think the image is the way to go. This design could end up having twenty fonts just with 2 or 3 words each, they are really used as graphical elements.
Can I do this without the span? My images need to scale as the browser window is smaller. This works as I have it. If I make them backgrounds as in the link they will not.
In the case of the link it is a nice way to fallback to text if images and css are off. The site is so graphically intensive and that is its purpose that if someone visits with images off or CSS off I don’t care if they know what the few words in the graphics were. The words are entertaining but really pointless without the graphic.
Is this a correct assessment…
Image replacement in the example is using the browsers automatic z-index to hide the text and that is OK for SEO, therefor if I use CSS z-index my hidden text will be OK for SEO. The only problem would be if CSS is off, the text may be above the image.
I really don’t think it’s worth the effort, If you want it to scale down as well I would simply use an inline image.
I haven’t used image replacement techniques for years. when I do want to replace the text with an image I use text-indent: -9999px to hide the text and show the background. I don’t see a strong justification for catering to people who disable images.
I guess it depends on how important they are. I disable images on my smart phone if I’m browsing a lot away from home, as I want to conserve bandwidth. It’s amazing how many headings, titles etc. I can’t read because there’s no text accompanying the image. So it depends on how important the text is. It sounds like the text being replaced here is not very important—almost decoration—in which case I’m inclined to agree that the images might as well be inline. At least with inline images you can provide alt text for non-sighted users.