Introduction

Silverlight 3 provides a myriad of reasons to use it for your next rich web application. But one drawback to using Silverlight is that search engines cannot index the content presented by XAPs. This is a deal breaker if you rely on search results to drive traffic to your site. The good news is that there are existing techniques you can make use of to get the best of both worlds: rich user experiences and search engine index-able content.

Before we get into the good stuff, I want to comment on what it means to make a Silverlight application index-able. In the context of this article, I'm going to speak specifically to techniques that improve search engine visibility but there is another aspect that needs to be taken into account: viable down-level user experiences. What the search engine sees is exactly the same as what users without Silverlight see. I'd strongly advise against going down the path of creating down-level content specifically for search engines--a better approach is to create viable down-level experiences that users without Silverlight can use.

Theory

Search engines, for the most part, use static analysis of HTTP responses to parse and index page contents. That means when a search engine crawler comes across your Silverlight application, it's only cares about the source.

When the browser attempts to render a Silverlight <OBJECT> tag but is unable to instantiate the plug-in, it will continue on and render the contents within. If the client has Silverlight installed, they'll see the Silverlight application instead of the HTML content within.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Silverlight Application</title>
  </head>
  <body>
    <div id="content">
      <object data="data:application/x-silverlight-2," 
              type="application/x-silverlight-2">
        <param name="minRuntimeVersion" value="3.0.40305.0" />
        <param name="source" value="ClientBin/MyApp.xap" />
        <div class="down-level">
          <h1>Down level content goes here.</h1>
          <p>Lorem ipsum dolor sit amet...</p>
        </div>
      </object>
    </div>
  </body>
</html>

And that's pretty much it. Want your Silverlight application to be index-able? Put the appropriate down-level HTML markup within the <OBJECT> tag. Easy enough, right?

Practice

The theory is easy but practice takes a bit of work. We'll use ASP.NET Master Pages to facilitate deep-linkable down-level content.

Let’s assume we’re building a simple website that display product information. This site has a home page that contains links to “featured” products as well as links to categorical listings of products.

site map

Figure 1 - Example Site Structure.

One simple approach is to create a MasterPage for your site (similar to the HTML example above) and place a ContentPlaceHolder control within the <OBJECT> tag.

<%@ Master Language="C#" ... %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Silverlight Application</title>
  </head>
  <body>
    <div id="content">
      <object data="data:application/x-silverlight-2," 
              type="application/x-silverlight-2">
        <param name="minRuntimeVersion" value="3.0.40305.0"/>
        <param name="source" value="ClientBin/MyApp.xap"/>
        <asp:ContentPlaceHolder ID="DownLevelContent" runat="server"/>
      </object>
    </div>
  </body>
</html>

Now we can add the following content pages:

  • Default.aspx – this is our landing page.
  • Products.aspx – this is used to list products.
  • ProductDetails.aspx – this is used to display the details of a particular product.
  • … we could add additional pages if needed, you get the idea…

The important thing to note is that all of our content pages are now acting to provide down-level content. Users that visit with Silverlight installed will see the Silverlight experience.

image
Figure 2 – Master and Content Page Relationship.

Conclusion

With a little bit of elbow grease, it's possible to create a rich Silverlight application that provides a compelling user experience without sacrificing search engine visibility.

Resources