De flesta moderna webbplatser innehåller JavaScript, vilket gör dem dynamiska och interaktiva. Även om sökmotorrobotar är ganska intelligenta, kanske de fortfarande inte återger mycket av JavaScript-innehållet, vilket påverkar sidrankningen.
JavaScript-innehållet beror mycket på hur din webbplats renderar koden.
Till exempel, vid rendering på serversidan, innehåller servern webbplatsens innehåll. På begäran får webbläsaren den fullständigt renderade HTML-koden.
Men vid rendering på klientsidan renderas JavaScript av webbläsaren som använder DOM.
Det tredje alternativet för rendering är dynamisk rendering, där innehåll som renderas på klientsidan går till webbläsaren, medan innehållet som renderas på serversidan går till sökmotorn(erna).
Renderingsteknikerna påverkar hur JS renderas och därmed sidrankingen.
För att säkerställa att all din webbplats JS-kod renderas bör du följa korrekta JavaScript SEO-praxis. Men först, låt oss förstå vad JavaScript SEO är.
Innehållsförteckning
Vad är JavaScript SEO?
JavaScript SEO gör det enkelt för sökmotorer att genomsöka och indexera JavaScript-kod (dynamiskt innehåll) på en webbplats (eller webbsida). Google eller någon annan sökmotor bearbetar JavaScript i tre steg, dvs genomsökning, rendering och indexering. För att Google ska kunna göra allt detta måste JavaScript-innehållet vara SEO-vänligt, dvs. synligt och tillgängligt.
Hur Google bearbetar JavaScript-innehåll på en sida
Här är stegen som Googlebot följer för att bearbeta JavaScript:
- Hämtar en URL från genomsökningskön via HTTP-begäran
- Kontrollerar robots.txt-filen efter webbadresser som webbplatsen inte tillåter genomsökning
- Hoppar över de ”otillåtna” webbadresserna, analyserar svaret för andra webbadresser och lägger till dem i genomsökningskön
- Ställer sidorna i kö för rendering, förutom de som är markerade för att inte vara indexerade
- Chromium renderar sidan, kör JavaScript och indexerar sidan
- Analyserar den renderade HTML-koden igen för länkar
- Köar webbadresserna för genomsökning
När indexerar inte Google JavaScript-innehåll?
Google kan indexera JavaScript när det implementeras korrekt. Till exempel, om några av dina JS- och CSS-filer är dolda kanske Google inte kan genomsöka webbplatsen korrekt. På liknande sätt, om du har länkar i den råa HTML-koden som inte finns i den renderade HTML-koden, kan Google hoppa över dessa länkar från att genomsökas eller indexeras.
Dessutom, om JavaScript inte är direkt inbäddat i HTML, måste Google ladda ner filen för körning. Dessutom kan sökmotorer ha en cachad version av en webbsida (för bättre prestanda), och JavaScript på sidan kanske inte är synkroniserat med den.
Eftersom varje bit av JavaScript-kod bör läsas, kan överanvändning av JavaScript sakta ner sidhastigheten eller orsaka timeout-fel.
Varför är JavaScript SEO viktigt?
JavaScript SEO är viktigt eftersom det påverkar många element på sidan och rankningsfaktorer som Google (eller sökmotorer) söker efter SEO:
Element på sidan
Potentiellt SEO-problem
Möjlig SEO-lösning
Rensat innehåll
Sökmotorer (som Google) kan inte rendera din sida om dess resurser är blockerade i din webbplats robots.txt-fil. Google kan inte heller indexera eller rendera JS- och CSS-filer, som är blockerade eller dolda.
Minska JavaScript på sidans kärninnehåll, följ alternativa metoder för rendering på klientsidan, som rendering på serversidan, dynamisk rendering, hybridrendering (kombination av klientsidan och serversidan)
Länkar
Om vissa länkar är interna eller JavaScript genererar länkarna till en URL när användaren klickar på den, kan Google inte upptäcka sådana länkar.
Använd ankarlänkar med href-attributet, beskrivande ankartexter för länkarna. Pseudolänkar som
Metadata
Om inte webbplatsen använder Node.js-paket som vue-meta, kan sökmotorer genomsöka samma eller, ännu värre, ingen metadata för varje vy eller sida.
Använd Node.js-paket som react-helmet, vue-meta, react-meta-tags
Latladdade bilder
Sökmotorns sökrobot väljer inget innehåll som är markerat för lata laddning. Sökmotorn kan inte rulla efter innehåll, och därför kan visst innehåll aldrig renderas.
Använd IntersectionObserver API, som förstår synligheten och positionen för DOM-element när de är tillgängliga. Du kan också använda den inbyggda lazy-loading-funktionen i webbläsaren (Chrome).
Sidans laddningstider
En sida med mycket JavaScript-innehåll kan laddas långsamt, vilket kan påverka dess sökrankning.
Lägg till kritisk JS-kod inline och skjut upp icke-kritisk JS-kod tills huvudinnehållet är renderat, vilket minskar den övergripande JS-koden.
Bästa metoder för JavaScript SEO
Genom att följa några av de bästa metoderna kan vi få sökmotorer att genomsöka och göra sidorna bättre:
Lägg till länkar och bilder enligt definierade webbstandarder
Lägg till alla länkar med ahreftag istället för onclick, #pageurl eller window.location.href=’/page-url. Google kan enkelt genomsöka länkarna och följa dem.
<a href=”http://adminvista.com.com”>Welcome to Geek world</a>
På samma sätt, lägg till bilder med img src-taggen och inte img data-src-taggen:
<img src=”myimg.png” />
Föredrar rendering på serversidan
Se till att innehållet på din webbplats är tillgängligt på servern förutom användarens webbläsare.
Se till att din renderade HTML har allt viktigt innehåll du vill visa
Den renderade HTML-koden bör ha rätt titel, metarobotar, metabeskrivningar, bilder, strukturerad data och kanoniska taggar.
Gör din JavaScript-webbplats SEO-vänlig
För att testa implementeringen av JavaScript SEO på din webbsida kan du följa stegen nedan:
- Ta reda på hur mycket JavaScript din webbplats använder: För detta kan du helt enkelt inaktivera JavaScript i din webbläsare. Om du inte ser mycket innehåll betyder det att din webbplats till stor del bygger på JavaScript.
- Kontrollera om Googlebot får allt viktigt innehåll och alla taggar: Du kan använda Googles mobilanpassade testverktyg eller testverktyget för utökade resultat för att kontrollera hur Googlebot använder rå HTML för att rendera innehåll.
- Du kan också använda chrome-tillägg som Visa renderad källa för att förstå hur JavaScript ändrar sidan och jämför käll-HTML och den renderade.
- Du kan leta efter de viktiga taggarna (titel, metabeskrivning, etc.) på den renderade HTML-koden med hjälp av SEO Pro Chrome-tillägg.
Slutsats
I den här artikeln lärde vi oss om hur JavaScript kan göra SEO-hantering lite komplex och metoderna för att lösa de potentiella problem som orsakas av att lägga till mycket JavaScript i din kod.
Vi såg också några bästa metoder och verktyg för att göra din JavaScript-webbplats SEO-vänlig. Andra fantastiska verktyg som hjälper Google att känna igen och genomsöka ditt dynamiska innehåll är Prerender, AngularJSoch Huckabuy.
Du kan också kolla några av de bästa sätten att minska webbladdningstiden.
Gillade du att läsa artikeln? Vad sägs om att dela med världen?