De fleste moderne hjemmesider indeholder JavaScript, hvilket gør dem dynamiske og interaktive. Selvom søgemaskinebots er ret intelligente, gengiver de muligvis ikke meget af JavaScript-indholdet, hvilket påvirker sideplaceringen.
JavaScript-indholdet afhænger meget af, hvordan dit websted gengiver koden.
For eksempel, i server-side rendering, indeholder serveren webstedets indhold. Efter anmodning modtager browseren den fuldt gengivne HTML.
Ved gengivelse på klientsiden gengives JavaScript imidlertid af browseren ved hjælp af DOM.
Den tredje mulighed for gengivelse er dynamisk gengivelse, hvor indhold gengivet på klientsiden går til browseren, hvorimod indholdet gengivet på serversiden går til søgemaskinerne.
Gengivelsesteknikkerne påvirker, hvordan JS gengives og dermed sideplaceringen.
For at sikre, at al din hjemmesides JS-kode gengives, bør du følge korrekt JavaScript SEO-praksis. Men lad os først forstå, hvad JavaScript SEO er.
Indholdsfortegnelse
Hvad er JavaScript SEO?
JavaScript SEO gør det nemt for søgemaskiner at crawle og indeksere JavaScript-kode (dynamisk indhold) på et websted (eller en webside). Google eller enhver anden søgemaskine behandler JavaScript i tre trin, dvs. crawl, gengivelse og indeksering. For at Google kan gøre alt dette, skal JavaScript-indholdet være SEO-venligt, dvs. synligt og tilgængeligt.
Hvordan Google behandler JavaScript-indhold på en side
Her er de trin, som Googlebot følger for at behandle JavaScript:
- Henter en URL fra gennemgangskøen via HTTP-anmodningen
- Kontrollerer robots.txt-filen for webadresser, som webstedet ikke tillader at crawle
- Springer de “ikke tilladte” URL’er over, analyserer svaret for andre URL’er og føjer dem til crawl-køen
- Sætter siderne i kø til gengivelse, undtagen dem, der er markeret til ikke at være indekseret
- Chromium gengiver siden, udfører JavaScript og indekserer siden
- Parser den gengivne HTML igen for links
- Sætter webadresserne i kø til gennemgang
Hvornår indekserer Google ikke JavaScript-indhold?
Google kan indeksere JavaScript, når det implementeres korrekt. For eksempel, hvis nogle af dine JS- og CSS-filer er skjulte, kan Google muligvis ikke crawle webstedet korrekt. Tilsvarende, hvis du har links i den rå HTML, som ikke er til stede i den gengivede HTML, kan Google springe disse links over fra at blive crawlet eller indekseret.
Hvis JavaScript ikke er direkte indlejret i HTML, skal Google downloade filen til udførelse. Yderligere kan søgemaskiner have en cachet version af en webside (for bedre ydeevne), og JavaScript på siden er muligvis ikke synkroniseret med den.
Da hver bit JavaScript-kode skal læses, kan overforbrug af JavaScript sænke sidehastigheden eller forårsage timeoutfejl.
Hvorfor er JavaScript SEO vigtigt?
JavaScript SEO er vigtigt, fordi det påvirker mange on-page-elementer og rangeringsfaktorer, som Google (eller søgemaskiner) scanner for SEO:
On-page element
Potentielt SEO-problem
Mulig SEO-løsning
Gengivet indhold
Søgemaskiner (som Google) kan ikke gengive din side, hvis dens ressourcer er blokeret i dit websteds robots.txt-fil. Google kan heller ikke indeksere eller gengive JS- og CSS-filer, som er blokeret eller skjult.
Reducer JavaScript på kerneindholdet på siden, følg alternative tilgange til gengivelse på klientsiden, som gengivelse på serversiden, dynamisk gengivelse, hybrid gengivelse (kombination af klientside og serverside)
Links
Hvis nogle links er interne, eller JavaScript genererer links til en URL, når brugeren klikker på den, kan Google ikke opdage sådanne links.
Brug ankerlinks med href-attributten, beskrivende ankertekster til linkene. Pseudo-links som
Metadata
Medmindre webstedet bruger Node.js-pakker som vue-meta, gennemgår søgemaskinerne muligvis det samme eller endnu værre, ingen metadata for hver visning eller side.
Brug Node.js-pakker som react-helmet, vue-meta, react-meta-tags
Lazy-loadede billeder
Søgemaskinecrawleren vælger ikke noget indhold, der er markeret til doven indlæsning. Søgemaskinen kan ikke rulle efter indhold, og derfor kan noget indhold aldrig gengives.
Brug IntersectionObserver API, som forstår synligheden og positionen af DOM-elementer, når de er tilgængelige. Du kan også bruge browserens native lazy-loading-funktion (Chrome).
Sideindlæsningstider
En side med meget JavaScript-indhold kan indlæses langsomt, hvilket kan påvirke dens søgerangering.
Tilføj kritisk JS-kode inline, og udsæt ikke-kritisk JS-kode, indtil hovedindholdet er gengivet, hvilket reducerer den overordnede JS-kode.
Bedste praksis for JavaScript SEO
Ved at følge nogle af de bedste fremgangsmåder kan vi få søgemaskinerne til at crawle og gengive siderne bedre:
Tilføj links og billeder i henhold til definerede webstandarder
Tilføj alle links ved at bruge ahreftag i stedet for onclick, #pageurl eller window.location.href=’/page-url. Google kan nemt crawle linkene og følge dem.
<a href=”http://toadmin.dk.com”>Welcome to Geek world</a>
På samme måde kan du tilføje billeder ved hjælp af img src-tagget og ikke img data-src-tagget:
<img src=”myimg.png” />
Foretrækker gengivelse på serversiden
Sørg for, at dit webstedsindhold er tilgængeligt på serveren bortset fra brugerbrowseren.
Sørg for, at din gengivne HTML har alt det vigtige indhold, du ønsker at vise
Den gengivede HTML skal have den korrekte titel, metarobotter, metabeskrivelser, billeder, strukturerede data og kanoniske tags.
Gør din JavaScript-hjemmeside SEO-venlig
For at teste implementeringen af JavaScript SEO på din webside kan du følge nedenstående trin:
- Ved, hvor meget JavaScript din hjemmeside bruger: Til dette kan du blot deaktivere JavaScript i din browser. Hvis du ikke ser meget indhold, betyder det, at din hjemmeside i høj grad er afhængig af JavaScript.
- Tjek, om Googlebot får alt det vigtige indhold og tags: Du kan bruge Google mobilvenligt testværktøj eller testværktøjet til udvidede resultater for at kontrollere, hvordan Googlebot bruger den rå HTML til at gengive indhold.
- Du kan også bruge chrome-udvidelser som f.eks Se den gengivne kilde at forstå, hvordan JavaScript ændrer siden og sammenligner kilde-HTML’en og den gengivne.
- Du kan tjekke efter de vigtige tags (titel, metabeskrivelse osv.) på den gengivede HTML ved hjælp af SEO Pro Chrome-udvidelse.
Konklusion
I denne artikel lærte vi om, hvordan JavaScript kan gøre SEO-håndtering en smule kompleks, og tilgangene til at løse de potentielle problemer forårsaget af at tilføje en masse JavaScript til din kode.
Vi så også nogle bedste praksisser og værktøjer til at gøre dit JavaScript-websted SEO-venligt. Andre fantastiske værktøjer, der hjælper Google med at genkende og crawle dit dynamiske indhold, er Prerender, AngularJSog Huckabuy.
Du kan også tjekke nogle af de bedste måder at reducere hjemmesidens indlæsningstid.
Nydt at læse artiklen? Hvad med at dele med verden?