How do you replace text in a div tag with images and will the text still be recognized in search engine?
I’ve been reading up on SEO today and one of the things mentioned is that one thing that’s important is your keywords, and the placement of them in your site. Now, I commonly make my sites really imaged based and heavy using CSS to pull the site together. In this particular case, I’m looking at the navigation bar (the common images with roll over javascript ones).
Now I don’t remember, but I vaguely remember a technique that involves using CSS to replace a text area or maybe the text within a div tag with an image. Two questions I have however is, can I use this technique with roll over images, and also, if the text that the image is replacing is a keyword, will the search engine still be able to see the keyword providing the word itself isn’t inside any javascript (which I hope it wont be).?
2 Responses
Mehdi
04 Feb 2010
just "JR&qu
04 Feb 2010
You can put your navbar as images, and swap them with javascript.
… But IMAGES are not read by SEs.
Make sure you do NOT forget the "alt" and "title" arguments in your images: these are read by SE.
You only use image replacement for headers, not for entire paragraphs.
To make sure search engines can still see the real headers, you can use a number of methods, the simplest is to add an overflow: hidden to the DIV, set the height to 0, and add padding to the top of the div, set to the same height as the image.
The image will fill the padding of the div, and the text will be"hidden" in the zero pixel height of the div itself.
I cannot stress enough, though:
You only use image replacement for headers, not for entire paragraphs.
Using images for text may look cool, but you’re adding download time to your page, and excluding screen readers, text to speech browsers and people with impaired vision.