Your SlideShare is downloading. ×
Search Friendly Web Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Search Friendly Web Apps

1,161

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×