Optimizing Silverlight pages to be search engine friendly

by Vahid 31. March 2009 14:49

recently i was involved in development of an web application whose interface was based on Microsoft Silverlight. as Silverlight is a new technology we had so much challenges to get the job done but out of them the most important one for us was to make the application search engine friendly. so after doing some I&D on it and spending some late night hours on the issue, i got some good references and experiences which i thought of sharing them with you.

This document describes some best practices for search engine optimization of Silverlight applications. These practices are designed to help developers make their Silverlight content discoverable on a search engine results page and to provide an acceptable experience for users who do not have Silverlight enabled.

This document contains the following sections:

Introduction

As we all know The goal of search engine optimization (SEO) is to increase the chances that your page will appear in the main section of the search engine results page (outlined by the red rectangle in Figure 1), not the paid or sponsored results.

Search engine results page.

Figure 1 - Search engine results page

Even though the search landscape is rapidly changing, with multiple competitors continuously improving and evolving how they implement search, SEO relies on some fundamental similarities among search engine algorithms.

Lets Take A Look At How Search Engines Work

Search engines crawl, weight, and index Web page content. Crawling is done by a search robot that traverses the links in a Web site and captures the content. Search engines then use algorithms and heuristics to assign weights to Web pages. This information is used to build the search index, which is used to build a results page based on your query.

The main reason for a Web page to be highly ranked in search engine results is that the words on the page match the keywords that are used to search. The presence of dynamic and nonstandard elements such as script, style, object, and embed tags in the page is a challenge to search engines, and this is an area where they have traditionally not done well.

In this situation, search engines have to do the following:

  • Download linked content and associate it with the source page.
  • Parse, convert, execute, or render elements to obtain the same experience as the user viewing the page in a browser.

Figure 2 is a simplified view of how a search engine works.

A simplified view of the search engine.

Figure 2 - A simplified view of a search engine

Approaches for Developing a Silverlight Application

If you are planning to build a Silverlight application, there are things you can do to make sure that your application is discovered and returned by search engines.

The following are some of the patterns that you can adopt for how your application coexists with the HTML content.

We Should Mix HTML with Silverlight Content

This pattern involves mixing HTML text with Silverlight content in the same page so that it delivers richness in functionality and the native HTML content is consumable by search engines. To do this, consider designing your Silverlight content in such a way that it fits within, or around, a block of text. This looks like a grid of interacting components that fit around HTML text. An advantage of this approach is that it ensures that your Silverlight interactivity is truly supporting the text, rather than hiding otherwise searchable text from search engines. Figure 3 shows a Web page with this approach.

Islands of text and Silverlight interactivity

Figure 3 - Islands of text and Silverlight interactivity

Use HTML Bridge to Generate Silverlight Content Dynamically

This approach is slightly harder to achieve and can be limiting to the Silverlight experience. You will have most success with this approach if you have existing XHTML content and want to enhance the experience with Silverlight. In this approach, the XHTML content is the base experience for search robots and down-level clients, while the Silverlight experience is reserved for consumers on client platforms capable of running Silverlight.

In this approach, the XHTML content has the full-fidelity experience for its target clients. It is still declared as nested alternate content within the object tag for the Silverlight plug-in. The one attribute that differentiates this pattern from the graceful degradation pattern is that in this pattern, the Silverlight application’s UI is driven by the nested alternate content. In other words, application logic will use the DOM Bridge to get the nested alternate content from the object tag and use it to construct the Silverlight UI. This can be as simple as using XSLT to transform the XHTML to XAML, or perhaps using data binding to bind XAML UI properties to an object representing content from the extracted markup.

Graceful Degradation

In this document, we focus primarily on search engine optimization using the graceful degradation approach. In such a scenario, the Silverlight content is the primary experience for consumers, and the use of nested alternate content within the object tag serves as the down-level experience.

Search Engine Optimization Techniques for Silverlight Applications

The key consideration for making Silverlight content indexable by search engines is to use the approaches that are used for systems and users for which Silverlight is not enabled. Considerations include the following:

  • How the Web page with Silverlight content behaves in client/browser configurations such as Opera or Windows 98, which are not currently supported by Silverlight.
  • How the Web page behaves for customers who use accessibility programs such as screen readers and narrators.
  • How the Web page behaves for customers who use from a text browser such as Lynx, where no scripts can execute.

