OpenLightGroup Blog

rss

Blogs from OpenLightGroup.net


Silverlight, SEO & ASP.Net MVC – Part 1 (Proof of Concept )

Warning: Do not implement this strategy on your site, this is meant for discussion purposes only! I will be posting the final strategy in the following posts.

I have been experimenting with the new Silverlight Navigation Application project template, and the navigation framework in  general. Today, it struck me that there should be an easy way to combine the search engine friendly URLs and content of ASP.Net MVC framework and Silverlight Deep Linking. The MVC framework is setup to easily provide SEO links and content out of the box. However, Silverlight… well it returns “Get Microsoft Silverlight” to GoogleBot and the other search engine spiders trying to index your site. My hunch is this will not get you to the top of any search results.

I have heard rumor that some of the spiders will start reading content from Silverlight apps; however, I personally do not want to wait for that to happen. Frankly, at this point I have not confirmed that it will happen by any credible source. So, I decided to see how difficult it would be to build a solution to this issue. What follows is my first attempt, and can (and probably will) be drastically improved from where it is today. This post, strays a bit from the typical format. I am documenting what I have done as opposed to showing a solution. In following posts I plan on cleaning this up and providing a step by step tutorial on how to do this. However, I wanted to make this post to get feedback and suggested improvements. I certainly do not claim to be a SEO master, and I am sure some of you can make some recommendations on how to “play nice” with the spiders that I may have missed.

The process I am basing the solution on is as follows:

  1. Create a MVC application to host html SEO pages.
  2. The html pages will detect if Silverlight is installed.
  3. If Silverlight is not installed the page will process as normal and return the standard html content to be indexed by search engine spiders or viewed by users that have not installed Silverlight.
  4. If Silverlight is installed the page will fire JavaScript to redirect the user to the Silverlight version of the page using the Deep Linking feature of Silverlight 3.

This way you can submit a sitemap to the search engines with links to the html pages using the SEO urls. When the spider crawls the site, it will index the pages based on the html content provided by the MVC application. After the site is indexed, a user can click on a search result that will link them to the MVC url. When the page is processed it will see that the request is coming from a PC with Silverlight installed and redirect them to the Silverlight version of the link.

The page that hosted the Silverlight application will also fire JavaScript on the initial load. If Silverlight is not installed, it will redirect the request to the MVC version of the link. This is designed to handle the scenario of a user with Silverlight installed sends a link to a Silverlight page to a user without Silverlight. The user without Silverlight will still be able to view the content and have a message displayed providing the opportunity to install Silverlight.

If this seems confusing, don’t worry you are not alone! Writing this article has been almost as challenging as writing the code! An example might help clarify:

Search Engine Indexing Example:

You submit a sitemap to a search engine containing references to all of the MVC urls for your site such as www.yoursite.com and www.yoursite.com/Home/About . The search engine sends out it’s spider to crawl the provided urls. When the pages are loaded, the JavaScript determines that the “user” (or spider in this case) does not support Silverlight and returns the easily indexed html content.

User Clicks Search Result Example:

A user search for a term on the About page on your site and is provided with a link similar to this by the search engine: www.yoursite.com/Home/About . When they click on the link, the MVC framework begins to render the page. The JavaScript determines that the user has Silverlight installed are redirects the request to www.yoursite.com/Default.html#/About . Default.html loads the Silverlight application and follows the anchor to the About page within the Silverlight application.

Hopefully, I have explained my strategy well enough for you to follow my general thought process. With these concepts in mind, let’s look how I  have implemented the solution so far.

I started by creating a standard ASP.Net MVC application and named it SeoMvcWeb. Then I created a Silverlight Navigation application and named it SLSeoMvc. (I know the creativity is astounding right?!?) Here is what the finished solution looks like:

SeoSolution

When I created the Silverlight application it asked me to host the application in my ASP.Net MVC application. I went ahead and left the default options checked and allowed Visual Studio to create the test pages and copy the Silverlight.js file.

 

 

AddSLApplication

I then removed the test aspx page, moved the Silverlight.js file into the Scripts, renamed the test html page to Default.html and updated the script reference to Silverlight.js in Default.html.

<script type="text/JavaScript" src="/Scripts/Silverlight.js">script>

I then created a PageMappings.js file in the scripts folder and implemented code to locate the current url in a list of mappings configured in JavaScript.

