SEO Flash

Files

Problem Description

SEO (search engine optimization) refers to the tailoring of web based content so that search engines like Google can traverse it and index it with their “spiders” (scripted site crawlers). These spiders are able to traverse the content because it is similar to a tree with branches. The crawler can start at the trunk and weave itself to all of the branches, following all the paths to their ends.

Sites use Flash as modules on pages or as entire gateways to traversable content. By the very nature of how Flash is distributed (binary files), it is not easily searchable, indexable, or deeplinkable by spiders of search engines (nor do you want to embed your content into a Flash file). This brings up the question of what Flash really is and whether you would even want to traverse inside of a Flash file.

In traditional web development you have content (markup/XHTML) and styles (CSS). If architected properly, Flash can loosely be thought of as a style in this type of architecture. Flash is merely the presentation of specific pieces of data on a page. One example of this might be a list of a four image navigation bar that link to product pages. In HTML they are represented in a table, where in Flash they are a 3D carousel. Essentially, Flash is a fancy way of styling the data. Flash doesn't contain the content, it loads it in creating a separation of content and presentation. This type of approach allows spiders to traverse the content, non Flash carrying browsers to offer different style sheets to present the content, and Flash enabled browsers to replace the content.

Solutions

Modules

As mentioned before, Flash can be thought of as styling of data. However, in order to style that data, it needs to have access to it. There are 4 ways that we will discuss for getting your data into Flash. Each of these solutions requires the data to be embedded inside of a DIV tag in an HTML page and the use of javascript to rewrite that content area with Flash.

For each javascript rewrite we are using the widely used open source SWFObject (likely to be adopted by Adobe in the near future).

As mentioned before, only when a browser specifically writes out the SWF the content will be replaced with a SWF “view”. In all other circumstances you can simply apply different CSS (different platforms) or no CSS at all (spiders).

(NOTE: each solution has an example that illustrates it in context)

Duplicating your data

This is the simplest approach, but not the most streamlined. It consists of placing your data on an HTML page and also creating an XML file with the same data (minus the rest of the HTML content). The HTML page replaces the content div and ignores the content, loading it instead from a separate XML doc.

Benefits:

Your XML is very easy to parse.
This typically works with existing modules that were created. If your content is exceedingly large for pages, it may be better to have it separated out to reduce load.
Your module is able to travel (viral, desktop, etc.).

Cons:

You cannot use this approach for paged data.
You have the same content on both your HTML page and your XML.

Example

Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>FlashDuplicateContent</title>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      function init()
      {
        swfobject.embedSWF("FlashContent .swf", "flashContent", "600", "480", "9.0.0", "expressInstall.swf", {configURL:"flashDuplicateContent.xml"}, {});
      }
    </script>			
  </head>
  <body onload="init();">
    <div id=”flashContent>this is the content for page 1</div>
  </body>
</html>

Data

<?xml version="1.0" encoding="utf-8"?>
<content>this is the content for page 1</content>

Feeding your data at initialization

This approach consists of placing your data on an HTML page and feeding the content directly to the SWF when embedding it. You would do this by grabbing the div that the content is in and just feeding the whole XHTML to Flash as a FlashVar for it to parse and use.
Benefits:
- You don't have to load your content twice, it is immediately available to parse.
- Content is not duplicated, but exists in one page.
- Works for pages of data.
Cons:
- You are linking your SWF styling to your content. It can't exist independently of it, since it relies on the page to feed it. In the case of viral widgets you are unable to “take” your content and travel with it. It becomes harder to break your content out of your site silo.
Example
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>FlashDuplicateContent</title>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      function init()
      {
        swfobject.embedSWF("FlashContent .swf", "flashContent", "600", "480", "9.0.0", "expressInstall.swf", {data:document.getElementById(“flashContent”).innerHTML}, {});
      }
    </script>			
  </head>
  <body onload="init();">
    <div id=”flashContent>this is the content for page 1</div>
  </body>
</html>
 
