Welcome to MSDN Blogs Sign in | Join | Help

jhawk's WebLog

Jonathan Hawkins, Software Architect for ASP.NET, AJAX, Silverlight, .NET Framework
Search enabling Silverlight and AJAX web applications

The major search engines index HTML text elements (body text, title, image alt text, etc) and following anchor tag (<a href= />) links. Currently none of the search engines index XAML.

 

However many Silverlight web applications have dynamic experiences that are driven by code running in the browser. In Silverlight 1.0 this is Javascript and in Silverlight 1.1 this will include manage code languages such as C#, VB, etc. The code may be as simple as generating dynamic UI fragments on the fly all the way from a static list of data to dynamically obtaining data from a database/web service and generate UI fragments and adding them to the UI experience. Thus even when search engines get around to indexing static .xaml content which is good first step it will still be a partial solution as most of the content will be dynamic.

 

I gave a talk (with Nathan Buggia from Live Search) at MIX07 about search enabling dynamic content including Silverlight content. You can download the deck, view the video from my blog posting. The Silverlight content is about half way into the video. Download the end to end Northwind sample here that has the ProductSL.aspx which is Silverlight enabled . The sample also has a product data search provider against SQL Server, dynamic data sitemaps, navigation data links control. Below are the relevant highlights from the talk:

 

Sitemaps

The major search engines supports sitemaps which are great way to give hints to the search engine as to which pages (URLs) are important in the site, the priority of the page relative to the other page in the site, change frequency (daily, weekly, etc) and when the page was last modified. This is a good way to point search engines at the right set of pages in the web site. The ASP.NET Futures CTP has features to enable you to have multiple code driven dynamic sitemaps. This can be used for ASP.NET, AJAX and Silverlight web applications. There is a quickstart tutorial.

 

 “ALT text for dynamic content”

Search engines can’t index static XAML (not yet) and they can’t index dynamically generated XAML.  If we look at how image tags are handled by search engines, the search engines may index the image name in the src attribute however they don’t index the actual JPEG/GIF image, they do however also index the alt=”sometext” attribute. The point being they index the textual attributes for the image tag.

 

So for dynamic pages you could have dynamic Silverlight/AJAX content in a <div id=”dynamic_content” > and static text and navigation links hints (below) in <div id=”flat_content” >. The flat_content div can be thought of as the “ALT text” for the dynamic content. For data/service driven web applications you can add a small number of HTML text hints. You can do this very easily using .aspx controls and a small amount of LINQ/ADO.NET code. For static information you could even place the data directly inline as HTML in the flat_content div and data bind to that by parsing the HTML . Update: Nikhil has a great post wrt inlining data in HTML to help with SEO.

 

You need to ensure that the web application returns the same page to a search engine that would be returned to a regular browser. The search engines frown upon returning different pages to them and may even ban (blacklist) the web site if different content is returned. Below is a optimization (just one option) to remove the unneeded flat HTML in the flat_content div if the browser has javascript enabled … and thus staying true to the tenet of returning the same content to browsers and search engines.

 

<script type="text/javascript">

    document.getElementById("flat_content").setAttribute("innerHTML","");

</script>

 

Navigation Hyperlinks and Query Strings

Many Silverlight/AJAX web applications have one (or a small number pages) page that directly update the UI experience in the browser without page-to-page navigation thus there are no navigation anchor tags (URLs) for the search engines to follow. You can give the search engines help by providing anchor tags that point back to the page with navigation information in the query string. When the page loads just parse the query string in the page load and display the request UI. In Silverlight 1.1 you can access the query string using the managed code HtmlPage.QueryString api. These navigation anchor tag and query string hints will help the search engine follow all the links in the site and so obtain the relevant text keywords for its index. When the user searches in the search engine for a keyword, the Silverlight/AJAX will have a keyword match and included in the search results. When the user clicks on the search result they will be presented with the full Silverlight enabled experience.

 

Enjoy

Jonathan

Posted: Wednesday, May 23, 2007 12:11 PM by jhawk

Comments

Brad Abrams said:

Check out your referral logs.. notice a pattern? If your logs are like mine, a HUGE percentage of your

# May 25, 2007 12:20 AM

Silverlight City said:

Silverlight news - May 27,2007

# May 27, 2007 8:06 AM

PohEe.com said:

I would suggest you to implement URL rewriting for all the URL for SEO.

# May 28, 2007 10:15 PM

Robert Folkesson said:

Om du vill optimera dina ASP.NET AJAX och Silverlight-applikationer för den sökindexeringen som söktjänsterna

# May 31, 2007 3:54 PM

carlcamera said:

Jonathan, your video with Nathan Buggia at MIX was very informative, and I'm quite interested in both these topics, Silverlight and SEO.  Your technique, and your example at 0:34:30 into the video is both somewhat unsettling, and leaves many questions open.  Fortunately, you say in your talk "send me some feedback."  Here's mine:

You state specifically in the video and above:

> You need to ensure that the web application returns the same page to a search engine that would be returned to a regular browser ... [snip] ... and thus staying true to the tenet of returning the same content to browsers and search engines.

I see a huge opportunity for abuse here.  In your example, browsers with Silverlight enabled see a single product, and the search bots get 22 links to different products.  How does this not violate the tenant you just described?

This "trick" to display rich content to capable browsers and plain content to non-capable browsers has been around for some time -- and my understanding is that they are all frowned upon.  Even shifting text headings off the page in order to display image headings is said to hurt rankings -- even though the motivation is to provide a rich/plain experience.

I guess my questions are:

1. Is providing 22 links vs one product considered "same page experience" in your book? in Live Search's book? a good Seo technique in general?

2. What techniques are at the disposal of search engines to ensure and enforce same page experience?

And my comment is:

Your plain experience seems to be SEO-driven and not accessibility-driven.  You as someone who speaks to business leaders (and as much as they want to know first and foremost the SEO implications of Silverlight) should emphasize first and foremost the needs of people who are deserving of the full breadth of information that the internet provides and whose internet experience would be damaged most by the lack of a plain browser experience.

# June 4, 2007 8:16 PM

Business Value Blog said:

Silverlight is a cross browser, cross platform plug-in that delivers a consistent user experience across

# August 7, 2007 5:25 AM
New Comments to this post are disabled
Page view tracker