The mappings are currently hardcoded into the js file like this:

// Mappings are formatted as CurrentUrl:RedirectUrl
 
//This maps the current Silverlight link a corresponding MVC link
var aspMappings = [
                    '/:/Default.aspx',
                    '/Default.html:/Default.aspx',
                    '#/Home:/Default.aspx',
                    '#/About:/Home/About'
                   ];
//This maps the current MVC link a corresponding Silverlight link
var silverlightMappings = [
                            '/:/Default.html',
                            '/Default.aspx:/Default.html',
                            '/Home/Home:/Default.html#/Home',
                            '/Home/About:/Default.html#/About'
                           ];

This is obviously not the way to do things in a production quality application. I plan to return these mappings from a web service in future iterations.

In addition to creating the mappings, I implemented two functions RedirectToAsp and RedirectToSilverlight that will be called from the appropriate page. This allowed me to modify the default content of the object tag on Default.html page to this:

        <object data="data:application/x-silverlight-2," 
                type="application/x-silverlight-2" 
                width="100%" height="100%">
            <param name="source" value="ClientBin/SLSeoMvc.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="3.0.40624.0" />
            <param name="autoUpgrade" value="true" />
 
            <script src="Scripts/PageMappings.js" type="text/javascript" />
 
            <script type="text/javascript">
                RedirectToAsp();
            script>
 
        object>

This way the JavaScript is only loaded if the object tags default content is displayed.

I then added the following markup to the head section of the /Views/Shared/Site.master file:

    <script src="/Scripts/Silverlight.js" type="text/javascript">script>
 
    <script src="/Scripts/PageMappings.js" type="text/javascript">script>
 
    <script type="text/javascript">
 
        RedirectToSilverlight();
        
    script>

This will fire and redirect the request to the Silverlight link, preventing the MVC’s controller class from processing the request.

Correction: This will redirect the request to the Silverlight link; however, since the MVC’s controller is called BEFORE the page is rendered, the controller will fire the associated action. Unfortunately, I have not been able to find a way to do the redirect before the rendering of the page. This means the on a request to a MVC view, the all of the server side code will run before the user is redirected to Silverlight. To me this is not a huge concern, since it should happen only once per session.

That covers the majority of the code needed to get the MVC to Silverlight page mapping to work. I also implemented a service to provide content to the Silverlight application to demonstrate how Business logic can be shared across the applications. This works to lessen the amount of effort it takes to maintain both the MVC and Silverlight applications. However, that code is a topic for a different post. I mainly want to focus on how to map SEO urls and content to pages within a Silverlight 3 application in this article.

There is obviously some cleanup that can be done to what I have written so far; however, the goal of this article is to get your comments, questions and concerns about this approach. I strongly encourage you to post any and all of your feedback in the comments section below. I will take each one into consideration as I tune this example into a more production ready solution.

Thanks in advance for you input!

Read Part 2





Comments are closed.
Showing 2 Comments
Avatar  Ian T. Lackey 8 years ago

&quot;I think a better way is to detect wheter someone is a user and redirect them to the Silverlight page any way. This way they are practically forced to install Silverlight and I don't have to layout my HTML version of the content, which allows me to do more optimalization on that for search engine use.&quot;&lt;br&gt;&lt;br&gt;I agree with your point of view, if I develop a Silverlight website I want people to view it in Silverlight and do not want to continue to maintain an ASP (HTML) version as well. However, Google does not like this idea and may actually remove you from their index because of it. I will be addressing this in detail in Part 2 of this series.&lt;br&gt;&lt;br&gt;I do appreciate your feedback!

Avatar  Jonathan van de Veen 8 years ago

Good initiative. I'm looking forward to see the end result.&lt;br&gt;&lt;br&gt;I'm not an SEO expert, so I'm not going to comment on that. What I would like to have is different behaviour for normal users not having Silverlight installed. Right now they get the same HTML page that the spider gets, which means I would have to layout the pages and give them some nice design. Also I would need to have some kind of incentive in place to make users install Silverlight, while still getting to the same content.&lt;br&gt;&lt;br&gt;I think a better way is to detect wheter someone is a user and redirect them to the Silverlight page any way. This way they are practically forced to install Silverlight and I don't have to layout my HTML version of the content, which allows me to do more optimalization on that for search engine use.