Search Engine Friendly Silverlight Applications Nikhil Kothari Software Architect, Microsoft Corporation http://www.nikhilk.net

Rich Internet Applications Email, TurboTax, Admin Tools http://finance.yahoo.com http://giffy.com

Search-friendly Web Applications Lots of standard practices Friendly URLs via rewriting Managing URLs via 301 redirects Well designed page structure … Indexability Addressing the What – Ensuring meaningful content for indexing Addressing the Where – Ensuring discoverability of the content Relevance Facilitate deep linking Create content worth linking

Lots of standard practices

Friendly URLs via rewriting

Managing URLs via 301 redirects

Well designed page structure

…

Indexability

Addressing the What – Ensuring meaningful content for indexing

Addressing the Where – Ensuring discoverability of the content

Relevance

Facilitate deep linking

Create content worth linking

The Indexability Problem Classic Web Applications Distinct pages with static markup/content Standard navigation Rich Web Applications Single pages with minimal static content Pages with client-side application logic Fetch additional data using XMLHTTP Update page in-place without navigation

Classic Web Applications

Distinct pages with static markup/content

Standard navigation

Rich Web Applications

Single pages with minimal static content

Pages with client-side application logic

Fetch additional data using XMLHTTP

Update page in-place without navigation

Restoring Indexability Add indexable content Publish content along-side in the same page as semantically correct markup The content matters, not the application itself The same content that a user would see Design the RIA to consume content and create a richer presentation and user interaction model HTML data <-> CSS HTML data <-> Script/Silverlight Add discoverability of content Enable deep linking/permalinks/link sharing Use sitemaps to publish links to all interesting content

Add indexable content

Publish content along-side in the same page as semantically correct markup

The content matters, not the application itself

The same content that a user would see

Design the RIA to consume content and create a richer presentation and user interaction model

HTML data <-> CSS

HTML data <-> Script/Silverlight

Add discoverability of content

Enable deep linking/permalinks/link sharing

Use sitemaps to publish links to all interesting content

Demo Using ASP.NET to Add Indexability to Silverlight Applications

Indexability Pattern – HTML Data Page Source Code <script> document.write(‘<div style=“display: none”>’); </script> <div id=“photoList”> <div> <h1 class=“title”>...</h1> <img class=“photo” src=“...” alt=“...” /> <a href=“...”>Link</a> </div> </div> <script> document.write(‘</div>’); </script> <div id=“appContainer” /> <script> // Script to create/start the application </script>

Page Source Code

Indexability Pattern – HTML Data Page source as rendered by browser <div style=“display: none”>’ <div id=“photoList”> <div> <h1 class=“title”>...</h1> <img class=“photo” src=“...” alt=“...” /> <a href=“...”>Link</a> </div> </div> </div> <div id=“appContainer” /> <script> // Script to create/start the application </script>

Page source as rendered by browser

Indexability Pattern – HTML Data Page source as seen by a search crawler <div id=“photoList”> <div> <h1 class=“title”>...</h1> <img class=“photo” src=“...” alt=“...” /> <a href=“...”>Link</a> </div> </div> <div id=“appContainer” />

Page source as seen by a search crawler

Why this Particular Pattern? Web development is all about finding patterns that solve multiple problems in a complementary way A single approach that works for Ajax and Silverlight and Flash Extra benefits of this “HTML Data” pattern Helps keep site functional in script-disabled environments Initial data to populate UI is available without a second request back to the server Initial data is already there… so you don’t need yet another progress bar as soon as the app starts up

Web development is all about finding patterns that solve multiple problems in a complementary way

A single approach that works for Ajax and Silverlight and Flash

Extra benefits of this “HTML Data” pattern

Helps keep site functional in script-disabled environments

Initial data to populate UI is available without a second request back to the server

Initial data is already there… so you don’t need yet another progress bar as soon as the app starts up

Why this Particular Pattern? What about content within the <object> tag? Works for Silverlight, but a search engine may or may not index that content Works for plugin scenarios; not for Ajax What about <noscript>? Doesn’t help address the initial data scenario Content of becomes a single text value -> so you have to now parse XML, rather than use the DOM APIs Works for Ajax scenarios; not for plugins

What about content within the <object> tag?

Works for Silverlight, but a search engine may or may not index that content

Works for plugin scenarios; not for Ajax

What about <noscript>?

Doesn’t help address the initial data scenario

Content of becomes a single text value -> so you have to now parse XML, rather than use the DOM APIs

Works for Ajax scenarios; not for plugins

Key Takeaways Indexability is essential to a search-friendly design You don’t have to sacrifice indexability to implement richer Web user experiences Enable data indexing, not the application itself Complement your RIA with server-side rendering to assist the search engine crawler Address the what and the where ASP.NET/IIS and Silverlight form an end-to-end Web platform Supports building search-friendly applications http://www.nikhilk.net/AjaxSEO.aspx

Indexability is essential to a search-friendly design

You don’t have to sacrifice indexability to implement richer Web user experiences

Enable data indexing, not the application itself

Complement your RIA with server-side rendering to assist the search engine crawler

Address the what and the where

ASP.NET/IIS and Silverlight form an end-to-end Web platform

Supports building search-friendly applications

http://www.nikhilk.net/AjaxSEO.aspx

Q&A