How do I get images containing text to be indexed by search engines?

Question

I am building a small portfolio website for a friend, and being in advertising and all, she hates the standard fonts and wants everything written in a custom font.

As CSS font-embedding is not really an option for the moment, all texts (fortunately, there are not many of them) will be put as images.

How could I still have the images content indexed ? For small texts (links, menu, etc...), I put the text in the alt attribute, but for something longer, I don't think that's the solution. What can I do ? Put the text in a hidden div next to the image ?

Answer 1

EMBED THE FONTS!

No, but really, Embeddable fonts work on all current browsers (FF, Chrome, Safari, Opera) and IE5.5+ (yes, it's been working in IE since the 90s.)

Get your TTF upload it here: http://www.kirsle.net/wizards/ttf2eot.cgi

It'll give you the code and 2 files back (a TTF and then an EOT[M$ web font]) back. Copy, paste, upload, done. Win win!

And please, please, don't use images :)

If you DO however, write your markup as if you AREN'T using images and then add background images to all the elements and use text-indent:-9999px to hide the text. But please, just use embeddable fonts. Plus, if you're client/friend is a photographer she probably (shouldnt be) using an ancient browser (i mean, REALLY ancient, like, IE4...)

Answer 2

Unless she is selling her own fonts on this website, I think you both could work more on CSS embedding (yeah, I read this is not an option for you now, but I insist).

If the case is a heavier graphic work upon fonts (gradient colors, twisted alignment, glossing, embossing, engraving...), making it really impossible to render thorugh CSS options as she needs, then I would recommend doing the following:

use images through CSS (perhaps a sprite), and hide the anchor text with text-ident. html

<a href="work1.html" title="My first work" id="firstWork">My first work</a>

css

#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}

This is one technique. Yeah, I know, Google can punish that, but you know, I never heard about one single site penalized by using this.

Another way would be using img tag inside anchor tag ALONG with text, and then using CSS to hide text and correct positioning img if needed. This last option gives your the possibility to add alt, title, longdesc to image, increasing the information quantity and quality being indexed.

You can even go further with this last option and go for a even better and fresh solution: using figure tag, available for HTML5, along with figcaption. The idea is keep anchor->figure->img+figcaption.

Figcaption would make the anchor text role and you can use CSS to hide it.

Well, 3 solutions. Pick one. I'd go with the last.

Answer 3

Yuck. She really needs to get over her font issues as she's killing the accessibility of her site and is causing all other kinds of issues like slowing down the rendering of her pages, etc.

Having said that you can try adding the longdesc attribute to your images. It's hard to say how much weight, if any, the search engines give to it but it's probably more then zero.

Answer 4

While web fonts are pretty much standard across all major browsers now, figuring out the cross browser intricacies of the different font formats can be tricky.

Google provides a nice web font api and font directory to help out here that you might find useful.

Answer 5

Using images even with alt tags as your only way to get to other pages in the site is not really going to provide a great deal of clarity to Google.

Your best bet is to convince your friend that you need text links somewhere on the page or site in order to solve the problem. For example if you are able to setup a Sitemap page with all text links or a drop down on each page with all text links that should work. It won't cause any damage to have that in addition to the link images.

I would suggest not using hidden links as Google can see this as being nefarious and reduce your site's rank or mark it as spam.

Answer 6

As others have suggested, you don't have to go with the standard "web-safe" fonts. There are many font replacement techniques available now that will work in a cross-browser manner. For a good overview, check out: The Web Designer’s Guide to Font Replacement Methods. You don't have to give up on SEO or resort to image SEO. You can have your cake and eat it too.

Answer 7

I used to do this with background images and hidden nested spans. Looks great to text browsers and search engines, and has custom fonts for richer browsers.

HTML:

<h1><span>Welcome to Hell on Wheels</span></h1>

CSS:

h1 {
    background: url(welcome.gif) no-repeat;
    display: block;
    height: 68px;
    width: 415px;
}
h1 span { display: none; }

Output:

See it in action.

There's really no limit to the amount of text you can replace with this method (appropriate tags and hidden styles in smart ways) but honestly the custom font your client wants to use is likely far less readable than all of the common web fonts. You should really try to talk her down.

Answer 8

sFIR might work for this purpose, but using it will be resource-intensive on the client side and it may get tricky if you need to embed links in the text.

Answer 9

1. Just use webfonts. Virtually any browser will display them correctly (if you put them in alternative formats). Just host them as a regular files (which they are). Here is really good tutorial. One more advantage: you don't need to think how to trick google

2. sIFR, Cufón, FLIR or other image sprites - that's really old-style bull-crab which was invented for unknown reasons ;) don't use that.

3. A lot of text typed in a couple images it's:

   • long load time
   • anti-seo (of course you can use cloaking and serve different content to google bot and user, but it's just more work and testing and also risky [rival site owners may tell on you to google:])

Answer 10

Try using the typeface.js library! You can use any custom TrueType or OpenType font just by including the library in the top of your page and giving your special-fonted elements a special class. It's free, open source, cross platform, and search engines will see your text too. No images necessary; the library handles all of that and you simply design it like a typical webpage.

Answer 11

Lots of great options here for answers. Seems Font Squirrel (http://www.fontsquirrel.com/fontface/generator) deserves a mention. And yeah, the Google Font APIs are great as well.

As for image substitution, personally I'd recommend a span in an element, with the image as the background on the parent of the span. But instead of display:none on the span, position:absolute it off screen. That way screen readers still get that content.

I seem to recall moving off screen winning out over indent, but maybe I've got my silly pants on.

But double also yeah - embed those fonts.

Answer 12

Use one of the Font-Face kits from Font Squirrel. The kit provides 4 different font formats and the correct CSS required to use them. Works in all modern browsers and in legacy IE versions too!

Answer 13

Build the site with images. Then in a dew months when she comes back complaining about not being found by the engines re-build the site with text and charge another fee!