Search Friendly Web Apps
- 1. Search Engine Friendly Silverlight Applications Nikhil Kothari Software Architect, Microsoft Corporation http://www.nikhilk.net
- 2. Rich Internet Applications Email, TurboTax, Admin Tools http://finance.yahoo.com http://giffy.com
- 3. 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
- 4. 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
- 5. 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
- 6. Demo Using ASP.NET to Add Indexability to Silverlight Applications
- 7. 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>
- 8. 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>
- 9. 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” />
- 10. 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
- 11. 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
- 12. 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
- 13. Q&A