I Maj 2014 annonserade Google att de har byggt in rendering av JavaScript som en del av deras indexering.
“In order to solve this problem, we decided to try to understand pages by executing JavaScript. It’s hard to do that at the scale of the current web, but we decided that it’s worth it.”
Läs mer här: http://googlewebmastercentral.blogspot.se/2014/05/understanding-web-pages-better.html
I samband med detta lanserade man även en funktion i Google Webmaster Tools där webmasters kan hämta en webbsida, låta Google exekvera JavaScript och sedan rendera sidan.
Med tanke på att många SEO’s under årens lopp har använt JavaScript just för att Google inte ska indexera vissa saker, som till exempel olika filtreringsalternativ på listsidor i en e-handel, så kan detta både vara en möjliggörare och någonting som potentiellt ställer till det för just din webbplats.
I syfte att ta reda på exakt hur Google indexerar JavaScript och hur Google dessutom hanterar viktiga element såsom titel taggen när man använder PushState() för att via JavaScript ändra webbadressen när en besökare navigerar webbplatsen enbart via klienten och JavaScript, satte jag, innan sommaren, upp en testsajt som använder JavaScript och Pushstate().
Och nu har testsajten legat upp tillräckligt länge för att jag ska kunna dela med mig av resultaten.
Testsajten består av totalt 5 unika sidor:
- Home (http://prodigy.firstly.se/)
- News (http://prodigy.firstly.se/news/)
- About (http://prodigy.firstly.se/about/)
- Contact (http://prodigy.firstly.se/contact/)
- Staff (http://prodigy.firstly.se/staff/)
Samtliga sidor, med undantag för /news, använder JavaScript i en extern fil för att rendera innehållet på sidan. Om ni testar att surfa på webbplatsen med JavaScript inaktiverat kommer ni även att se att den enda länken som faktiskt syns och fungerar är den till /news.
History.pushstate() används när sidan har laddats klart för att ändra såväl den synliga webbadressen i webbläsaren och sidans titel tagg. Sedan används jquery $(‘body’).append() för att skriva det synliga innehållet på sidan. Detta gäller såväl rubrik (h1) som brödtext och navigering till resterande sidor på sajten.
Efter att Google hade indexerat sajten kunde jag notera att Google indexerade samtliga sidor och att innehållet på sidorna gick att hitta genom en site:prodigy.firstly.se [innehåll] sökning. Dock kunde jag inte se den korrekta titel taggen. Den dök istället upp som snippet i träfflistan:
Notera speciellt att /news-sidan i skärmdumpen ovan har indexerats korrekt. Detta är jus jälvklart i och med att denna sida inte använde några JavaScript, utan renderades i sin helhet från webbservern direkt.
Konstaterat: Google har inga problem att rendera och indexera innehåll och länkar som endast skrivs in på sidan via jquery append() och som exekveras på $(document).ready(). Men den titel tagg som skrivs in via history.pushstate() verkar Google inte känna igen som webbsidans titeltagg.
Så utmaningen jag ställdes inför var hur jag kan komma runt detta?
För de av er som under tidigare år har försökt få flash-sidor eller Ajax baserat innehåll indexerade så känner ni förmodligen till användningen av “#!”, eller “hash bang” som det även kallas. Hur detta går till beskrivs av Google på denna sida: https://developers.google.com/webmasters/ajax-crawling/docs/specification.
Om ni läser igenom specifikationen så finns det även beskrivet hur man ska lösa det för sidor som inte använder något “fragment” (Pages without has fragments). Kortfattat går det ut på att man lägger in en meta tagg i källkoden:
<meta name=”fragment” content=”!”>
Och att man sedan ser till att ett request till sidan med en extra parameter ?_escaped_fragment_= gör att en snapshot av sidan renderas direkt från servern, och att denna snapshot i sin helhet stämmer överens med hur sidan ser ut efter att alla JavaScript har exekverats.
I mitt fall byggde jag om sidorna och lade till meta taggen i källkoden och så att exempelvis ett request till http://prodigy.firstly.se/?_escaped_fragment_= gjorde att sidan i sin helhet, med rätt titel tagg, rubrik, innehåll och navigeringsöänkar rednerades av webbservern. Och det dröjde inte länge förrän jag i Google Webmaster Tools kunde se att Google hade skickat förfrågningar till webbadresser med den extra parametern, och endast ca 1 vecka efter ombyggnaden hade Google indexerat samtliga webbadresser igen, och nu stämde allt precis som jag ville ha det.
Det vill säga att korrekt titel listades i träfflistan och jag kunde söka reda på specifikt innehåll från de specifika sidorna.
Vid ombyggnationen lämnade jag en sida orörd. Alltså utan att lägga till någon meta tagg och utan att ett anrop med extraparametern gjorde någon skillnad. Sidan som lämnades orörd var /contact/. Och som ni kan se i bilden nedan så är detta den enda sidan för vilken Google fortfarande listar den felaktiga titeltaggen “Prodigy – Where SEO tests begin” och den titel som sätts via Pushstate(), “Contacting prodigy is not possible as of right now” listas istället i snippet.
Sammanfattning
Ifall du som SEO står inför utmaningen att få din kunds JavaScriptbaserade webbplats indexerad så har du två alternativ:
- Använd _escaped_fragment_ för att leverera en snapshot av sidan exakt så som du vill att den ska indexeras av Google
- Se till att ett request till en exakt URL alltid levererar en snapshot av sidan och efter detta lägga på JavaScript
En annan aspekt som är av avgörande betydelse, även om det inte specifikt omfattades av mitt test, är att länkar, oavsett om de renderas via JavaScript eller ej, måste innehålla et korrekt href attribut. Alltså att det i href attributet finns en helt vanlig webbadress som Google kan följa istället för att det enbart ligger ett onClick event på länken.
Eventuellt kommer jag att göra ett fördjupat test kring just länkarnas utformning framöver.
Hoppas att detta kan hjälpa andra som står inför liknande utmaningar. Dela gärna med er av denna bloggpost till andra via Facebook och Twitter ifall ni tyckte att den var hjälpsam, och hör gärna av er via kontaktisdan eller twitter (@berntjohansson) om ni har frågor
