A recent Google Webmaster blog post finally put the last nail into the coffin with regards to content substitution or to give it the demonic blackhat term Cloaking...
A technique like sIFR still lets non-Flash readers read a page, since the content/navigation is actually in the HTML -- it's just displayed by an embedded Flash object. Source:http://googlewebmastercentral.blogspot.com/2007/07/best-uses-of-flash.html
So its ok for us to write text and then substitute that text with a flash or image file, now to be fair most SEO I think have been doing this with CSS image substitution for some time, but this is the first time that I have seen Google come out and say that its ok to use these techniques.
So what can you do?
CSS image substitution
Lets do a simple example replacing the header text in its nice h1 with an image, this is a pretty common technique, allowing you to display your nice logo rather then text but still gain keyword benefits of the H1 tag. The advantage of this technique is not only is it search engine friendly it complies neatly with accessibility guidelines as well. HTML Code
and the CSS code is pretty straight forward, it swaps out anything in the h1 tag in the header with an image CSS Code <div id="header"><h1><a href="http://www.example.com" title="Example Site">Example site</a></h1></div>
/* CSS Image replacement */ #header h1 {margin:0; padding:0;} #header h1 a { display: block; padding: 150px 0 0 0; background: url(path to image) top right no-repeat; overflow: hidden; font-size: 1px; line-height: 1px; height: 0px !important; height /**/:150px; } Simple this technique is one of many its both very SEO friendly and accessible.
Flash Substitution using sIFR
sIFR is not designed as a full blown page substitution like SWFObject but rather for typography uses, such as pretty fonts, its more flexible method then image substitutions as it allows scaling ect. It works like this...
- A normal (X)HTML page is loaded into the browser.
- A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
- If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".
- Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
- Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.
Source: Mike Davidson sIFR resource page
Rather then go into massive amounts of detail have a look at the example page and try it out for yourself by downloading sIFR
Flash substitution using SWFObject
We have already covered using SWFObject in our look at making flash sites SEO friendly but its worth just quickly revisiting it works in much the same way as sIFR and many ajax based application substituting data in a div tag with an SWF object. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script type="text/javascript">
Javascript
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hello World </title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="flashcontent">Hello World</div>
<script type="text/javascript"> var so = new SWFObject("helloworld.swf", "helloworld", "400", "200", "8", "#000000"); so.write("flashcontent"); </script>
</body>
</html>
var so = new SWFObject("helloworld.swf", "helloworld", "400", "200", "8", "#336699"); so.write("flashcontent");
so.addVariable("myvariablename", "variable");
so.write("flashcontent");
</script>
So what was the fuss about?
Well to be fair Google was never really into chasing people who used substitution techniques though they can obviously be used inappropriately, it didn't even chase people for IP delivery (as long as they didn't set out to deceive) however Google is unchanged in its policy regarding deceptive cloaking now what constitutes deceptive cloaking is down to Google, but certainly it would appear this fringe type of cloaking is now green lights all the way. p.s sorry about 2 week absence got our toes wet...
Great post! Another technique you can use is to position the text off of the viewable browser window and position a background image in its place. This way you wont actually be ‘hiding’ the text. Although this is not an issue now if Google says it’s OK
Using a background image and hiding the text isn’t ways considered an ‘accessible’ alternative… what happens if images are disabled, but CSS is still enabled? - something people can do when on a slow internet connection. I find it easier to just use a standard tag, with the “alt” set to the text equivalent… this is still not perfect, as the image cannot be re-sized, but is still better than these over-complicated CSS off-screen/masking techniques. I would be interested however to see if the search engine spiders consider to be the same as text… in theory it should be the same… but no-one has really said either way.
Probably the most accessible method is image replacement and certain well within WAI guidelines. an image with alt attribute would be a second best solution in this case. Alt attributes certainly do provide some benefits to search engines, but nothing like well structured headings. SEOMoz have done an excellent ranking guide which you may find useful, Ranking factors.
Here I found one more great article about cloaking. Take a look at that http://seoz.wordpress.com/2007/08/17/cloaking/
I’ve been wondering about this. Cloaking is being done for legitimate reasons in some cases. I was thinking about noting it within my latest post on how to avoid seo malpractice I still wouldn’t do it however because its still a risk that I’m not willing to take. At least not yet. Great post! I need to do more homework in this area.
Venture Skills Team writes: > Probably the most accessible method is image > replacement and certain well within WAI > guidelines. an image with alt attribute would > be a second best solution in this case. Which image replacement method? Most of them don’t scale correctly when the font-size changes… although sIFR is fairly close, its not perfect (only works on page load). An with an alt attribute for headings works in all browsers (inc screen readers)… and you can always put the within a to get that semantic value. Although, it also suffers from the lack of scaling… and no, setting with/height in em’s is not a solution without proper vector images. But having said that, does not suffer from the browsers with CSS or JS support, but with images disabled (taking the image replacement technique is using images, not Flash)… this situation occurs with users of slow internet connections who want to to improve the page loading times. Also, it cannot be considered as cloaking by the search engine spiders, no matter how cleaver they become… as you are providing exactly the alternative… not switching out elements with JS/CSS… which could be seen as dubious/questionable. So, what advantages does an image replacement method have? Sorry… still need to be persuaded… although, ideally I would prefer to have good font support in browsers, so they can do it natively… http://www.alistapart.com/articles/cssatten
cloaking is still a controversial subject, although there is nothing bad about doing it. Here is an article related to cloaking. Its worth to read it http://seomization.blogspot.com/2007/10/cloaking-black-hat.html
This seems really interesting to me and seems like the right thing to do. My problem is I currently have my logo image swap on hover. I do this so it looks like the logo is being “pushed” when you hover over it. I do this CSS but when I try to mix your suggestion above with the ability to swap the image on a hover things don’t pane out. Can you provide some input to accomplish this?
I think this is very interesting as it does make sense to allow reasonable cloaking of images names especially with css and flash, its just whether people are going to exploit this.
Responses to this post: