SEO for Silverlight, Adobe Flash, and Other RIA-Based Content

Rich Internet Applications (RIAs), such as Microsoft Silverlight and Adobe Flash Player, can improve the aesthetic appearance or the functional ability of a site for end users. However, the way these technologies are typically implemented often causes problems with the ability of search engine bots to crawl and fetch any meaningful data from the site.

Sites extensively employing JavaScript and AJAX technologies can also cause the same problems for search. This is because search bots are primarily readers of text. It is much more difficult to parse and derive indexable, relevant content from graphic and multimedia content. As a result, sites who implement these technologies without regard to search bot accessibility often unexpectedly see their search rankings drop off (from the search bot perspective, the site simply has little-to-no indexable content available, which adversely affects its relevance to the site's main theme).

Strategies

  1. Start with basic SEO
  2. Employ graceful degradation techniques

Strategy detail

  1. Start with basic SEO So how can a webmaster help a search bot crawl and interpret such a site? Luckily, there are several useful strategies that can be employed. The use of basic search engine optimization (SEO) techniques are always an important start. The more a page is optimized for search (including providing metadata about the theme of a given page), the more the bot has to go by in assessing a page's relevance to the keywords used on the page. The use of the following basic SEO techniques can help optimize pages that include non-text-based content for keyword relevance:
    • Descriptive <title> tag: Every page should include a descriptive and unique <title> tag metadata. Identify and revise blank or generic titles such as <title>Silverlight application</title>.
    • Descriptive name='description' <meta> tag: Every page should include a descriptive and unique <meta> "description" tag metadata. Identify and revise page descriptions that are blank or repeated on multiple pages.
    • Descriptive <h1> tags: The first level heading (<h1>) tag is often used as the displayed, on-page title defining the thematic contents of a page (whereas the <title> tag is metadata only shown in the browser window's title bar). Only use one <h1> per page, but make it meaningful and unique per page (and different from the <title> tag).
    • Text-based navigation links: Don't use JavaScript or RIA technology for your site's intra-site navigation. The search bot will not see it, so the pages will appear to be dead-ends, preventing further crawling.
    • Descriptive alt text: Always provide descriptive alt attribute text with your non-text-based content. However, do not add alt text to non-content images, such as those used for space holders or color backgrounds.
    • Text in images, animations, and within script: Do not put any text content you wish to be crawled and indexed within non-text-based content forms, as the search bot is unlikely to read and index that content. Put that content in text.
    • Meaningful application name: Just as there is some SEO value to creating human-friendly URLs, where the directory and file names spell out logical words rather than globally unique identifier (GUID)-based gibberish, there is value to naming your Silverlight application in a manner that helps identify its purpose or role in the page.
    In each of these recommendations is an opportunity to use the keywords you want search bots to associate with your pages. Take advantage of that opportunity. For more information on these techniques, see the Webmaster Center blog article Illuminating the path to SEO for Silverlight.
  2. Employ graceful degradation techniques When webmasters use RIA technologies on their site, the RIA object calls are often are the only thing used on the page. As a result, down-level users, which includes text-only browsers, computers that do not have the RIA technology reader plug-in installed, and older computers with older operating systems, cannot access the site. Search bots, which cannot reliably read and execute script or run browser plug-ins, are also considered down-level users. As a result, when a search bot crawls such a site, there is no data to crawl, no keywords to associate with the site, and thus nothing to place in the index. To help an RIA-enabled site be more successful with all down-level users, develop a graceful degradation approach to your content. If the primary RIA content cannot be read, offer a basic substitute, as in a text-based description, of what the site would do and what data it contains for primary users. This text, rich in keywords for the page, will help the search bot interpret the page contents and thus associate it with the keywords used on-page, giving the page relevance in the index. The following are graceful degradation techniques that can be used to help down-level users interpret what they are missing on your RIA-enabled pages:
    • Present alternate, static page content Instead of using the <embed> tag, use the <object> tag to instantiate your Microsoft Silverlight content in your page. The <object> tag allows the page to provide secondary, down-level content to be presented in case the initial, primary content (such as a Silverlight application) cannot be presented. By using the <object> tag, you can include text descriptions and other relevant content following the instantiation of the application in the code. Write these text descriptions toward the non-Silverlight user, describing the Silverlight application's role on the page, its function, or any other pertinent information that would help down-level users understand what would have been shown if they were able to access Silverlight. Be sure to use your page's targeted keywords as you describe the Silverlight content. Below is an example of how you can include contextual, alternative information within your page's Silverlight <object> tag code:
      <object data="data:application/x-silverlight-2," style="display: block" type="application/x-silverlight-2" >  <param name="minRuntimeVersion" value="3.0.40624.0" />  <param name="source" value="ClientBin/KingCountyTrafficMap.xap" />  <div class="down-level">    <h1>Traffic Map for King County, Washington</h1>    <!-- Static image from the application -->        <img src="KingCountyAfternoonTraffic.jpg" alt="Typical King County metro weekday rush-hour traffic at 5:00pm" />    <p>Silverlight enabled computers can use this page to see up-to-date traffic conditions on the major roads and highways in King County, Washington.</p>    <p>It's easy to <a href="http://www.microsoft.com/silverlight/get-started/install/">install Silverlight</a> on your computer. See what you've been missing!</p>  </div></object>
      
      As you can see, the alternative content included the important <h1> tag and some informative content identifying the role of the Silverlight application. And by providing a link to installing Silverlight, you might enable another user to step up and see your page in its primary view.
    • Use multiple <div> sections Another strategy for creating a graceful degradation of Silverlight includes using multiple <div> sections on the page: one for the actual Silverlight content and another to be shown on computers that do not have Silverlight installed. Similar to the previous example, this technique sample demonstrates the presentation of static page content:
      <div id="King County Traffic Map">  <object data="data:application/x-silverlight-2," style="display: block" type="application/x-silverlight-2" >    <param name="minRuntimeVersion" value="3.0.40624.0"/>value="ClientBin/KingCountyTrafficMap.xap" />  </object>  <iframe style="visibility: hidden; height: 0; width: 0; border: 0px"></iframe></div><div id="AlternativeContent" style="display: none">    <h1>Traffic Map for King County, Washington</h1>    <!-- Static image from the application -->    <img src="KingCountyAfternoonTraffic.jpg" alt="Typical King County metro weekday rush-hour traffic at 5:00pm" />    <p>Silverlight enabled computers can use this page to see up-to-date traffic conditions on the major roads and highways in King County, Washington.</p>    <p>It's easy to <a href="http://www.microsoft.com/silverlight/get-started/install/">install Silverlight</a> on your computer. See what you've been missing!</p></div>
      
      noteNote
      The alternative <div> is created by default as hidden content. Contrary to the generic advice given in the recent page-level web spam article, The pernicious perfidy of page level-level web spam, the use of hidden content in this case is recognized by the search engine as contextually related to the graceful degradation strategy for Silverlight. As such, its use in this case will not raise any red flags to the search engine concerning potential web spam. As usual for these types of things, interpreting user intent is key to search engine bots identifying whether or not an ambiguous page element might be malicious.
    • Expose alternate, dynamic content If you have a site-wide Silverlight application used in an e-commerce scenario, you'll want to expose your inventory catalog of deep link content to search rather than have it left invisible in Silverlight. For this approach, the alternate content must describe any and all end point(s) that you want to make available to the search engine bot. As this is a more complex technique, instead of covering it here, I'll instead refer to a few useful resources on how to expose these end points to the non-Silverlight user and the bot. Both include good code examples and a clear explanation of how the technique is employed:
    • Use the createObject function in JavaScript This is a more developer-oriented technical strategy that you can employ with Silverlight. This technique uses JavaScript to automatically generate the markup code needed to create the <object> tag and its required parameters. Here are some helpful resources for more information: Once the strategy is in place, be sure to test your graceful degradation changes in non-RIA-enabled environments to confirm they perform as expected. Popular test environment choices among SEOs include text-based, web browser environments such as Lynx browser or SEO browser.

For more information on these graceful degradation techniques, see the Webmaster Center blog article Illuminating the path to SEO for Silverlight.

For more information discussed on this topic, review the information in the following links: