Upload
nikhil-kothari
View
1.179
Download
4
Embed Size (px)
Citation preview
Search Engine FriendlySilverlight Applications
Nikhil KothariSoftware 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
The Indexability ProblemClassic 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
DemoDemoUsing ASP.NET to Add Indexability to Using ASP.NET to Add Indexability to
Silverlight ApplicationsSilverlight Applications
Indexability Pattern – HTML DataPage 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>
Indexability Pattern – HTML DataPage 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>
Indexability Pattern – HTML DataPage 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” />
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
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
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
Q&AQ&A