Illuminating the path to SEO for Silverlight

Microsoft Silverlight is a transformative technology. It enables otherwise basic websites to act as full-blown applications, provides access to state-of-the-art animation and video rich media presentations, and takes full advantage of your development team’s existing experience in standard programming languages, such as C#.

However, there is one little problem. Like competing rich Internet application (RIA) technologies that present images, animations, and videos, all of that non-text-based content is extremely hard for search engines to parse and index. As a result, many website owners who are initially thrilled at the cutting edge presentation shown on their websites are later confounded when their beautiful sites suddenly fail to show up in the search engine results pages (SERPs). The problem is that the very technology used with the intention of blowing away their customers, when not thoughtfully implemented, can literally blow away their page rank as a result. In those cases, the site developer/webmaster failed to account for search engine optimization (SEO) when they implemented Silverlight.

Silverlight applications are packaged up for deployment into files with the extension .xap. These files represent the instructions to start the application and, in most cases, contain the content of the application. Unfortunately, search engines can’t easily read Silverlight XAP files. Yes, the technical parsing and content extraction capabilities used in the world of search are improving every day. But as of today, you’d be wise to cater to what the search engines already do very well: read text. This means you need to add text-based information -metadata and more – to the Silverlight objects you employ on your website.

You might think it’s not worth the effort to do such work. If you don’t care about being found in search, you might have a point! But consider this: if some of your intended clients use operating systems or web browsers that are unsupported by Silverlight, what will they see when they go to your Silverlight-enabled site? Will the site still be usable? Will its presentation still make sense? Or will the page be blank? Do you even know?

If you care about these audiences, then the same backward compatibility work you’d do to help them will also serve you in your SEO efforts. As an overall investment, if you want to use advanced content technologies to improve the user experience for your customers, you might well want to invest in making your site more accessible to all potential users, including search engine crawlers (aka bots).

Basic SEO

Right off the bat, there are several things you can do to help the search engine bot learn more about your Silverlight-infused pages. Because bots cannot “read” Silverlight content the way we can, the wise addition of metadata is all the more important in these pages. This information helps the bots interpret what is the theme of the page, how the content relates to other pages and sites, and provides keywords to help the search engine understand the page well enough to rank it accurately among other, relevant sites for search users.

Much of this advice is actually basic SEO, but as Bing so commonly sees RIA-laden pages that possess none of this information, it bears repeating here. All of your RIA-based (including Silverlight) pages, should have these elements in the source code (in fact, most of these suggestions apply equally to even non-RIA-based pages within a website):

  • Descriptive <title> tag. Every page should include a descriptive and unique <title> tag. That information is part of what a bot reads to assess what sort of content is contained on the page. Using a title such as <title>Silverlight application</title> is about as useless as no <title> tag at all. Get specific!
  • Descriptive name=”description” <meta> tag. Another important page element that bots use to determine the contents of a page is the text within the “description” <meta> tag. This information is often used to help create the website description snippet used on a SERP. As before, don’t go generic here – be specific and unique. There is often so little text-based information on a Silverlight page that every little bit of unique content will be that much more meaningful to the search engine indexer.
  • Descriptive <h1> tags. The first level heading is second only to the <title> tag for being the place to define the thematic contents of a page. As such, stick to only one iteration per page, but make it meaningful and unique.
  • Discoverable navigation. No man is an island, but a web page with no discernible navigation links to other pages might be. And any page built without any discoverable navigation to other pages must not be very important – at least, that’s the way bots will see it. Be sure every page on your site is linked to at least one other page, and link out to other pages from every page so the bot doesn’t get stuck in a blind alley and abandon crawling your site any further.
  • Descriptive alt text. When you add an <img> tag to your page, be sure to provide that additional meta content. Bots can’t read the contents of that image, even if it is merely an image of text, so the alt text you add is critical for helping the bot better understand what it cannot see.
  • 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. An object in the page code identifying “SilverlightApp1″ is meaningless to everyone but the originating developer (and even then, it’s questionable!).

Every one of these elements is an opportunity to develop keywords for your pages. Be sure to use keyword-rich text in every opportunity. But as always, do so wisely. Keep it readable and oriented for human readers, not stuffed for bots. Keyword stuffing will only get your site in trouble.

Graceful degradation

OK, so the basic SEO stuff has been knocked out, but what more can you do for a Silverlight page? As it turns out, we’ve only just begun to optimize.

The key to success in ensuring that down-level users will not be abandoned when you use an advanced technology like Silverlight is to implement a graceful degradation strategy. That means if a client, for whatever reason, cannot access the advanced primary technology offered (in this case, Silverlight), they still have a means to get something out of the page by means of lesser, secondary technology, be it metadata, substitute text on the page, a static image, or whatever else you can provide, content-wise, to assist those users.

