Website Design & Marketing

Tweet this on Twitter Bookmark this on Technorati Stumble this on StumbleUpon Bookmark this on Reddit Bookmark this on furl Bookmark this on Digg Bookmark this on Delicious Bookmark this on Blinklist
Subscribe to our RSS Feed
SWFaddress solves Flash SEO problems
Posted in Javascript / AJAX, Web Design & Development on October 8th, 2009 by Rusty

Tags: , ,

One of the biggest draw backs of flash is using back and forward buttons in the browser and Search Engine Optimization in the URL’s. Well now look no further. Introducing SWFaddress – a small JavaScript library that lets you create virtual URLs for Flash and Ajax. SWFaddress has been around since 2006, and surprisingly not all Flash sites are utilizing this tool.

However, SWFAddress is really only as good as your implementation of it. A sloppy implementation makes it more of a liability than a benefit. So let’s show you the right way to get it working.

SWFAddress can be quickly added to a Website that uses SWFObject only by inserting the JavaScript files into your header section like this:

<script src="swfobject/swfobject.js" type="text/javascript"><!--mce:0--></script>
<script src="swfaddress/swfaddress.js" type="text/javascript"><!--mce:1--></script>

Now the internal implementation of SWFAddress is somewhat simple and straight forward. Once a Flash movie containing the library is embedded in an HTML page, it automatically initializes itself and provides the developer with notification of state changes that need to be implemented. This might not be the easiest task for everybody, but SWFAddress streamlines the process by fully supporting testing workflow inside the Flash Program and Standalone Player. URL changes can be invoked from mouse-click events, frame actions, or HTML links.

Here is sample code that can be added to a MovieClip button:

this.onRelease = function () {
 
      SWFAddress.setValue("/portfolio");
}

For links in HTML-formatted TextFields, the following approach should be used:

<a href="asfunction:SWFAddress.setValue,/portfolio/">Go to Portfolio</a>

SWFAddress has a single onChange event where the navigation logic needs to be coded. The complexity may vary depending on the Website, but if it’s planned from the beginning, it may improve maintainability by centralizing all the controller actions.

Here is an example of a running logic for the onChange event:

SWFAddress.onChange = function () {
 
      var navigation = new Object();
      navigation.home = {frame: 1, title: "Welcome"};
      navigation.about = {frame: 10, title: "About Us"};
      navigation.contact = {frame: 20, title: "Contact Us"};
 
      var value = SWFAddress.getValue();
 
      website_mc.gotoAndStop(navigation[value].frame);
 
      SWFAddress.setTitle(navigation[value].title);
}

The setTitle method allows you to add unique titles to every section of the Website and they will appear in the browser’s titlebar. It should be used inside the onChange event in order to correctly display the initial title value when the page loads.

With SEO in mind SWFaddress covers this flawlessly. It enables the generation of real links that expose the appropriate content to search engines. The magic happens with some interesting URL rewriting and some trivial server-side code. The following is an example how it works for a Website located at http://www.domain.com that contains a portfolio section.

SWFAddress uses http://www.domain.com/#/portfolio/. The URL that can get indexed is http://www.domain.com/portfolio/ and therefore it should exist as a link in the HTML code of the page. When someone visits the indexed address, the rewriting functionality makes a redirect to the URL that SWFAddress expects. Everything happens on the server side so no user interaction is required.

The situation is different when the same link is followed by a search engine bot (spider). In this case the address is rewritten without any redirection to http://www.domain.com/?swfaddress=/portfolio/. The page that handles all this should use a server-side technology in order to generate the appropriate content depending on the “swfaddress” parameter value.

Page requests containing GET parameters (?var=something) such as http://www.domain.com/#/portfolio/?desc=true&year=2001 are handled similarly. The search engines will index http://www.domain.com/portfolio/?desc=true&year=2001 and the script will expect http://www.domain.com/?swfaddress=/portfolio/&desc=true&year=2001.

The result is a fully indexed Flash Website with deep linking support. This works great and the result is even better. Now we can all have search engine friendly Flash sites. YAY!

While this approach improves the usability of Flash content over the Web, it also requires an additional effort, such as some manual work for static html websites and some smart code for dynamic ones. The best case will be a Flash Content Management System that automates the whole process.

SWFaddress promises to continue adding interesting functionality like AJAX support, transparent user tracking with Google Analytics, and enhanced event handling. It should definitely be considered for your next Flash project.

Download SWFaddress: HERE
View an Example Site: HERE

Related Blogs

Related Blogs

Related Posts:

  • No Related Posts

« Google Local Business Center Just Got Enhanced | Suncoast ID »

This entry was posted on Thursday, October 8th, 2009 at 7:53 am and is filed under Javascript / AJAX, Web Design & Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.