De fleste moderne nettsteder inneholder JavaScript, noe som gjør dem dynamiske og interaktive. Selv om søkemotorroboter er ganske intelligente, gjengir de kanskje ikke mye av JavaScript-innholdet, noe som påvirker siderangeringen.
JavaScript-innholdet avhenger mye av hvordan nettstedet ditt gjengir koden.
For eksempel, i gjengivelse på serversiden, inneholder serveren nettstedets innhold. På forespørsel mottar nettleseren den fullstendig gjengitte HTML-en.
Ved gjengivelse på klientsiden blir JavaScript imidlertid gjengitt av nettleseren ved hjelp av DOM.
Det tredje alternativet for gjengivelse er dynamisk gjengivelse, der innhold gjengitt på klientsiden går til nettleseren, mens innholdet gjengitt på serversiden går til søkemotoren(e).
Gjengivelsesteknikkene påvirker hvordan JS gjengis og dermed sidens rangeringer.
For å sikre at all JS-koden for nettstedet ditt gjengis, bør du følge riktige JavaScript SEO-praksis. Men først, la oss forstå hva JavaScript SEO er.
Innholdsfortegnelse
Hva er JavaScript SEO?
JavaScript SEO gjør det enkelt for søkemotorer å gjennomsøke og indeksere JavaScript-kode (dynamisk innhold) på et nettsted (eller nettside). Google eller en annen søkemotor behandler JavaScript i tre trinn, dvs. gjennomsøk, gjengi og indekser. For at Google skal gjøre alt dette, må JavaScript-innholdet være SEO-vennlig, dvs. synlig og tilgjengelig.
Hvordan Google behandler JavaScript-innhold på en side
Her er trinnene som Googlebot følger for å behandle JavaScript:
- Henter en URL fra gjennomsøkingskøen via HTTP-forespørselen
- Sjekker robots.txt-filen for nettadresser som nettstedet ikke tillater gjennomsøking
- Hopper over de «ikke tillatte» nettadressene, analyserer svaret for andre nettadresser og legger dem til i gjennomsøkingskøen
- Setter sidene i kø for gjengivelse, bortsett fra de som er merket for å ikke indekseres
- Chromium gjengir siden, kjører JavaScript og indekserer siden
- Parser den gjengitte HTML-en på nytt for koblinger
- Setter nettadressene i kø for gjennomsøking
Når indekserer ikke Google JavaScript-innhold?
Google kan indeksere JavaScript når det implementeres riktig. For eksempel, hvis noen av JS- og CSS-filene dine er skjult, kan det hende at Google ikke kan gjennomsøke nettstedet på riktig måte. Tilsvarende, hvis du har koblinger i den rå HTML-koden som ikke finnes i den gjengitte HTML-en, kan Google hoppe over disse koblingene fra å bli gjennomsøkt eller indeksert.
Dessuten, hvis JavaScript ikke er direkte innebygd i HTML-en, må Google laste ned filen for kjøring. Videre kan søkemotorer ha en bufret versjon av en nettside (for bedre ytelse), og JavaScript på siden er kanskje ikke synkronisert med den.
Siden hver bit av JavaScript-kode bør leses, kan overbruk av JavaScript redusere sidehastigheten eller forårsake tidsavbruddsfeil.
Hvorfor er JavaScript SEO viktig?
JavaScript SEO er viktig fordi det påvirker mange elementer på siden og rangeringsfaktorer som Google (eller søkemotorer) skanner for SEO:
Element på siden
Potensielt SEO-problem
Mulig SEO-løsning
Gjengitt innhold
Søkemotorer (som Google) kan ikke gjengi siden din hvis ressursene er blokkert i nettstedets robots.txt-fil. Google kan heller ikke indeksere eller gjengi JS- og CSS-filer, som er blokkert eller skjult.
Reduser JavaScript på kjerneinnholdet på siden, følg alternative tilnærminger til gjengivelse på klientsiden, som gjengivelse på serversiden, dynamisk gjengivelse, hybrid gjengivelse (kombinasjon av klientside og serverside)
Linker
Hvis noen lenker er interne eller JavaScript genererer koblingene til en URL når brukeren klikker på den, kan ikke Google oppdage slike koblinger.
Bruk ankerlenker med href-attributtet, beskrivende ankertekster for koblingene. Pseudo-lenker som
Metadata
Med mindre nettstedet bruker Node.js-pakker som vue-meta, kan søkemotorer gjennomsøke det samme, eller enda verre, ingen metadata for hver visning eller side.
Bruk Node.js-pakker som react-helmet, vue-meta, react-meta-tags
Lazy-lastede bilder
Søkemotorsøkeprogrammet velger ikke noe innhold som er merket for lat innlasting. Søkemotoren kan ikke rulle etter innhold, og noe av innholdet kan derfor aldri gjengis.
Bruk IntersectionObserver API, som forstår synligheten og plasseringen av DOM-elementer når de er tilgjengelige. Du kan også bruke den innfødte lazy-loading-funksjonen i nettleseren (Chrome).
Sideinnlastingstider
En side med mye JavaScript-innhold kan lastes tregt, noe som kan påvirke søkerangeringen.
Legg til kritisk JS-kode inline og utsett ikke-kritisk JS-kode til hovedinnholdet er gjengitt, noe som reduserer den totale JS-koden.
Beste praksis for JavaScript SEO
Ved å følge noen av de beste fremgangsmåtene kan vi få søkemotorer til å gjennomsøke og gjengi sidene bedre:
Legg til lenker og bilder i henhold til definerte nettstandarder
Legg til alle koblingene ved å bruke ahreftag i stedet for onclick, #pageurl eller window.location.href=’/page-url. Google kan enkelt gjennomsøke koblingene og følge dem.
<a href=”http://tipsbilk.net.com”>Welcome to Geek world</a>
På samme måte, legg til bilder ved å bruke img src-taggen og ikke img data-src-taggen:
<img src=”myimg.png” />
Foretrekker gjengivelse på serversiden
Sørg for at innholdet på nettstedet ditt er tilgjengelig på serveren bortsett fra brukernettleseren.
Sørg for at den gjengitte HTML-en har alt viktig innhold du vil vise
Den gjengitte HTML-en skal ha riktig tittel, metaroboter, metabeskrivelser, bilder, strukturerte data og kanoniske tagger.
Gjør ditt JavaScript-nettsted SEO-vennlig
For å teste implementeringen av JavaScript SEO på nettsiden din, kan du følge trinnene nedenfor:
- Vet hvor mye JavaScript nettstedet ditt bruker: For dette kan du ganske enkelt deaktivere JavaScript i nettleseren din. Hvis du ikke ser mye innhold, betyr det at nettstedet ditt i stor grad er avhengig av JavaScript.
- Sjekk om Googlebot får alt viktig innhold og tagger: Du kan bruke Google mobilvennlig testverktøy eller testverktøyet for rike resultater for å sjekke hvordan Googlebot bruker rå HTML for å gjengi innhold.
- Du kan også bruke chrome-utvidelser som Vis gjengitt kilde for å forstå hvordan JavaScript endrer siden og sammenligner HTML-kilden og den gjengitte.
- Du kan se etter de viktige kodene (tittel, metabeskrivelse osv.) på den gjengitte HTML-en ved å bruke SEO Pro Chrome-utvidelse.
Konklusjon
I denne artikkelen lærte vi om hvordan JavaScript kan gjøre SEO-håndtering litt komplisert og tilnærmingene for å løse potensielle problemer forårsaket av å legge til mye JavaScript i koden din.
Vi så også noen beste fremgangsmåter og verktøy for å gjøre ditt JavaScript-nettsted SEO-vennlig. Andre flotte verktøy som hjelper Google med å gjenkjenne og gjennomsøke det dynamiske innholdet ditt er Prerender, AngularJSog Huckabuy.
Du kan også sjekke noen av de beste måtene å redusere lastetiden på nettstedet.
Likte du å lese artikkelen? Hva med å dele med verden?