Search Friendly Web Apps

  • 1,148 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,148
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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