Article Keyword Videos to Watch
SEO
Click on the image to start the video.
|
Related Topics
Images - Links - Articles
San Francisco
Related Images
|
Search Engine Optimizing and Accessible Flash!
Search Engine Optimizing and Accessible Flash!
One of the huge drawbacks to flash is the inaccessibility, and the hard time that search engines have in understanding flash sites (which lead to poor search rankings). Most of the recommendations designers have towards making it accessible and search engine friendly is to simply use flash sparingly and never use it to provide functional elements like navigation.
However this really limits what you can do with flash, and prevents you from taking advantage of all that flash can offer. There are many ways you can make flash accessible and search engine friendly while using it for more than simple design aspects.
The Basics -
If you feel your whole site needs to be flash, you should at least break it up into several pages and add an html sitemap. You can link to the sitemap at the bottom of every page so that search engines with then acknowledge that the other pages even exist. Another less than optimal, but acceptable method is creating an alternative text-only or html duplicate of your flash site.
I don't find either of these to be great ways to deal with flash. Instead breaking up flash elements, and having a mix of HTML and flash allows much more remote to provide accessible alternatives. Most designers will be saying “Well Duh” at this point, but I am talking about doing more than just using flash for banners or simple animation.
Most designers will tell you that using flash for navigation is an accessibility and search engine death wish. However, with new CSS methods you can now have navigation hidden behind flash. With these methods, users with flash see the bells and whistles that you spend so much time working on, and those who do not can still navigate normally (including search engines).
This is often refered to as Fharner Image Replacement, but instead of using a display: none box – it uses a span with a large text indent and overflow: hidden to hide the navigation and/or text. (developed by Mike Rundle)
CSS
#navigation {
/* FLASH DETAILS */
}
#navigation span {
text-indent: -9000px;
overflow: hidden;
display:inline;
}
HTML
<div id=”navigation”>
<object]
<!-- Flash Object -->
</object>
<span>
<a href=”index.html”>Home</a>
</span>
</div>
The drawbacks:
This will work great for those who can not run CSS, have screen readers, and search engines. However, those who do not have flash or have flash disabled it will not show the navigation by default. To work around this, we can use javascript to enable/disable the flash and text replacement. I recommend using the Flash Detection script by Dithered.com
CSS [flash.css]
#flash_hold {
}
#flash_hold span {
text-indent: -9000px;
overflow: hidden;
display:inline;
}
non-flash CSS [nonflash.css]
#flash_hold object{
display: none;
}
/* Remove the text indent, so menu is visible */
#flash_hold span {
text-indent: 0px;
}
Javascript This will make the menu visible, with only a little increase in effort for the viewer.
<script type="text/javascript" src="flash_detect.js">
//<![CDATA[
function getFlashVersion() { return null; };
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var requiredVersion = 5;
var flashVersion = getFlashVersion();
if (flashVersion > 0) {
activeCSS('flash');}
else if (flashVersion == 0) {
activeCSS('no_flash');}
else if (flashVersion == flashVersion_DONTKNOW || flashVersion == null) { activeCSS('no_flash');}
//]]>
</script>
Now we just need a Script to switch the CSS between Flash & Non-flash, this can be linked in the head tags
<link rel="alternate stylesheet" title="flash" href="flash_optimize.css" type="text/css" />
<link rel="alternate stylesheet" title="no_flash" href="no_flash.css" type="text/css" />
<script type="text/javascript">
// activeCSS: Set the active stylesheet
function activeCSS(title) {
var i, oneLink;
for (i = 0; (oneLink = document.getElementsByTagName("link")[i]); i++) {
if (oneLink.getAttribute("title") && findWord("stylesheet", oneLink.getAttribute("rel"))) {
oneLink.disabled = true;
if (oneLink.getAttribute("title") == title) {
oneLink.disabled = false;
}
}
}
}
// findWord: Used to find a full word (needle) in a string (haystack)
function findWord(needle, haystack) {
return haystack.match(needle + "\b");
}
</script>
Here is a working example of an accessible and search engine friendly page, using this technique!
http://www.3point7designs.com/seoflash
About the Author: Ross Johnson is co-founder of Ann Arbor Web Design company 3.7 Designs. He also runs a Web Success Strategies blog for designers & non-designers.
|
