Many times when you are designing and building a website you will want to use an image of text instead of actual text. You do this because many times the fonts used for the web just don’t look the way you want them to. This is a common and proper way of doing things but if you are going to replace text with a text image make sure you do it in a way so that search engines can “read” what your image says.
The problem with using images of text instead of the actual text is that it gives search engines less content to index. Sure, you can use an “alt” tag in your replacement image that states what the image is about, but what if you could use an image and give the search engines the actual text to crawl as well?
This is easily done with a little HTML and CSS. Let me give you two examples to show you what I’m talking about.
If you look at the header of this site you’ll see the title “Rob McGuire” in big, bold text. As you can probably guess by now, it is an image file and not text. Yet the search engines read that spot as actual text that says “Rob McGuire.
What I did is insert the following piece of code into the header section:
<div id="name"> <a href="http://www.robmcguire.net">Rob McGuire</a> </div>
I created a div with the id of “name” and inside that div I entered the text “Rob McGuire” and linked it to my homepage. When search engines crawl my site, they see the text and index it accordingly. Sounds simple so far, right?
Now the CSS I applied to show an image instead of the text is simple enough as well. The CSS code used is as follows:
#name {height: 103px; width: 390px;}
#name a {height: 103px; width: 390px; background: url(images/name.png) no-repeat; display: block; text-indent: -9999px;}
Now let me explain what this CSS code does.
First, I defined the height and width of the “name” div with the line of code starting with just “#name”. The image replacement is actually done with the second line which defines what happens to hyperlinks in the div named “name”. With “#name a” I defined the hyperlink’s height and width, gave it a background image to show (which is the Rob McGuire image) and also set the image to not repeat. I then set it’s display attribute to “block” which basically creates a line break before and after the element. If you don’t add in the “display: block” attribute for hyperlinks then the image won’t display. Finally, to have the real text disappear I added the text-indent property to push it far off the left side of the screen.
That is the basic rundown on how to create a linkable text image that is also “readable” by the search engines. Now if you wanted to use an image of text instead of real text that isn’t linked to anything the process is nearly identical.
Let’s say that I wanted to use the same “Rob McGuire” image in the header but this time I didn’t want to link it to the home page. Then I would have entered this code in the header area instead:
<div id="name"> Rob McGuire </div>
You’ll notice that the only difference between this code and the previous example is that the text isn’t linked to anything.
The CSS for this is only slightly different as well and it looks like this:
#name {height: 103px; width: 390px; background: url(images/name.png) no-repeat; text-indent: -9999px;}
That’s all there is to it in that instance. Much of what was entered for the original “#name a” attribute is now in the “#name” one instead and you should notice that the “display: block” property is missing as it is not needed in this instance.
Sometimes while doing this you may find that your actual text is still showing up even after you put in the “text-indent” property. Most of the time this is because either your current div or parent div has a text alignment property that aligns text to the right. You can solve this problem by adding the following CSS property to your image replacement div:
text-align: left
Hopefully by entering this your text should magically disappear from view.
If you have images of text on your site that are “just” images, try changing the code up this way and give the search engines a little more information to index on your site!