Presenting contextual metadata and alternate content that would make Silverlight content friendly to down-level users will also make it friendly to search engines.

When creating your Silverlight application, do not assume that all users will have Silverlight installed or have computers with the ability to install Silverlight. Prepare for how you would describe your application to these users.

  • Know your audience.
  • Plan on how you would describe your application to them.
  • Identify the keywords that you would use to connect with searchers.

The words that you use in your titles, page and section headers, body content, and alternate content play an important role in how the search engines find and index your content, and also how a user finds your content.

The following are some of the techniques you can use to optimize your search engine results and improve the experience for all users:

Use a Descriptive Page Title

Give your page a good title. Web page authors must update and customize the markup in the pages generated by Silverlight project templates in Visual Studio or Expression Blend. For the purposes of discussion, let’s assume you have a Silverlight application that provides interactive traffic maps for the Seattle area. Figure 4 shows bad (default) and good Web page titles.

Bad and good page titles

Figure 4 - Bad and good page titles

Add Description Metadata

Keywords in your page’s meta tag are not very useful for search engines to determine your page’s rank. However, a page title and meta description tag (that is, a meta tag whose name attribute is set to "description") are extremely useful in ensuring that searchers who view your page on a results page associate it with content that they are looking for.

If you have a top-level Silverlight application that occupies the full extent of the browser’s client area, or one that exists on your landing page, then you must have a meta description tag on your HTML page. The following code shows the format of the meta description tag.

<head> <meta name="description" content="Microsoft portal site for the Silverlight development community..." > ... </head>

If you have a page with a lot of text content that contains relevant keywords, then you can omit the meta description. The search engine will show a portion of your page content on the results page, and any stub description may actually prove counterproductive.

The following figure shows a sample search page entry with a description, and how it would appear if the meta description tag were not present.

Search results page with and without a meta description tag

Figure 5 - Search results page with and without a meta description tag

Use a Meaningful Application Name

Giving a useful name to your application is another way to help the search engines find your Web page. For example, an application that provides traffic maps for the Seattle area could be named SeattleTrafficMaps.xap.

Even if your application was built using a different name, it is easy to change the name, for example, from MyTestSLApp.xap to SeattleTrafficMaps.xap. Changing the name back at a later time is a simple operation if that name is not referred to elsewhere in your code. By default, there are no dependencies of this kind in the Silverlight templates.

Use the object Tag

The object tag in HTML is designed so that if the main object cannot be loaded to display content, then browser clients will continue to look for alternative content within the object tag.

Silverlight content publishers must use the object tag (not the embed tag) to instantiate Silverlight. The following code shows how you can add the object tag.

<object type="application/x-silverlight-2" data="data:application/x-silverlight," width="..." height="..."> <param name="source" value="SeattleTrafficMaps.xap" /> <!-- Other parameters, if any --> ... <!-- The “Get Silverlight” messages and badge --> <p>This content requires Microsoft Silverlight. <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> </p> </object>

Specify Alternate Content for Silverlight

The object tag for the Silverlight application must be supplemented with nested alternate content, namely the inner HTML that is displayed on systems where Silverlight is absent. The following code shows how you can do that.

<object type="application/x-silverlight-2" data="data:application/x-silverlight," width="..." height="..."> <param name="source" value="SeattleTrafficMaps.xap" /> <!-- Other parameters, if any --> ... <!-- Nested alternate HTML content for search --> <h3>Traffic map of the Seattle-Puget Sound area</h3> <p>Up-to-the-minute traffic situation overlaid on the map of the Seattle-Puget Sound area, powered by <a href="http://maps.live.com">Live Maps</a> </p> <!-- Canned image representing the application contents --> <img src="SeattleTraffic_RushHour.jpg" alt="Seattle traffic at 5:30pm (evening rush-hour)" /> <!-- The “Get Silverlight” message and badge --> <p>This content requires Microsoft Silverlight. <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> </p> </object>

Use createObject When Using Silverlight.js

The primary function of Silverlight.js is to provide a cross-browser, cross-platform means of constructing the right markup to get Silverlight content hooked up to the HTML DOM. Typically this involves working around browser quirks to generate the object tag with the right set of parameters. The createObject function also takes the id of a parent element, for example a div or span, within which the Silverlight object will be hooked up as child element. This approach uses the following logic.

if (slParentElement != null) { slParentElement.innerHTML = slPluginHTML; }

