Search enabling Silverlight and AJAX web applications

jhawk — Wed, 23 May 2007 22:11:00 GMT

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.

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

Search Capabilities for Dynamic ASP.NET Web Content

jhawk — Sun, 06 May 2007 21:43:00 GMT

Last week at MIX07 Nathan Buggia and I presented a talk on Search enabling dynamic web content applications including ASP.NET and Silverlight web applications. Download the deck and stream or download the video.

Updated

The BasicSearch.zip sample demonstrates how to use the SearchDataSource, search providers and turn your ASP.NET navigation into a search site map that can be consumed by the major search engine. Download the ASP.NET Futures CTP and copy the Microsoft.Web.Preview.dll into the bin directory.

You can find QuickStarts on Search and Search Site Maps to learn more. It will also show how to write your own search provider. I have included sample code search providers for Index Server and Yahoo! search.

enjoy
Jonathan

jhawk's WebLog : Sitemap

Search enabling Silverlight and AJAX web applications

Search Capabilities for Dynamic ASP.NET Web Content