Image replacement can be a contentious issue when it comes to optimizing your websites for a search engine, but is widely supported by leading-edge web standards developers attempting to create more visually appealing websites for their users whilst still retaining semantic, accessible code.
Image replacement is defined as:
- serving text content in your HTML document
- serving an image or flash replacement, usually through CSS styling
- the image is usually a background image and is not seen by search engines
This method is fairly robust, being almost completely accessible to those accessing websites using screen readers and text-only rendering consoles and browsers.
It is also a perfect method of delivery for search engines, delivering more relevant content to the search engine spiders while hiding the superfluous, presentational images that are meant to solely decorate the document, rather than strictly present data or information.
Google tends to disagree (at least that was their strict policy up until a couple days ago). They have a tendency to sometimes contradict themselves when it comes to web publishing policies, so let’s have a look at what is right and wrong in the land of SEO and image replacement.
Google on Hidden Text and Links
Google believes you should not hide text when publishing your websites. The definition of hiding text includes:
- Using white text on a white background
- Including text behind an image
- Using CSS to hide text
- Setting the font size to 0
Hiding text on your website can cause your site to be perceived as untrustworthy, since it presents information to search engines differently than it does to visitors.
A disclaimer is provided, stating you can be removed from the Google index for such practices. This is not vague and paints a clear picture of Google’s view on hiding text in any form.
Google on Cloaking
Cloaking, quite similar to our last definition of hiding text, refers to the practice of presenting different content or URLs to users and search engines.
When I think of cloaking, like many of us, I would define it as identifying a user agent (search engine vs. human user) by the IP address and then serving up different content on the server side, depending on the type of visitor.
This could also be achieved with a javascript redirect, but most of the logic or IP sniffing would still be handled server-side, so you wouldn’t imagine it would have anything to do with CSS and the client-side presentation of your HTML document.
Google used to have the same definition, but lately their webmaster guidelines have been rewritten to include new ideas on the subject of cloaking.
Some examples of cloaking include:
- Serving a page of HTML text to search engines, while showing a page of images or Flash to users.
If you are to use Flash or Javascript, there is a Google recommended solution for legitimately providing content to your non-Flash or Javascript users, the
- Javascript: Place the same content from the Javascript in a no script tag. If you use this method, ensure the contents are exactly same as what is contained in the Javascript, and that this content is shown to visitors who do not have Javascript enabled in their browser.
This obtrusive inline element is actually not necessary when developing modern, standards-based websites. Proper javascript development will present the same information, whether javascript is turned on or off in the user’s browser.
Google on sIFR
It seems Google has a black and white stance on development methods it deems as cloaking and hiding text, otherwise known as deceiving and untrustworthy.
So a lot of developers were surprised when Google officially released an article recommending sIFR, an obvious method of cloaking and hiding text when it comes to Google’s official definitions of the terms.
sIFR, introduces small snippets of Flash files into your document so you can use fonts that you are not able to replicate with simple HTML equivalents. It makes your pages look better by serving up different content to the user and to the search engines.
When a sIFR page loads, it runs a javascript function that hides the HTML text you would like to change and embeds flash content into the page using Javascript, the DOM, and CSS to create the effect.
It’s a great method, along with all of the other image replacement techniques out there, to add some style to your page that you cannot achieve with the current limitations of HTML. Let’s not kid ourselves though–according to Google’s definition, this is cloaking.
The code that hides the HTML text you want to replace is this:
span.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden;}
With this CSS code, we are now breaking the following Google Webmaster Guidelines:
- Using CSS to hide text
- Setting the font size to 0
- Including text behind an image
The general implementation of sIFR also breaks the following cloaking definitions:
- Serving a page of HTML text to search engines, while showing a page of images or Flash to users.
Finally, the one piece of good advice that Google gives us with regards to alternate content using the
Are we to be banned if we use this dubious method? It appears that Google is sending us mixed messages and methods, so what is a modern day web developer to think of all of this?
Web Development on SEO
It’s clearly time to take a stand against mixed messages from the search engine giants who appearing to be ignoring (or worse, meddling with) the best practice coding from web developers across the globe.
Google is brilliant, but they shouldn’t dictate how we do everything on the web. I think it’s time that we make some consistent personal guidelines when it comes to image replacement, and how we perceive cloaking and untrustworthy publishing practices in general.
If you are serving or changing content specifically for the purpose of manipulating your search engine rankings, you are cloaking or doing something untrustworthy, and it’s not something you usually do on accident.
If you are using a method of development that is well-thought out and aids in the accessibility and relevant findability of your document, it doesn’t matter what the search engines think and you should not be compromised by inaccurate web publishing guidelines. You are actually helping the search engines by using some of these image replacement methods.
Image replacement is not cloaking, but it is hiding text. Google just need to reassess their guidelines and figure out why this isn’t a bad thing.
