Fastnet Web Design Sussex & Content Management System CMS | London | Brighton | Worthing

What is a CMS

Content management allows you to be self sufficient in the addition and editing of your website content
more...

CMS features

The content management system (CMS) uses tested technology in a user friendly and intuitive interface
more...

Online Video Production

Question: So, how do you make sure you your company is shown in the best way? Answer: Online Video
more...

Home

Blog entries

How to SEO Flash

Saturday, 24 May 2008

Flash gets a bad rap, undeserved in my opinion, for harming search engine visibility.
How to SEO Flash

Flash gets a bad rap, undeserved in my opinion, for harming search engine visibility. Why are search engine optimization (SEO) practitioners concerned about Flash, and how can we SEO Flash content? The main problem with Flash is that search engines don't yet understand it, and probably won't in the near future. Flash includes logic and can take input from the visitor, but search engines are designed to handle static content. Flash is actually a running program, so it's much harder to analyze than plain HTML code.

The leading web development tool, Adobe Dreamweaver, embeds Flash in web pages with code that fails to provide accessibility for visitors or search spiders who cannot handle Flash. Instead of using the default code, my recommendation is to hand code Flash pages with primary HTML content, and a method of automatically testing for Flash support before attempting to insert the movie. The primary HTML content can be search optimized as if the Flash wasn't there, while the Flash provides an enhanced user experience for those visitors who have the necessary Flash player.

The April 11, 2006 release of Microsoft's popular Internet Explorer (IE) browser includes an update ("Eolas") that prevents ActiveX-based Flash controls from working properly. When the user attempts to interact with the Flash, a tool tip appears, stating, "Click to activate and use this control." That extra click is an annoyance. Fortunately, the programming technique described in this article solves the Flash Eolas problem.
Requirements for Successful Use of Flash

Flash animation is a great way to present complex content because it allows the designer to put more content in a finite space, without wrecking page design. For technology sites, Flash is an ideal way to present a slide show or movie explaining a complex product. At the other end of the spectrum, art and entertainment sites have a real need for multimedia, and Flash is the perfect solution.

When using Flash, we'd like to satisfy each of these objectives:

Clean design

Search Engine Optimization

Accessibility for a wide variety of browsers, including screen readers and mobile phones

Code validation and standards compliance

Correct functionality with IE

SEO Flash Programming

My recommended Flash SEO method uses a DIV with search-engine-accessible, primary content, and a Javascript function called SWFObject() to detect when browsers are capable of viewing Flash. When an appropriate version of Flash player is present, the Javascript manipulates the page's document object model (DOM) to replace the primary content with the Flash movie. Most search engine spiders can't handle Flash, so they will elect to view the primary content. The primary content may contain links, headings, styled text, images—anything we can add to an ordinary HTML page. With SEO copyediting and coding skills applied to the primary content, Flash becomes a non-issue.

Flash accessibility programming isn't spamming, as long as the primary content and the visible movie are essentially the same. The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) specifically states that multimedia content should have an alternative representation available. Accessibility programming creates the benefit of presenting visual information without losing the visitors and search engines who depend upon textual content.

As of July 2007, I discussed this method with Dan Crow of Google. He warned that this programming method could draw attention because of the possibility for abuse. If you use this method, make sure the alternative content is a faithful representation of the Flash content, and avoid combining this with other coding methods that could be abused. While this SEO method is not abusive, it is aggressive because there is a small risk that the search engines could mistakenly decide that the primary content is a form of cloaking.
SWFObject and UFO

Please visit Geoff Sterns' blog, deconcept, for a full explanation of SWFObject() and to download the SWFObject.js file required for this solution. Another open source solution, UFO (Unobtrusive Flash Objects), is available from Bobby van der Sluis. Both are conceptually similar.
Example: Making Flash Home Page and Flash Menus Spiderable

The sample code below shows part of the Flash heading and menu code of Marc Abrahms Photography. The interior pages of this site are now indexed because search engines can find the links in the primary content.

<head>


<script type="text/javascript" src="/jscript/SWFObject.js"></script>
</head>
<body>


<div id="flash" align="center">
   <p><a href="/gallery/index.php?category=gallery/1_Prints">prints</a> |
      <a href="/gallery/index.php?category=gallery/2_Posters">posters</a> |
      <a href="/gallery/index.php?category=gallery/3_Books">books</a> |
      <a href="/gallery/index.php?pageId=115&start=0">my account</a>

      
   </p>
</div>

<script type="text/javascript">
    var fo = new SWFObject("homepage_v1.swf",
           "flash", "680", "390", "5", "#3a403c");
fo.write("flash");

</script>

Flash accessibility programming will not magically cause a site to rise to the top of the rankings, but this Flash SEO method will eliminate any ranking disadvantages associated with Flash.
Example: Making Flash Slide Show Content Visible to Search Engines

A second example, from the Virtutech web site, shows how to insert rather long content into a fixed space. We use a DIV, and set its CSS property "overflow:auto" to create a scrolling text area. This prevents the page layout from breaking when the alternative content is displayed. To see the alternative content load the Virtutech home page on a browser with Javascript disabled.

