JavaScript-webbplatser är här för att stanna. Eftersom JavaScript i dess många ramverk blir en allt mer populär resurs för moderna webbplatser, måste SEO:are kunna säkerställa att deras tekniska implementering är sökmotorvänlig.
I den här artikeln kommer vi att fokusera på hur man optimerar JS-webbplatser för Google (även om Bing också rekommenderar samma lösning, dynamisk rendering).
Innehållet i denna artikel inkluderar:
1. JavaScript-utmaningar för SEO
2. Rendering på klientsidan och serversidan
3. Hur Google genomsöker webbplatser
4. Hur man upptäcker renderat innehåll på klientsidan
5. Lösningarna: hybrid rendering och dynamisk rendering
1. JavaScript-utmaningar för SEO
React, Vue, Angular, Node och Polymer. Om åtminstone ett av dessa tjusiga namn låter bekanta för dig, är chansen stor att du redan har att göra med en JavaScript-driven webbplats.
Alla dessa JavaScript-ramverk ger stor flexibilitet och kraft till moderna webbplatser.
De öppnar upp ett brett utbud av möjligheter när det gäller rendering på klientsidan (som att tillåta sidan att renderas av webbläsaren istället för servern), sidladdningsmöjligheter, dynamiskt innehåll, användarinteraktion och utökad funktionalitet.
Om vi bara tittar på vad som har en inverkan på SEO, kan JavaScript-ramverk göra följande för en webbplats:
- Ladda innehåll dynamiskt baserat på användarinteraktioner
- Lägg ut synligt innehåll på entreprenad (se rendering på klientsidan nedan)
- Outsourca laddningen av metainnehåll eller kod (till exempel strukturerad data)
Tyvärr, om de implementeras utan att bära ett par SEO-glasögon, kan JavaScript-ramverk utgöra allvarliga utmaningar för sidans prestanda, allt från hastighetsbrister till renderingsblockeringsproblem eller till och med hindra genomsökning av innehåll och resultatlänkar.
Det finns många aspekter som SEO:are måste ta hänsyn till när de granskar en webbsida med JavaScript, vilket kan sammanfattas enligt följande:
- Kan Googlebot se innehållet? Kom ihåg att boten inte interagerar med sidan (bilder, flikar med mera).
- Är länkarna genomsökbara och följs därför? Använd alltid ankaret () och referensen (href =), även tillsammans med “onclick”-händelserna.
- Är renderingen tillräckligt snabb?
- Hur påverkar det spårningseffektiviteten och spårningsbudgeten?
Många frågor att besvara. Så var ska en SEO börja?
Nedan finns viktiga riktlinjer för JS-webbplatsoptimering, för att möjliggöra användningen av dessa ramverk och hålla sökrobotar nöjda.
2. Representation på klientsidan och serversidan: de bästa “fienderna”
Förmodligen den viktigaste kunskapen som alla SEOs behöver när de hanterar JS-drivna webbplatser är begreppen klient- och serversidans rendering.
Att förstå skillnaderna, fördelarna och nackdelarna med båda är viktigt för att implementera rätt SEO-strategi och inte gå vilse när man pratar med mjukvaruingenjörer (som så småningom är ansvariga för att implementera den strategin).
Låt oss se hur Googlebot genomsöker och indexerar sidor, och betraktar det som en mycket grundläggande sekventiell process:
1. Klienten (webbläsaren) gör flera förfrågningar till servern för att ladda ner all nödvändig information som sidan så småningom kommer att visa. Vanligtvis hänvisar den första begäran till det statiska HTML-dokumentet.
2. Därefter laddas CSS- och JS-filerna, som HTML-dokumentet refererar till, ned: det här är stilarna, skripten och tjänsterna som hjälper till att skapa sidan.
3. Webbplatsåtergivningstjänsten (WRS) analyserar och kör JavaScript (som kan hantera hela eller delar av innehållet eller bara enkel funktionalitet).
Detta JavaScript kan levereras till boten på två olika sätt:
- Klientsidan: allt arbete är i princip “outsourcat” till WRS, som nu ansvarar för att ladda alla skript och bibliotek som krävs för att rendera innehållet. Fördelen för servern är att när en riktig användare begär sidan sparar den mycket resurser, eftersom exekveringen av skripten sker på webbläsarsidan.
- Serversidan: Allt är förbakat (aka renderat) av servern och det slutliga resultatet skickas till boten, redo att genomsöka och indexera. Nackdelen här är att allt arbete görs internt av servern och inte outsourcas till klienten, vilket kan leda till ytterligare förseningar i att skicka in ytterligare förfrågningar.
4. Koffein (Googles indexerare) indexerar innehållet som hittas
Nya länkar upptäcks i innehållet för att fortsätta genomsöka
Detta är teorin, men i den verkliga världen har Google inte oändliga resurser och måste sätta vissa prioriteringar vid genomsökning.
3. Hur Google genomsöker webbplatser
Google är en väldigt smart sökmotor med väldigt smarta sökrobotar.
Men det tar vanligtvis ett reaktivt tillvägagångssätt när det kommer till ny teknik som tillämpas på webbutveckling. Det betyder att det är Google och dess bots som behöver anpassa sig till nya ramverk i takt med att de blir mer och mer populära (som är fallet med JavaScript).
Av denna anledning är sättet som Google genomsöker JS-drivna webbplatser fortfarande långt ifrån perfekt, med blinda fläckar som mjukvaru- och SEO-ingenjörer måste mildra på något sätt.
Detta är i ett nötskal hur Google genomsöker dessa webbplatser:
Grafen ovan delades av Tom Greenaway på Google IO 2018-konferensen, och vad den i grund och botten säger är: om du har en webbplats som är starkt beroende av JavaScript, bör du ladda JS-innehållet väldigt snabbt, annars kommer vi inte att kunna representera den (därav indexera den) under den första vågen, och den kommer att skjutas upp till en andra våg, som ingen vet när kan inträffa.
Därför kommer ditt JavaScript-baserade renderade innehåll på klientsidan förmodligen att renderas av bots i den andra vågen, eftersom de under den första vågen kommer att ladda ditt innehåll på serversidan, vilket borde vara tillräckligt snabbt. Men de vill inte lägga för mycket resurser och ta på sig för många uppgifter.
Med Tom Greenaways ord:
“Renderingen av JavaScript-drivna webbplatser i Google Sök skjuts upp tills Googlebot har tillgängliga resurser för att bearbeta innehållet.”
Konsekvenserna för SEO är enorma, ditt innehåll kanske inte upptäcks förrän en, två eller till och med fem veckor senare och under tiden kommer bara din sida utan innehåll att utvärderas och rankas av algoritmen.
Det som borde oroa en SEO mest vid det här laget är denna enkla ekvation:
Inget innehåll hittades = Innehåll (förmodligen) kan knappast indexeras
Och hur skulle du ranka en sida utan innehåll? Lätt att gissa för vilken SEO som helst.
Än så länge är allt bra. Nästa steg är att veta om innehållet renderas på klientsidan eller serversidan (utan att fråga mjukvaruingenjörer).
4. Hur man upptäcker renderat innehåll på klientsidan
Alternativ ett: dokumentobjektmodellen (DOM)
Det finns flera sätt att veta det, och för detta måste vi introducera begreppet DOM.
Dokumentobjektmodellen definierar strukturen för ett HTML (eller XML) dokument och hur dessa dokument kan nås och manipuleras.
Inom SEO och mjukvaruteknik refererar vi i allmänhet till DOM som det slutliga HTML-dokumentet som genereras av webbläsaren, i motsats till det ursprungliga statiska HTML-dokumentet som finns på servern.
Du kan tänka på HTML som stammen på ett träd. Du kan lägga till grenar, löv, blommor och frukter (som är DOM).
Vad JavaScript gör är att manipulera HTML och skapa en rik DOM som lägger till funktionalitet och innehåll.
I praktiken kan du kontrollera den statiska HTML-koden genom att trycka på “Ctrl + U” på vilken sida du tittar på, och DOM genom att “Inspektera” sidan när den är fulladdad.
För det mesta, för moderna webbplatser, kommer du att se att de två dokumenten är ganska olika.
Alternativ två: Chrome-profil utan JS
Skapa en ny profil i Chrome och inaktivera JavaScript via innehållsinställningarna (åtkomst till dem direkt här – Chrome://settings/content).
Alla webbadresser som du navigerar till med den här profilen kommer inte att ladda något JS-innehåll. Därför identifierar varje blanksteg på din sida ett innehåll som visas på klientsidan.
Alternativ tre: Utforska som Google i Google Search Console
Så länge din webbplats är registrerad med Google Search Console (jag kan inte komma på någon bra anledning till varför det inte skulle vara det), använd verktyget “Utforska som Google” i den äldre versionen av konsolen. Detta kommer att returnera en representation av hur Googlebot ser sidan och en representation av hur en normal användare ser den. Finns det många skillnader?
Alternativ fyra: Kör Chrome version 41 i huvudlöst läge (Chromium)
Google uppgav officiellt i början av 2018 att de använder en äldre version av Chrome (särskilt version 41, som vem som helst kan ladda ner härifrån) i huvudlöst läge för att rendera webbplatser. Huvudkonsekvensen är att en sida som inte visas bra i den versionen av Chrome kan vara föremål för vissa genomsökningsproblem.
Alternativ fem: genomsök sidan på Screaming Frog med Googlebot
Och med JavaScript-återgivningsalternativet inaktiverat. Kontrollera om boten renderar innehåll och metainnehåll korrekt.
Efter alla dessa kontroller, fråga dina mjukvaruingenjörer eftersom du inte vill lämna några lösa trådar.
5. Lösningarna: hybrid rendering och dynamisk rendering
Att be en mjukvaruingenjör att ångra mycket utvecklingsarbete eftersom det skadar SEO kan vara en svår uppgift.
Det händer ofta att SEO:er inte är inblandade i utvecklingsprocessen, och bara kallas in när all infrastruktur är på plats.
Vi SEO:are bör arbeta för att förbättra vår relation med mjukvaruingenjörer och göra dem medvetna om de enorma konsekvenser som alla innovationer kan ha på SEO.
Så här kan du undvika ett problem som tomma sidor i första hand. Lösningen ligger i två tillvägagångssätt.
Hybrid representation
Detta tillvägagångssätt, även känt som isomorft JavaScript, syftar till att minimera behovet av rendering på klientsidan och gör ingen skillnad mellan bots och riktiga användare.
Hybridrepresentationen föreslår följande:
- För det första körs all icke-interaktiv kod (inklusive all JavaScript) på serversidan för att rendera statiska sidor. Allt innehåll är synligt för både sökrobotar och användare när de går in på sidan.
- Å andra sidan exekverar klienten (webbläsaren) endast de interaktiva resurserna med användaren. Detta gynnar sidladdningshastigheten eftersom mindre rendering på klientsidan behövs.
Dynamisk rendering
Detta tillvägagångssätt syftar till att upptäcka förfrågningar från en bot kontra de som görs av en användare och servar sidan därefter.
- Om begäran kommer från en användare: servern levererar den statiska HTML-koden och använder rendering på klientsidan för att bygga DOM och rendera sidan.
- Om begäran kommer från en bot: Servern förbehandlar JavaScript genom en intern processor (som Puppeteer) och levererar den nya statiska HTML-koden (DOM, manipulerad av JavaScript) till boten.
Det bästa av båda världar
Att kombinera de två lösningarna kan också ge stora fördelar för både användare och bots.
- Använd hybridrendering om begäran kommer från en användare
- Använd rendering på serversidan om begäran kommer från en bot
Slutsats
Eftersom användningen av JavaScript på moderna webbplatser växer dag för dag, över många lätta och enkla ramverk, måste mjukvaruingenjörer förlita sig enbart på HTML för att tillfredsställa sökmotorrobotar, vilket varken är realistiskt eller genomförbart. .
De SEO-problem som väcker renderingslösningar på klientsidan kan dock lösas framgångsrikt på olika sätt med hybridrendering och dynamisk rendering.
Att känna till den tillgängliga tekniken, din webbplatsinfrastruktur, ingenjörer och lösningar kan säkerställa framgången för din SEO-strategi även i komplicerade miljöer som JavaScript-webbplatser.
Giorgio Franco är senior teknisk SEO-specialist på Vistaprint.
