(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Silverlight SEO

(6 votes)
Boyan Mihaylov
>
Boyan Mihaylov
Joined Jul 18, 2008
Articles:   11
Comments:   12
More Articles
6 comments   /   posted on Dec 16, 2008
Tags:   seo , boyan-mihaylov
Categories:   Line-of-Business , General

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:

  1. the <title> tag should contain the most important information about your site
  2. the most significant content should stay in the beginning of the page (after the <body> tag)
  3. 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=”SilverlightContentstyle="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.xamlTransformSource="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

Source code


Subscribe

Comments

  • -_-

    RE: Silverlight SEO


    posted by Pete Brown on Dec 17, 2008 12:28

    Did you see Ashish Shetty's whitepaper on Silverlight SEO? Ashish is a PM on the Silverlight team.

    http://silverlight.net/learn/whitepapers/seo.aspx

  • -_-

    RE: Silverlight SEO


    posted by hector on Jul 09, 2009 16:30
    Thanks for the post, but, i have a doubt, if i have the xaml files in the xap, how can are accessible in tha way?

    DocumentSource=”Page.xaml
  • -_-

    RE: Silverlight SEO


    posted by Matt on Sep 18, 2009 17:43
    Create article - SEO is always important when developing any corporate sites that care to rank well.

    Thanks,

    Thanks, Matt (vb6 source code)


  • -_-

    RE: Silverlight SEO


    posted by Liro Montoya on Nov 08, 2009 10:55
    fine. let me test.
  • SueCooper

    Re: Silverlight SEO


    posted by SueCooper on Oct 24, 2011 07:00
    Current search bots prefer looking at HTML text than flash or Java. This applies to Silverlight as well. However, you can still add keywords to the title tag or alt tags of images to make these applications visible to bots. With good SEO training, anyone can optimise their site to be google friendly, and gain a large amount of traffic to their site.
  • -_-

    Re: Silverlight SEO


    posted by on Oct 25, 2012 05:46
    the first time i read about SilverLight, the first question i asked my self is if the Microsoft SilverLight Support SEO. and i answered: if this is true, then SilverLight can take the first place of all the other web supplements like Adobe flash...
    i started learning, it's so easy to apply. you can see the results soon on my website jeux gratuits

Add Comment

Login to comment:
  *      *