```

Loading/Parsing your existing data in the XHTML

This approach consists of placing your data on an HTML page and providing Flash with the path to that page. Flash in turn reloads (it is cached at this point) and parses the page for the data. There is a definitive relationship between the DIV id and the SWF, since it has to know where to get it's data.

Benefits:

Your module is able to travel (viral, desktop, etc.).
Works for pages of data.

Cons:

If you are using AS2 it is harder to traverse the XHTML in the Flash parser to find the content.

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>FlashDuplicateContent</title>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      function init()
      {
        swfobject.embedSWF("FlashContent.swf", "flashContent", "600", "480", "9.0.0", "expressInstall.swf", {configURL:document.location, contentID:”flashContent”},  {});
      }
    </script>			
  </head>
  <body onload="init();">
    <div id=”flashContent>this is the content for page 1</div>
  </body>
</html>

XML and XSL

This approach consists of placing your data in a pure XML file and associating any instructions (javascript, etc.) in a linked XSL style sheet. It is primarily only used in applications or sites that primarily only have a Flash representation, since there are issues with extra javascript instructions on the page.

Benefits:

Light weight as it doesn't include any markup other than pure content.
Your module is able to travel (viral, desktop, etc.).
Works for pages of data.

Cons:

Only supported by most recent browsers.
Issues with inline scripts like google's Urchin/page tracking.

Example

Data

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="audioGalleryStylesheet.xsl"?>
<div id=”nav”>
  <a href="http://musicbox.gdb-dev.com/myplay_jukebox/xml/artists/5657" id="5657"><![CDATA[Daughtry]]></a>
  <a href="http://musicbox.gdb-dev.com/myplay_jukebox/xml/artists/155" id="155"><![CDATA[Justin Timberlake]]></a>
  <a href="http://musicbox.gdb-dev.com/myplay_jukebox/xml/artists/246" id="246"><![CDATA[T-Pain]]></a>
</div>
<div id=”content>SonyBMG list of pop artists</div>

Stylesheet / Processing instructions

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>SonyBMG AudioGallery</title>
      <link href="jukeboxx.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="swfobject.js"></script>
      <script type="text/javascript">
        function init()
        {
	      swfobject.embedSWF("FlashLoadedContent .swf", "flashContent", "600", "480", "9.0.0", "expressInstall.swf", 
                            {baseUrl:"/myplay_jukebox/xml/", currentUrl: window.location}, {});
        }
      </script>
    </head>
    <body onload="init();">
      <div id="audioGalleryHeader"></div>
      <div id="audioGalleryPlayer"></div>
    </body>
  </html>
  </xsl:template>
</xsl:stylesheet>

Entire Sites/Large Applications

If you have an entire Flash site or several “pages” or “depths” of content that a Flash application traverses, your problem is essentially the same. The difference is that all of the content on the HTML page is reserved for Flash vs a small piece. So instead of a single DIV on the page, where other elements are rendered in HTML, your page is essentially the DIV.

The point here is that you approach the solution exactly the same. However the key to it, is to think of your Flash content just as you would a site's normal content. The content should be represented in XHTML (XML valid HTML) and linkable/traversable, which will allow the spiders to traverse it. All of your content “pages” can be represented by XHTML "pages".

With server side scripts, databases, etc. this is a very simple automated process of generating all the needed content.

Example

Page One

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>PAGE1</title>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      function init()
      {
        swfobject.embedSWF("FlashLoadedContent .swf", "flashContent", "600", "480", "9.0.0", "expressInstall.swf", {configURL: window.location}, {});
      }
    </script>
  </head>
  <body onload="init();">
    <div id="navigation">
      <a href=”page1”>PAGE1</a>
      <a href=”page1”>PAGE2</a>
    </div>
    <div id=”content>this is the content for page 1</div>
  </body>
</html>

Page Two

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>PAGE1</title>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      function init()
      {
        swfobject.embedSWF("FlashLoadedContent .swf", "flashContent", "600", "480", "9.0.0", "expressInstall.swf", {configURL: window.location}, {});
      }	
    </script>			
  </head>
  <body onload="init();">
    <div id="navigation">
      <a href=”page1”>PAGE1</a>
      <a href=”page2”>PAGE2</a>
    </div>
    <div id=”content>this is the content for page 2</div>
  </body>
</html>

As illustrated in the basic example above (which tells the Flash the path of the content to load), both pages are simple XHTML pages whose entire content is loaded into Flash. The navigation in both pages show the simple route that the spider can follow to traverse the content.

Summary

As you can see making Flash SEO compatible really just requires you to understand how your content should be represented. You are not really trying to traverse an internal Flash element but rather have all your content that is consumed by Flash external and in a format that adheres to the traditional traversable structure that spiders are accustomed to.

Depending on your objectives, telling Flash the page it is embedded on and having it reload that XHTML page and parse it is the best option of all the solutions. It works with paged data, makes the module travel enabled, and doesn't have issues with extra js instructions.

Comments

Kenny,

Great article. I think this subject is so confusing for many Flash designers / developers, as they have never really had to tackle this subject before. This is the most clearly written post which describes the most common solutions and their limitations.

Like you, I ended up implementing the XHTML loading technique along with SWFObject and SWFAddress to give deep linking capabilities.

A few other related thoughts and resources for others:

- make a sitemap.xml for the Google spiders etc to index all of your deep link pages.
- check out the SWFAddress examples to see how to rewrite content / get deep linking happening
- Razorfish / Avenue A have a good PDF on their implentation
- Blitz Agency on their tool to automate the XHTML content for SEO / Flash based sites

Cheers,
Aran

February 5, 2009 - 5:27pm

Joined: 02/05/2009

Member: misterhee

I agree, great article, very valuable!

I just want to also mention the perhaps obvious point that these SEO-alternative content techniques aren't just for SWFs that rely on dynamic data. Even if you have the oldest of old-school flash sites, with all of the content burned into the SWF, you can still easily retrofit the site with alternative content in the <div> where the swf will load. This is an easy modification to pre-existing sites that can reap big rewards.

Chris Spurgeon

February 9, 2009 - 4:19pm

Joined: 02/05/2009

Member: chrisspurgeon

Seo Services IndiaFor SEO Services India visit Profit By Search A SEO Company in India offering SEO Services, SEO Consultancy Services to Companies in North America & Europe.
Web Design IndiaNes Web Design India is a PHP Development, PHP Web Development Company India offering PHP, Web Design & Web Development services India.
Search Engine OptimizationSearch Engine Optimization Services India: For Search Engine Optimization, Search Engine Marketing Services, Visit Search Engine Optimization Company India

July 16, 2009 - 9:32am

Joined: 07/16/2009

Member: nit sharma

Discount vouchers
Get all your free, discount vouchers from a single website - voucherseeker.co.uk.

Cars
Buy and sell new and used cars on our website. Thousands of second hand used cars for sale in the UK. We update our used car stock regularly to ensure you get the best deals.

Celebrity News
Keep up to date with the latest celebrity gossip and fame news. Track what’s happening in the Big Brother house as well as other showbiz and Hollywood news.

July 29, 2009 - 8:41am

Joined: 07/29/2009

Member: anthonybrophy123

Thanks for this info......................

Real Estate India
Real Estate Properties India: Buy commercial property, Residential property in India. Commercial & Residential properties, Flats & Apartments, Houses for sell in India.

Real Estate Video
Watch, Publish & Post Real Estate Video Online: atoneplace.tv is the best source for Online Real Estate Video, Properties Video Clips, Real Estate Online Video. Post Real Estate Video Clips at no cost.

Real Estate Questions

July 29, 2009 - 8:44am

Joined: 07/29/2009

Member: billybyrne123

Before you do any SEO you need to research the part of the web you will be trying to change. Many people believe this is the most important step in the SEO process.

July 30, 2009 - 1:28am

Joined: 07/30/2009

Member: suzain

Arcadelady offers over 1.000 hand selected Free Online

Games . We offer Quality not quantity! Free Online Games,Flash Games For Free, Mario

Games, Tower Racing Games.

August 8, 2009 - 6:47am

Joined: 08/08/2009

Member: sharmagaurav

Great information and explained very well.

Voucher Codes

August 25, 2009 - 11:15am

Joined: 08/25/2009

Member: voucheralerts

Excellent article. But the subject is little tough for flash designers. Thanks for the posting.

Reputation Management Service, Seo Company

August 28, 2009 - 4:06am

Joined: 08/28/2009

Member: RKweb

SEO Flash

Files

Problem Description

Solutions

Modules

Duplicating your data

Example

Page

Data

Feeding your data at initialization

Example

Loading/Parsing your existing data in the XHTML

Example

XML and XSL

Example

Data

Stylesheet / Processing instructions

Entire Sites/Large Applications

Example

Page One

Page Two

Summary

Comments

View

Category

Subscriptions