There are more challenges when it comes to optimizing for search engines to consume your content if it is a dynamic Rich UI application that doesn’t rely on Ajax. While Google is able to pick up Flash SWF files during its crawl, this does not guarantee that the content is parsed correctly or given the same weight as any other file formats or a pure HTML/AJAX page. Worse, if the application uses a web service, how can it be guaranteed that all the pages are crawled and returned correctly?
In most cases you will need to make sure that the page hosting the application has some html text that describes the application and what it offers. So in essence treat the page in the same way you would HTML.
When possible expose the content of the application so that it too can be indexed.
Simple Silverlight application – XAML to XHTML with XSLT
For a Silverlight element that contains all of its content in the XAML the best method would be to transforms the XAML using XSLT into friendly XHTML. The goal is to contain the translated XAML into a <div> element that would be replaced by the Silverlight control. Search engines would find the XHTML while browsers with Silverlight installed would see the Silverlight app.
1: <div id="SLHost">
2: <asp:Xml ID="XHTML" runat="server" DocumentSource="seo.xaml"
3: TransformSource="XAML2XHTML.xslt" EnableViewState="False"/>
4: <script type="text/JavaScript">
5: createSilverlight();
6: </script>
7: </div>
Then use the following XAML2XHTML.xslt
1: <?xml version="1.0" encoding="utf-8"?>
2:
3: <xsl:stylesheet version="1.0"
4: xmlns:sl="http://schemas.microsoft.com/client/2007"
5: xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
6: exclude-result-prefixes="sl">
7:
8: <xsl:output omit-xml-declaration="yes" indent="yes"/>
9:
10: <xsl:template match="/">
11: <xsl:comment>This is the text that is in the Silverlight XAML:</xsl:comment>
12: <xsl:apply-templates select="*"/>
13: </xsl:template>
14:
15: <xsl:template match="sl:Canvas">
16: <div>
17: <xsl:apply-templates select="*"/>
18: </div>
19: </xsl:template>
20:
21: <xsl:template match="node()"/>
22:
23: <xsl:template match="sl:Image">
24: <div>
25: <img src="{@Source}"/>
26: </div>
27: </xsl:template>
28: <xsl:template match="sl:MediaElement">
29: <div class="Media">
30: <a href="{@Source}">Media</a>
31: </div>
32: </xsl:template>
33:
34: <xsl:template match="sl:TextBlock">
35: <div>
36: <xsl:value-of select="@Text"/>
37: <xsl:value-of select="text()"/>
38: <xsl:apply-templates select="*"/>
39: </div>
40: </xsl:template>
41: <xsl:template match="sl:LineBreak">
42: <br/>
43: </xsl:template>
44:
45: <xsl:template match="sl:Run">
46: <span>
47: <xsl:value-of select="@Text"/>
48: <xsl:value-of select="text()"/>
49: </span>
50: </xsl:template>
51: </xsl:stylesheet>
Handling more advanced Silverlight applications
How do you design an application that could have dynamic content and robust interaction while at the same time enable a web crawler to understand and categorize the underlying content correctly? Unfortunately there is no simple answer or single correct answer. It depends highly on the application’s purpose. In some situations there will be no way to offer the content of the application up to spider outside of the application. In this case it’s best to have as much meta information on the page hosting the application as possible. By following the standard HTML methods in this document you can still extend the indexability of your application by making sure external links are properly formatted and that high ranking sites link to your application.
Detect and Serve
It requires a little more work up front from a development standpoint to go this route, but if you really have a strong need to get the content in your application indexed then this will be the best approach. The goal is to develop the code of the site to be delivered in multiple formats based on the user agent that is accessing the content. This isn’t all that uncommon anyway with the large range of browser and devices out there that are consuming the web already. Most applications are built with the data stored separately from the interaction in a database or local XML document. The site would have to be built so that it can serve up HTML pages for those who don’t have Flex/Flash/Silverlight installed. Plus, we could potentially change these pages for mobile devices like the iPhone that don’t yet support Flash or Silverlight.
It’s also recommend to have some enticement or value proposition to explain to real users why it would be beneficial to add the plug-ins required to get the optimal experience.
The goal would be to have clients that have the plug-in or runtime installed, would be provided the rich interaction. On those that don’t, a functional page in HTML will be provided. More importantly, to the search engines, these pages that are generated will be tagged and indexed correctly, making the content of our applications visible and increase their visibility.
Related posts: