SEO Implications of using CSS Display None/Image Replacement

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.

You can see how Allianz have used CSS to replace these anchor texts with images, which provide users a rich experience but also optimising for search engines at the same time. There’s nothing spammy about this as the anchor text correlates back to what the images are about and there’s no discrepancies or confusion in terms of understanding what the navigational menu is trying to achieve or convey, with or without CSS.

Now let’s look at an example that currently isn’t using CSS replacement but has the potential to do so. When you look at Fallout’s homepage, you will notice that the navigational menus and links comprise of images and no text at all. Even the image alt attributes aren’t optimised which means search engines aren’t able to tell what the images are about and the internal links aren’t optimised at all!

Looking more specifically at the header sections of the document (highlighted in red box), you can see there’s potential here to use CSS replacement to optimise using header tags (i.e. h1, h2, h3). Essentially what they could’ve done is create a div container as the parent of the header tags, use CSS to display the container’s background image and use display:none on the header tags. The end result is with CSS, it still looks the same but without CSS, the header sections are optimised for search engines.

Looking at the current header sections without CSS, you can see these are still images, unrecognisable by search engines.

However, when you optimise it using CSS image replacement, you can see that the header sections are in text and optimised. This is then readable by search engines and informs them that these sections are important as they are headers.

So go ahead and don’t be afraid to use CSS image replacements if you’re doing it in a positive way that help describes what your page and images are about to search engines and does not seem spammy to users when CSS is disabled. Remember, sites are manually reviewed before deemed keyword spamming so make sure it passes a human test beforehand.