This article is written for previous version of Silverlight and may not be fully compatible with the latest.
Short Introduction to the RIAs World
Nowadays the web space is full of different sites. Old-fashioned HTML is slowly being replaced by the new Rich Internet Applications (RIA). But why are they so popular? The passion of the RIA technology is that it tends to reform the static HTML sites in order to make them look more like Desktop applications.
Why Silverlight?
Flash and AJAX do almost the same things as Silverlight does. But Silverlight applications are created with our favorite language C#. You can use any other language which is compatible with the .NET Framework, too. With the power of XAML you can create great design scenarios.
What is SEO and why it is so important?
SEO (Search Engine Optimization) is the process of improving the volume and quality of traffic to a web site from search engines. This means that doing SEO to your site will make it more indexable and more people will visit it. Here are a few of the rules which you should stand by in order to do the best SEO:
- the <title> tag should contain the most important information about your site
- the most significant content should stay in the beginning of the page (after the <body> tag)
- all image tags (<img />) should define the alt tag – this is the only way for the search engine to understand what an image ‘says’
Do I need to do SEO to my Silverlight applications?
This is a question with no explicit answer. If your website is one Silverlight application and you need search engines to index it, you definitely need to think of a way how to do SEO. I strongly suggest not to create the whole website using Silverlight. I prefer using it only for animations and displaying data in an unusual way (charts, graphics, etc). If you need a special Silverlight application that performs something, you won’t need to do SEO in most of the cases. Do not forget that Silverlight is running in the browser, so everything is going on locally.
What is the problem with RIAs and SEO?
Rich Internet Applications are great thing, but they work dynamically. What does it mean? It means that when you load the page, you do not see static text but an application (except AJAX, which works with HTML). You can work with application the same way you work with a desktop one. But no matter what you do, when you reload the page the initial text will be shown. The idea is that you are working offline. Everything you do goes locally, on your computer only.
An Internet user can see these applications, but the search engine won’t see them, because they cannot read them. So this is the main problem when using RIAs in your site: how to show the search robot what is inside your Silverlight application. In this article I will show you a few solutions of this problem. None of them is perfect but you can see how you can “open the eyes” of the search robot.
Static text under your Silverlight applications
The first trick is to show static text under your Silverlight application. How is this achieved? Here is an example showing that.
<div id="SilverlightApplication">
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="400" height="100">
<param name="source" value="ArticleSEO.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.30923.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
<div id=”SilverlightContent” style="display: none;">
I'm Silverlight Content
</div>
The following code has two layers: SilverlightApplication (which is visible) and SilverlightContent< (which is invisible). The normal Internet user will see the visible one and therefore he will see the Silverlight application. Every browser, which supports graphics, can read CSS, too. So the user will not see the invisible layer. What about the search robot? As I mentioned before, it cannot understand JavaScript, CSS and Silverlight content. That’s why the robot will not “see” the Silverlight application but it will “see” the invisible layer. Therefore it will be capable of reading the content inside the invisible layer. (REMARK: I use visible and invisible for the two layers in the context of the normal Internet user who can or cannot see the content of each of them.)
You can see that you can put different content inside such hidden layer in order to describe what your Silverlight application contains. This trick is very simple when it comes to SEO to your site when you plan to use Silverlight applications. You can see the online demo here.
Using XSLT to extract text from XAML
A XAML file is an ordinary XML file. You can extract the text from the XAML file using XSLT transformations. This trick is almost the same as the previous one. It just makes it easier to get the text. In the previous example you can get the text from database or some other source. In this one, you get it from the XAML file.
<form id="form1" runat="server" style="height: 100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="SLHost" style="display: none;">
<asp:Xml runat="server" DocumentSource=”Page.xaml” TransformSource="XAML2XHTML.xslt" />
</div>
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/ArticleSEO2.xap" MinimumVersion="2.0.30923.0"
Width="400" Height="100" />
</form>
The server control <asp:Xml> lets you transform a XML file using a XSL stylesheet. This is one very easy approach to extract the text from the Silverlight application. Of course, if your application consists of many XAML files it will be more difficult to get the whole text from each file.
...
<xsl:template match="TextBlock">
<div>
<xsl:value-of select="@Text"/>
<xsl:value-of select="text()"/>
<xsl:apply-templates select="*"/>
</div>
</xsl:template>
<xsl:template match="Run">
<span>
<xsl:value-of select="@Text"/>
<xsl:value-of select="text()"/>
</span>
</xsl:template>
...
You can do the following transformation by code, too. You can use the XslCompiledTransform class to achieve this.
StringBuilder sb = new StringBuilder();
XslCompiledTransform d = new XslCompiledTransform();
d.Load("stylesheet.xsl");
using (StringWriter myWriter = new StringWriter(sb))
{
d.Transform("input.xml", null, myWriter);
}
Hidden DIVs Not Indexed by Google
I recently read an article which claims that Google robot does not index hidden DIVs. That’s because of spammers – they use them to hide content. Of course there are some workarounds. You can use JavaScript to hide layers or just to move the CSS in an external file.
Another workaround is to use Silverlight.js. It provides a way to show a Silverlight application dynamically on the page using JavaScript. This is very handy because you don’t have to hide the layer, but you show the Silverlight application on the top of it. In this way its content will be under your application.
Your web site is one Silverlight application
For example you have created one Silverlight application which has a few pages to show your content. It’s not a good idea to get the whole text from each page and show it (in a hidden div) on the index page. You would rather get the current page from the query string. Then you get the text corresponding to this page. You should also include links between these pages so the search robot will be able to go across them. Your application should also look at the query string to determine which page to show. In this way, when you type in the address bar http://mysite.com/index.aspx?page=about, your Silverlight application will know which page to show up and the text behind the application will be from that page.
SilverlightSEO.com
SilverlightSEO.com is a small project, created by John Mandia. He has used the second method in order to try to get his page indexed by the search engines. Here is the result of his work:
| Search Term |
Google |
Yahoo |
Live |
| silverlight seo |
no 2 out of 408,000 |
no 12 out of 3,210,000 |
not yet indexed |
| silverlight search engine optimization |
no 11 out of 95,000 |
no 46 out of 482,000 (not as good) |
not yet indexed |
| silverlight search engine optimization |
no 42 out of 782,000 |
no 14 out of 481,000 |
not yet indexed |
| silverlight search engines |
no 65 out of 215,000 |
no 43 out of 855,000 |
not yet indexed yet |
This initial page is a test to see if Silverlight SEO can be indexed without issue. He is using HTML as the content container (which allows the contents to be printed and indexed) and is simply using Silverlight to present the content (similar to CSS). There is no hidden text (what is in HTML is displayed) and this gives the option of easily adding non-silverlight support (via CSS styling). The results of his test was expected. The index page contains static text (the text from his Silverlight application) so the search robot will read it without any problem.
Conclusion
In my opinion there is no best way when it comes to RIAs and SEO. If you want SEO – just use static content. Do NOT put significant data in your Silverlight applications. Use it mainly for animations and data visualization and leave everything else as a static text surrounded by HTML tags. Moreover, search engines do not only look at the text, but they get the HTML tags and relations between them.
References
- Synergist : Simple Silverlight SEO with ASP.Net and XSLT
- Silverlight SEO (Search Engine Optimisation / Search Engine Optimization) - John Mandia's Points of Interest
- Silverlight SEO Demo
- Hidden Divs Not Indexed by Google
Source code