search friendly web apps

13
Search Engine Friendly Silverlight Applications Nikhil Kothari Software Architect, Microsoft Corporation http://www.nikhilk.net

Upload: nikhil-kothari

Post on 06-Jul-2015

1.179 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: Search Friendly Web Apps

Search Engine FriendlySilverlight Applications

Nikhil KothariSoftware Architect, Microsoft Corporation

http://www.nikhilk.net

Page 2: Search Friendly Web Apps

Rich Internet Applications

Email, TurboTax, Admin Tools

http://finance.yahoo.com

http://giffy.com

Page 3: Search Friendly Web Apps

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

Page 4: Search Friendly Web Apps

The Indexability ProblemClassic 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

Page 5: Search Friendly Web Apps

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

Page 6: Search Friendly Web Apps

DemoDemoUsing ASP.NET to Add Indexability to Using ASP.NET to Add Indexability to

Silverlight ApplicationsSilverlight Applications

Page 7: Search Friendly Web Apps

Indexability Pattern – HTML DataPage 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>

Page 8: Search Friendly Web Apps

Indexability Pattern – HTML DataPage 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>

Page 9: Search Friendly Web Apps

Indexability Pattern – HTML DataPage 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” />

Page 10: Search Friendly Web Apps

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

Page 11: Search Friendly Web Apps

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

Page 12: Search Friendly Web Apps

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

Page 13: Search Friendly Web Apps

Q&AQ&A