0
Search Engine Friendly Silverlight Applications Nikhil Kothari Software Architect, Microsoft Corporation http://www.nikhil...
Rich Internet Applications Email, TurboTax, Admin Tools http://finance.yahoo.com http://giffy.com
Search-friendly Web Applications <ul><li>Lots of standard practices </li></ul><ul><ul><li>Friendly URLs via rewriting </li...
The Indexability Problem <ul><li>Classic Web Applications </li></ul><ul><li>Distinct pages with static markup/content </li...
Restoring Indexability <ul><li>Add indexable content </li></ul><ul><ul><li>Publish content along-side in the same page as ...
Demo Using ASP.NET to Add Indexability to Silverlight Applications
Indexability Pattern – HTML Data <ul><li>Page Source Code </li></ul><script> document.write(‘<div style=“display: none”>’)...
Indexability Pattern – HTML Data <ul><li>Page source as rendered by browser </li></ul><div style=“display: none”>’ <div id...
Indexability Pattern – HTML Data <ul><li>Page source as seen by a search crawler </li></ul><div id=“photoList”> <div> <h1 ...
Why this Particular Pattern? <ul><li>Web development is all about finding patterns that solve multiple problems in a compl...
Why this Particular Pattern? <ul><li>What about content within the <object> tag? </li></ul><ul><ul><li>Works for Silverlig...
Key Takeaways <ul><li>Indexability is essential to a search-friendly design </li></ul><ul><li>You  don’t  have to sacrific...
Q&A
Upcoming SlideShare
Loading in...5
×

Search Friendly Web Apps

1,177

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,177
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Search Friendly Web Apps"

  1. 1. Search Engine Friendly Silverlight Applications Nikhil Kothari Software Architect, Microsoft Corporation http://www.nikhilk.net
  2. 2. Rich Internet Applications Email, TurboTax, Admin Tools http://finance.yahoo.com http://giffy.com
  3. 3. Search-friendly Web Applications <ul><li>Lots of standard practices </li></ul><ul><ul><li>Friendly URLs via rewriting </li></ul></ul><ul><ul><li>Managing URLs via 301 redirects </li></ul></ul><ul><ul><li>Well designed page structure </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>Indexability </li></ul><ul><ul><li>Addressing the What – Ensuring meaningful content for indexing </li></ul></ul><ul><ul><li>Addressing the Where – Ensuring discoverability of the content </li></ul></ul><ul><li>Relevance </li></ul><ul><ul><li>Facilitate deep linking </li></ul></ul><ul><ul><li>Create content worth linking </li></ul></ul>
  4. 4. The Indexability Problem <ul><li>Classic Web Applications </li></ul><ul><li>Distinct pages with static markup/content </li></ul><ul><li>Standard navigation </li></ul><ul><li>Rich Web Applications </li></ul><ul><li>Single pages with minimal static content </li></ul><ul><li>Pages with client-side application logic </li></ul><ul><li>Fetch additional data using XMLHTTP </li></ul><ul><li>Update page in-place without navigation </li></ul>
  5. 5. Restoring Indexability <ul><li>Add indexable content </li></ul><ul><ul><li>Publish content along-side in the same page as semantically correct markup </li></ul></ul><ul><ul><ul><li>The content matters, not the application itself </li></ul></ul></ul><ul><ul><ul><li>The same content that a user would see </li></ul></ul></ul><ul><ul><li>Design the RIA to consume content and create a richer presentation and user interaction model </li></ul></ul><ul><ul><ul><li>HTML data <-> CSS </li></ul></ul></ul><ul><ul><ul><li>HTML data <-> Script/Silverlight </li></ul></ul></ul><ul><li>Add discoverability of content </li></ul><ul><ul><li>Enable deep linking/permalinks/link sharing </li></ul></ul><ul><ul><li>Use sitemaps to publish links to all interesting content </li></ul></ul>
  6. 6. Demo Using ASP.NET to Add Indexability to Silverlight Applications
  7. 7. Indexability Pattern – HTML Data <ul><li>Page Source Code </li></ul><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. 8. Indexability Pattern – HTML Data <ul><li>Page source as rendered by browser </li></ul><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. 9. Indexability Pattern – HTML Data <ul><li>Page source as seen by a search crawler </li></ul><div id=“photoList”> <div> <h1 class=“title”>...</h1> <img class=“photo” src=“...” alt=“...” /> <a href=“...”>Link</a> </div> </div> <div id=“appContainer” />
  10. 10. Why this Particular Pattern? <ul><li>Web development is all about finding patterns that solve multiple problems in a complementary way </li></ul><ul><ul><li>A single approach that works for Ajax and Silverlight and Flash </li></ul></ul><ul><li>Extra benefits of this “HTML Data” pattern </li></ul><ul><ul><li>Helps keep site functional in script-disabled environments </li></ul></ul><ul><ul><li>Initial data to populate UI is available without a second request back to the server </li></ul></ul><ul><ul><li>Initial data is already there… so you don’t need yet another progress bar as soon as the app starts up </li></ul></ul>
  11. 11. Why this Particular Pattern? <ul><li>What about content within the <object> tag? </li></ul><ul><ul><li>Works for Silverlight, but a search engine may or may not index that content </li></ul></ul><ul><ul><li>Works for plugin scenarios; not for Ajax </li></ul></ul><ul><li>What about <noscript>? </li></ul><ul><ul><li>Doesn’t help address the initial data scenario </li></ul></ul><ul><ul><li>Content of becomes a single text value -> so you have to now parse XML, rather than use the DOM APIs </li></ul></ul><ul><ul><li>Works for Ajax scenarios; not for plugins </li></ul></ul>
  12. 12. Key Takeaways <ul><li>Indexability is essential to a search-friendly design </li></ul><ul><li>You don’t have to sacrifice indexability to implement richer Web user experiences </li></ul><ul><ul><li>Enable data indexing, not the application itself </li></ul></ul><ul><li>Complement your RIA with server-side rendering to assist the search engine crawler </li></ul><ul><ul><li>Address the what and the where </li></ul></ul><ul><li>ASP.NET/IIS and Silverlight form an end-to-end Web platform </li></ul><ul><ul><li>Supports building search-friendly applications </li></ul></ul><ul><li>http://www.nikhilk.net/AjaxSEO.aspx </li></ul>
  13. 13. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×