It is a known problem that search engine crawlers aren’t able to read images, hence they aren’t able to determine what the image is about. However, this can be overcomed by utilising the alt attribute of the img tag to describe the image so that search engines are able to read what the image is about.
On the other hand, I do believe that it may be better to optimise your on-page using actual text than using the image alt attribute on certain situations. How you can do this is by using CSS to replace text that can either be within anchor, header tags or simply text in general with background images . Obviously you don’t want to overdo this (i.e. apply to all images on the page) lest you trigger Google’s spam alert and also it’s very time consuming!
So is using CSS to optimise your on-page illegal in the eyes of Google? Will you be considered trying to obfuscate the search engines for SEO purposes, hence getting yourself banned from the SERPs? The answer to this is how you do it and the question to ask yourself is, are you trying to be dodgy?
The Way To Get Yourself Banned
In Google Webmasters help under hidden text and links, it is pretty clear what are the criterias to get yourself banned. Although not in the list, I would avoid using text-indent: -9999px to hide your text but rather use display:none instead.
I would say the reason for this is because the text-indent property according to w3c is to be used for text formatting purposes, not visual formatting. However, the display property is used for visual formatting purposes instead which fits the purpose of using it to ‘replace’ text with images as it is a visual aspect.
Algorithmically, Google does not ban websites from the SERPs that use CSS to hide things and obviously would go through some sort of manual review. That’s why it’s important that you ensure you don’t have comments in the source code that reveal your intention of keyword spamming or displaying optimised keywords only for the search engines.
The simply rule to follow is this: if you find yourself questioning whether what you’re doing is spam worthy, then it’s probably spam worthy. What you want to make sure is that you’re using css image replacements with the right intention which is to provide accessibility to users that have CSS disabled and to ensure that search engines are able to read and recognise the important aspects of your page that add value to the user experience.
Using CSS Image Replacement The Right Way
Let’s take a look at Allianz’s homepage, a major insurance provider and how they’ve used CSS replacement the correct way.
You can see on the homepage that navigation menu (highlighted in red box) comprises of image menu items that search engines aren’t able to read. Well, they can actually read it if the image files are optimised with the alt attribute, however I do believe that optimised anchor texts have a greater weighting in SEO than image alt attributes. This use of images is obviously aesthetically more appealing to the user than using normal anchor text.
Looking at the non-CSS version when you disable CSS, you can see below (highlighted in red box) that these navigational menus are actually anchor texts. From a text perspective, this is essentially what search engines see when they’re crawling the site.
