Indexing Dynamic Content

Powerpoint her: https://www.dropbox.com/s/ovceznpkzv4p0qb/Crawling%20Ajax%20Content%20-%20Frontend%20Meetup%20Aarhus%20-%2020130912.pptx
-----
Zip-fil med kode: https://www.dropbox.com/s/jk4l4gprpmd60dg/Crawling%20Ajax%20Content%20-%20Frontend%20Meetup%20Aarhus%20-%2020130912.zip
-----
Indeksering af dynamisk indhold i JavaScript-tunge applikationer
Med udgangspunkt i at Single Page Apps, dynamisk indhold og AJAX spiller en større og større rolle på de sites vi bygger i dag, møder vi bla. én særlig udfordring: Hvordan fortolker Google alt indholdet – når meget af dette er skabt dynamisk? Dette spørgsmål sætter Brian fokus på, han vil bla. vise, hvordan man med brug af en headless browser kan implementere en simpel generisk løsning, som virker på tværs af hele sitet.

Transcript

1. Crawling Dynamic Content Brian Holmgård Kristensen @Frontend Meetup Aarhus - torsdag 12. september
2. Life of Brian • Web-udvikler hos Vertica • Arbejder primært med back-end  = .NET dreng • Spidskompetence er omkring udvikling af e-handel  bolia.com, bd.dk, optimera.dk, irma.dk, skagenfood.dk og andre • Synes at WEB er fedt!  Brugervenlighed  Performance  SEO <center>
3. Håndsoprækning • Hvor mange her har også fingrene i back-end delen?  .NET?  PHP?  Ruby on Rails?  Andet?
4. Vi skal snakke om… • Indeksering af web-sites med dynamisk indhold  Forstå problemstillingen • Konkret eksempel på en full-blown løsning  irma.dk • Konkret implementering  Single Page Application med ASP.NET MVC og AngularJS  100% dynamisk indhold  Bygget til anledningen 45 min og du spørger bare undervejs... 
5. Et typisk scenarie • Et public-facing web-site • Masser af indhold  Indholdssider, produkter, kategorier, opskrifter og meget andet • Rig klient  Masser af dynamik • Eksempelvis irma.dk
6. Teknikken bag… • Dét Morten sagde…  ”Irma.dk – de sidste 10%” • Derudover  Umbraco  ServiceStack  Commerce Server  RavenDB  NHibernate
7. Irma.dk - klient/server interaktion • Statiske elementer indlæses ved request af en side fra serveren  HTML, CSS, JavaScript, grafik, billeder, fonte osv. • Afvikling af JavaScript’en ”sætter strøm” til web-sitet/applikationen • Data flyder frem og tilbage mellem klient og serveren  Dette sker både automatisk men er også drevet af brugerinteraktion  Request  /api/catalog/search?category=frugt-og-groent&page=2  Response  JSON • Data renderes dynamisk  Templating HTML, CSS, JS… SERVER
8. Irma.dk - browser is key to content 1. Downloader skabelonen  HTML, CSS, JavaScript … 2. Sætter strøm til skabelonen  Afvikling af JavaScript 3. Præsenterer dynamisk data  Templating Er alle så ikke glade?
9. Tilbage til emnet… Udfordringen • Google læser kun server-side HTML’en • Skabelonen indekseres – ikke indholdet  {{ model.binding }} • Adgang til indholdet kræver afvikling af JavaScript  {{ model.binding }} skal oversættes til ”Skinke griller”
10. Hvad har vi tidligere gjort? • Server-side rendering af dynamisk indhold  Fx rendering af en usorteret liste med links til produkter • Kræver en del ekstra kode og vedligehold
11. Pas på med… • At lytte på/detektere crawlers og returnere specielt indhold  Cloaking
12. Google’s egen anbefaling • Fortæl Google at din side er dynamisk  Meta tag på alle sider  HashBang (#!) URL notation • Google oversætter URL’en og foretager et nyt http-get request  https://irma.dk/frugt-og-groent#!/groentsager  https://irma.dk/frugt-og-groent?_escaped_fragment_=/groentsager • Herefter anbefales det at returnere et HTML snapshot af den pågældende side https://developers.google.com/webmasters/ajax-crawling/
13. Show – don’t tell Demo af indeksering på irma.dk
14. Sådan blev det løst… • PhantomJS  Headless Webkit browser  Afvikles som en http-server der lytter på en bestemt port  RESTful api  Startes som en Windows Scheduled Task  På alle web-servere • Selenium WebDriver  NuGet pakke • ASP.NET http module  Lytter på alle requests  Reagerer på URL’s indeholdende _escaped_fragment_ query-string  Omskriver URL’en internt – til HashBang notation  Sender forespørgslen videre til PhantomJS (Selenium WebDriver)  Returnerer dét dynamiske HTML-snapshot genereret af PhantomJS http://phantomjs.org/
15. Show – don’t tell Gennemgang af implementering
16. Et par udfordringer på vejen… • Undgå mange samtidige requests mod PhantomJS  Vi tillader max 5 samtidige requests adgang til PhantomJS  Vi cacher indholdet et antal minutter på serveren (konfigurerbart) • PhantomJS returnerer ikke http-status koden  Vi returnerer den fra serveren som en del af HTML’en  Og parser den efterfølgende • PhantomJS kan finde på at returnere et tomt HTML snapshot  Vi forsøger 5 gange indtil vi får et fornuftigt resultat  Ellers returneres http-status 500 (Internal Server Error)
17. Afrunding • Sørg for at alt dynamisk indhold kan indekseres • Pas på med cloaking • Vedligehold præsentation af data ét sted • PhantomJS + lidt ekstra kan bruges til at implementere en simpel og generisk løsning • Test 404 og 500 håndtering • Test opsætningen med Google’s ”Fetch as Google”-tool
18. Tak for din tid • Brian Holmgård Kristensen • bhk@vertica.dk • http://about.me/brianh • @brianh_dk