To provide that graceful degradation experience to your users, modify your Silverlight pages to include one or more of the following solutions.

1. Present alternate, static page content

Instead of using the <embed> tag, use the <object> tag to instantiate your 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.

2. 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″ />
    <param name=”source” 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>

Note that 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 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.

3. Expose alternate, dynamic content

What if you are using Silverlight for more than just a single webpage application? What if you have a site-wide, Silverlight application used in an e-commerce scenario? In that case, you’ll want to expose your inventory catalog of deep link content to search rather than have it left invisible in Silverlight. For this, you’ll need to take a different approach. The alternate content here must describe any and all end point(s) that you want to make available to the search engine bot.

Instead of doing a deep dive here on this technique (this article is already getting long!), I’ll instead refer you to a few useful resources of information 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:

4. Use the createObject function in JavaScript

This is a more developer-oriented SEO 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.

Again, as no one wants to read a white paper posing as a blog column, I will simply point you to helpful resources for more information:

Test the new down-level experiences

Once you’ve implemented your Silverlight graceful degradation strategy, test it in non-Silverlight-enabled environments. Popular choices among SEOs include text-based, web browser environments such as Lynx browser or SEO-browser. You can also use operating systems currently incompatible with Silverlight, such as Windows 98, Linux, FreeBSD, or SolarisOS, or unsupported web browsers, such as Opera. For details on Silverlight compatibility, see the list of Compatible Operating Systems and Browsers.

Planning graceful degradation of Silverlight for SEO is identical to planning for those clients that are not Silverlight-enabled. Once your pages present useful, alternative content to non-Silverlight clients using the suggestions above, you can rest assured that search engine bots will also be able to see the results of your effort. And until bots can read RIA-based multimedia content like humans can, that is how you do SEO with Silverlight.

For additional information on performing SEO on Silverlight-enabled webpages, see the following:

If you have any questions, comments, or suggestions, feel free to post them in our SEM forum. I’ll be back soon!

– Rick DeJarnette, Bing Webmaster Center

Join the conversation

15 comments
  1. oliver_schmidt_

    Hi,

    which stylesheet does a search engine use if I specified more than one (e.g. handheld, tty, screen)?

    Thanks in advance and goodbye

    Oliver

  2. Alsace Web Agency

    "Discoverable navigation."

    do you mean, html <a> links?

  3. givelord

    Hi Rick, I like your post about Silverlight image optimization. It's a big challenge to make Search Engines find the text in flash application and I'm trying to get in the first Serps.

  4. bouka55

    These are helpful tips, I remember in early 2000's when all web developers wanted to use flash to create shiny websites; the buttons didn't always work, to the user's annoyance, But what really killed that allure was the fact that such sites struggled in search engine rankings.

  5. Iccle Mickle

    Its quite exciting when you realise that a nice rich media site can be optimised properly. I agree with other comments about flash…It has always been a really off-putting means of jazzing up a web site, since you are then likely to degrade your SEO efforts.

    I will be looking to adapt some of my current materials in the light of this and improve the SEO offered from http://www.rainbowmotion.co.uk where I am currently working as an optimiser.

  6. hp72i

    Thank you for the detailed explanation of SEO for Silverlight. It is very similar to SEO for Flash.

  7. Peter432

    Great info about this, thanx for sharing!

  8. luwinski_1977

    Thanks for this great post – I will be sure to check out your blog more often.

  9. Max Paulousky

    In memories

  10. Jeremiah Haskell

    thx for the info man

  11. Craig Bailey

    Thanks for the overview of SEOing for Silverlight – every bit helps.

    But what a shame the Silverlight team didn't produce a gamechanger in the RIA market in terms of SEO. Silverlight is such an impressive technology – it's light years ahead of it's competition – and yet the glaring blind spot is its searchability. Microsoft could have had a huge groundswell of support from SEOs around the globe if they'd only designed discoverability into the product from the beginning.

    Perhaps a future version will make amends…

  12. netvisibilitygroup

    I think my favorite part about Silverlight is going into the Bing Webmaster tools and having it crash and hang every time I want to simply submit a web site. I love having to reinstall software just to submit a site. why, why, why. My system is stable for everything else I do in development. Silverlight? Keep it….

  13. netvisibilitygroup

    I just uninstalled it and am going back to webmaster tools without it… Let me know when it's stable and I might give it another shot, but I doubt it – it's just not worth the hassle imo…

Comments are closed.