For example, assume that your markup consisted of the following code.

<div id="divWithinWhichSLObjectExists"> <script type="text/javascript"> Silverlight.createObject("slObjectId", "divWithinWhichSLObjectExists", ...); </script> </div>

The effective DOM would be like the following code when executed on the browser.

<div id="divWithinWhichSLObjectExists"> <object type="application/x-silverlight-2" data="data:application/x-silverlight," width="..." height="..."> <param name="source" value="SeattleTrafficMaps.xap" /> <!-- Other Parameters, if any --> ... <!-- The “Get Silverlight” message and badge --> <p>This content requires Microsoft Silverlight. <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> </p> </object> </div>

This has a beneficial side effect for the following reasons:

  • Replacing the inner HTML of the parent div removes any other existing child elements in that div.
  • Search engines often parse and index markup as it is served—before any scripts execute and change the DOM.

In other words, you can add detailed contextual metadata as native HTML within the parent div element of the Silverlight object. Search engines will process the metadata, but the metadata will not show up in the browser.

If your parent div has nested contextual content, the following code is what the search robot sees.

<div id="divWithinWhichSLObjectExists"> <!-- Nested alternate HTML content for search --> <div> <h3>Traffic map of the Seattle-Puget Sound area</h3> <p>Up-to-the-minute traffic situation overlaid on the map of the Seattle-Puget Sound area, powered by <a href="http://maps.live.com">Live Maps</a> </p> <!-- canned image representing app contents --> <img src="SeattleTraffic_RushHour.jpg" alt="Seattle traffic at 5:30pm (evening rush-hour)" /> </div> <!-- Invocation of the createObject function in Silverlight.js --> <script type="text/javascript"> Silverlight.createObject("slObjectId", //SL plug-in id "divWithinWhichSLObjectExists", //parent id ...); </script> </div>

Test Down-Level Experiences

Regardless of the relative importance of Silverlight and HTML in your content, it is important to test the page as a user who does not have Silverlight installed.

To access the page as a down-level user, perform the following steps:

  1. Close all instances of Internet Explorer, and then start a new instance.
  2. On the Tools menu, point to Manage Add-ons, and then click Enable or Disable Add-ons. The Manage Add-ons dialog box is displayed.
  3. Select Microsoft Silverlight, select the Disable button, and then click OK.
  4. Restart Internet Explorer and navigate to the Web page that has your Silverlight content.

To revert, return to the Manage Add-ons dialog box, select Microsoft Silverlight, and select Enable.

Note

The procedure for temporarily disabling the Silverlight plug-in differs depending on the browser you are using.

After you have tested the down-level experience, it is worthwhile validating your page with a static analysis tool such as SEO Browser that understands the impact of markup and content on search engine optimization.

Conclusion

The ability of search engines to index content that is not native HTML is very limited. However, if you structure and present your Silverlight application in certain ways, they have a better chance of appearing on a search engine results page in response to a search query.

Tags: , ,

.Net | Learning resource | Technical

Free ASP.NET MVC eBook Tutorial from Scott Guthrie

by Vahid 18. March 2009 06:43

Scott Guthrie, Scott Hanselman, Rob Conery, and Phil Haack have release a book named ASP.NET MVC 1.0. first chapter of the book which is writen by Scott Guthrie is available to download for free. if you are new to MVC and also eager to know more about LINQ to SQL then you need to check this out. as always scott discribes the topics in practical manner so that we learn it much better. any way the chapter is available at the following link. download it, go through it and dont forget to thank scott.

  • Download the free end-to-end tutorial chapter in PDF form
  • Download the source code + unit tests for the completed application
  •  

    Tags: , ,

    .Net | Learning resource | Technical

    Some cool .Net open source applicaitons

    by Vahid 10. March 2009 17:31

    i have worked with some cool open source applications which are based on microsoft .net framework and i thought of sharing them with you.

    DotNetNuke

    URL: http://www.dotnetnuke.com

    dotnetnuke

    DotNetNuke® is the most widely adopted framework for building websites and web applications on Microsoft ASP.NET.  Using DotNetNuke, businesses can quickly develop and deploy interactive, dynamic websites, intranets, extranets and applications. 

    With hundreds of thousands of deployments around the world, a thriving user community and a huge array of available third-party extensions DotNetNuke is the smartest way to develop and deploy Internet applications.

    YetAnotherForum

    URL: http://www.yetanotherforum.net/

    yetanotherjpg

     YetAnotherForum.NET (YAF) is a Open Source discussion forum or bulletin board system for web sites running ASP.NET. The latest version is ASP.NET v2.0 with a Microsoft SQL Server backend. The full C# source code is available licensed as GPL.

    Oxite

    URL: http://visitmix.com/Lab/Oxite

    oxite

    Oxite is an open source, web standards compliant, blog engine built on ASP.NET MVC. It is fully featured and includes support for all the blogging features you would expect.

    Born out of a necessity to showcase Microsoft’s muscle in the blogging scene, Oxite provides example of ‘core blog functionality’ in a reusable way. The entire VisitMIX site runs on Oxite, which just shows the potential quality of the finished product. I love the effort that they have put into the design of MIX, and for once, we are able to show others a production Microsoft site running a Microsoft product that really shines visually.

    nopCommerce

    URL: http://www.nopcommerce.com/

    nopcommerce

    Running on C# nopCommerce is a fully customizable shopping cart. It’s stable and highly usable. nopCommerce is a open source e-commerce solution that is ASP.NET 3.5 based with a MS SQL 2005 backend database.

    It is pretty feature packed when you take a look around the system, and should serve as a good platform to build on for some developers. Whilst they aren’t over on the MVC system they have taken care of some of the problems with querystrings, and include a URL rewrite module.

    Most developers should be able to get up and running quickly, simply change your web.config in a few places and the autoinstaller should get you going. well worth investigating if you are a .NET developer with a background in e-commerce.

    BlogEngine.NET

    URL: http://dotnetblogengine.net

    blogengine

    BlogEngine.NET is an stable open source .NET blogging project. Touted as the next alternative to Wordpress for .NET developers it integrates the best features of the .NET platform into its offering. It also has received backing from Redmond, and is featured on the Microsoft.NET website as a Starter Kit.

    actually my blog is also runnin using this applicaiton. i am quite happy with it.

     

    Tags: ,

    .Net | Applications | Technical

    Shifted to the new home.

    by Vahid 10. March 2009 17:29
    finally it's over. i had heard that moving is a difficault word to do but i had not experienced it. anyway there has been a delay in my recent posts because of this fact. but anyway it's over.

    Tags:

    General | Personal

    ASP.NET Web User Controls VS. Web Custom Controls

    by Vahid 3. March 2009 03:54

    Web user controls are easy to make, but they can be less convenient to use in advanced scenarios. You develop Web user controls almost exactly the same way that you develop Web Forms pages. Like Web Forms, user controls can be created in the visual designer, they can be written with code separated from the HTML, and they can handle execution events. However, because Web user controls are compiled dynamically at run time they cannot be added to the Toolbox, and they are represented by a simple placeholder glyph when added to a page. This makes Web user controls harder to use if you are accustomed to full Visual Studio .NET design-time support, including the Properties window and Design view previews. Also, the only way to share the user control between applications is to put a separate copy in each application, which takes more maintenance if you make changes to the control.

    Web custom controls are compiled code, which makes them easier to use but more difficult to create; Web custom controls must be authored in code. Once you have created the control, however, you can add it to the Toolbox and display it in a visual designer with full Properties window support and all the other design-time features of ASP.NET server controls. In addition, you can install a single copy of the Web custom control in the global assembly cache and share it between applications, which makes maintenance easier.

    considering the kind of flexibility we get from web custom controls, i believe most of the times it would be much better to use custom controls.

    Web user controlsWeb custom controls
    Easier to create Harder to create
    Limited support for consumers who use a visual design tool Full visual design tool support for consumers
    A separate copy of the control is required in each application Only a single copy of the control is required, in the global assembly cache
    Cannot be added to the Toolbox in Visual Studio Can be added to the Toolbox in Visual Studio
    Good for static layout Good for dynamic layout

    Tags:

    .Net | Technical

    Integrating PayPal Payments into E-Commerce Applications with ASP.NET

    by Vahid 1. March 2009 16:24

     Check out the following article about Integrating PayPal Payments into ASP.NET E-Commerce Applications. this a very descriptive, useful article.

    http://www.west-wind.com/presentations/PayPalIntegration/PayPalIntegration.asp


    The process of integrating a PayPal payment involves several pages and HTTP POST backs.

    Tags: , ,

    .Net | Learning resource | Technical