<div id="movieAlt"><div id="movieAltInner">

     <h2><a href="/products/index.html">Simics</a> is
     used to develop the embedded
     software that runs electronic devices such as:</h2>

     <li>Aerospace hardware</li>

     <li>Automobile control systems</li>
     <li>Telecommunications infrastructure</li>
     <li> High-end servers</li>
     </ul>


     <p><em>Hardware:</em> <strong>Satellite Control
     System</strong></p>
     <p><em>Challenge:</em> Unable to test software with satellites
     on orbit. How
     to verify new software?</p>

     <p><em>Resolution:</em> Using Simics, the developers
     can run software
     quality tests on the ground, to ensure that the software works correctly
     before it's installed.</p>
     <h2>Industry: Automotive</h2>
     <p><em>Hardware:</em> <strong>Electronic Control
     Unit</strong></p>

     <p><em>Challenge:</em> Need to develop software now, but
     the ECU won't
     be available for months</p>
     <p><em>Resolution:</em> Simics enables programmers to
     develop and test
     the software before the hardware is available, reducing time to market.</p>

     <h2><em>Industry:</em> Telecommunications</h2>
     <p><em>Hardware:</em><strong> Wireless Network Equipment</strong></p>

     <p><em>Challenge: </em> You have twenty programmers. Each
     needs a complete
     system for testing. They cost MILLIONS.</p>
     <p><em>Resolution:</em> Using Simics to create a model
     of the target hardware,
     each programmer can have his or her own virtual device for software testing
     and debugging, without breaking your budget.</p>

     <h2>Industry: Internet</h2>
     <p><em>Hardware:</em> <strong>Network servers</strong></p>
     <p><em>Challenge:</em> Software bugs keep popping up.
     Some take weeks to
     reproduce and fix. You are running out of time.</p>

     <p><em>Resolution:</em> With Simics, programmers can
     run the program forwards
     and backwards to quickly identify, recreate and repair bugs.</p>
</div></div>
<script type="text/javascript">
var fo = new
SWFObject("flash/virtutech_intro.swf", "mymovie", "497", "287", "7", "#ffffff");
fo.write("movieAlt");
</script>

The CSS code:

#movieAlt {
    height: 287px;
    width: 497px;
    overflow: auto; /*Scroll bar on HTML content div*/
    }
#movieAltInner {    /*For IE's faulty box model*/
    padding: 10px 20px;
    }

In addition to these sites, we've used this Flash SEO method on many other high traffic sites. The code has been served hundreds of thousands of times with virtually no complaints. Sites using this Flash SEO method have achieved top rankings for keywords found only in the Flash content.
All Flash Sites

A site built entirely with Flash suffers a great disadvantage because it lacks page structure to organize the content, internal linking, and unique page titles. One remedy is to create distinct HTML pages to represent each Flash "page," and install the Flash movie on each and every one of the HTML pages. When a visitor requests the page, they'll see Flash if they can handle it. Otherwise, a non-Flash visitor, such as a search engine, will be able to spider the site. If a user follows a search result onto one of the inner pages, they'll get the same Flash experience because the movie is available on every page. Another approach is to divide the Flash into pieces and put the relevant piece on each page.

Slicing up the Flash can result in page transitions that don't provide the seamless effect that you want to create. To get the best of both worlds, pass a parameter into the Flash movie using FlashVars. The same movie can appear on each HTML page, but depending on the parameter value, the movie can start at an appropriate point to show the Flash content that corresponds to that page. To get rid of all the extra pages, but still be able to reference different parts of the Flash piece, add a # and a tag to the end of each URL, and pass that tag into the Flash. This approach can make the back and forward buttons work properly, and allow people to bookmark specific parts of the Flash site.

It is also possible to use PHP scripts to pull both the primary HTML content, and the Flash content from a MySQL database. This approach would greatly simplify the maintenance of an accessible Flash site by storing only one representation of the content.
by Jonathan Hochman

Comments

Search

RSS

Only registered users can write comments!

Powered by !FastnetComment

Latest Blog Entries

SEO is an art or not?

Search Engine Optimization, or SEO, is a subject that everyone is aware of, but not many people (especially clients) know the technical issues behind SEO.
Read more...

Efficient video delivery

They say a picture is worth a thousand words. In this day and age of digital media, video on your web site can be priceless!
Read more...

Ajax is so cool!

Switched on developers who's clients have tight budgets are moving forward with Ajax in brilliant ways.
Read more...

Newsflash

Business Network Sussex Launched

Business Network Sussex gives you the opportunity to network with a wide variety of other business people in an online and offline way.
Read more...

New Ajax Insurance Engine

Animal Friends Insurance launches a multiple pet quote in one streamlined online application
Read more...

RIA's business increase

Rich internet applications planned by 90 per cent of businesses.
Read more...

Overview

As a professional and affordable web design company serving London, Brighton, Worthing & Sussex in the UK. Fastnet Web Design specialises in the following areas of service (offering our web design & CMS service to clients in the following locations - London, Brighton, Worthing & Sussex along the UK South Coast).

Syndicate