• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Search Friendly Web Apps
 

Search Friendly Web Apps

on

  • 1,724 views

 

Statistics

Views

Total Views
1,724
Views on SlideShare
1,490
Embed Views
234

Actions

Likes
1
Downloads
25
Comments
0

4 Embeds 234

http://www.nikhilk.net 224
http://www.slideshare.net 8
http://64.233.169.104 1
http://console.flite.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Search Friendly Web Apps Search Friendly Web Apps Presentation Transcript

    • Search Engine Friendly Silverlight Applications Nikhil Kothari Software 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 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
    • 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
    • Demo Using ASP.NET to Add Indexability to Silverlight Applications
    • 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>
    • 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>
    • 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” />
    • 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&A