Maak uw JavaScript-website SEO-vriendelijk met deze oplossingen

De meeste moderne websites bevatten JavaScript, waardoor ze dynamisch en interactief zijn. Hoewel bots van zoekmachines behoorlijk intelligent zijn, kunnen ze nog steeds niet veel van de JavaScript-inhoud weergeven, wat van invloed is op de paginarangschikking.

De JavaScript-inhoud hangt sterk af van hoe uw website de code weergeeft.

Bij server-side rendering bevat de server bijvoorbeeld de inhoud van de website. Op verzoek ontvangt de browser de volledig gerenderde HTML.

Bij client-side rendering wordt het JavaScript echter door de browser weergegeven met behulp van DOM.

De derde optie voor weergave is dynamische weergave, waarbij inhoud die aan de clientzijde wordt weergegeven naar de browser gaat, terwijl de inhoud die aan de serverzijde wordt weergegeven naar de zoekmachine(s) gaat.

De weergavetechnieken beïnvloeden hoe JS wordt weergegeven en daarmee de paginarangschikking.

Om ervoor te zorgen dat al uw website JS-code wordt weergegeven, moet u de juiste JavaScript SEO-praktijken volgen. Maar laten we eerst begrijpen wat JavaScript SEO is.

Wat is JavaScript-SEO?

JavaScript SEO maakt het gemakkelijk voor zoekmachines om JavaScript-code (dynamische inhoud) van een website (of webpagina) te crawlen en te indexeren. Google of een andere zoekmachine verwerkt JavaScript in drie fasen, namelijk crawl, render en index. Om dit allemaal te kunnen doen, moet de JavaScript-inhoud SEO-vriendelijk zijn, dat wil zeggen, zichtbaar en beschikbaar.

Hoe Google JavaScript-inhoud op een pagina verwerkt

Dit zijn de stappen die Googlebot volgt om JavaScript te verwerken:

  • Haalt een URL op uit de crawlwachtrij via het HTTP-verzoek
  • Controleert het robots.txt-bestand op URL’s die door de site niet mogen worden gecrawld
  • Slaat de ‘niet-toegestane’ URL’s over, parseert het antwoord voor andere URL’s en voegt ze toe aan de crawlwachtrij
  • Zet de pagina’s in de wachtrij voor weergave, behalve de pagina’s die zijn gemarkeerd als niet-geïndexeerd
  • Chromium geeft de pagina weer, voert het JavaScript uit en indexeert de pagina
  • Parseert de gerenderde HTML opnieuw voor links
  • Zet de URL’s in de wachtrij voor crawlen
  11 beste storyboard-tools [With Free Templates]

Wanneer indexeert Google JavaScript-inhoud niet?

Google kan JavaScript indexeren als het correct is geïmplementeerd. Als sommige van uw JS- en CSS-bestanden bijvoorbeeld verborgen zijn, kan Google de website mogelijk niet correct crawlen. Evenzo, als u links in de onbewerkte HTML heeft die niet aanwezig zijn in de weergegeven HTML, kan Google deze links overslaan om te worden gecrawld of geïndexeerd.

Als JavaScript niet rechtstreeks in de HTML is ingesloten, moet Google het bestand downloaden voor uitvoering. Verder kunnen zoekmachines een gecachte versie van een webpagina hebben (voor betere prestaties) en is het JavaScript op de pagina mogelijk niet gesynchroniseerd.

Aangezien elk stukje JavaScript-code moet worden gelezen, kan overmatig gebruik van JavaScript de paginasnelheid vertragen of time-outfouten veroorzaken.

Waarom is JavaScript SEO belangrijk?

JavaScript-SEO is belangrijk omdat het veel elementen op de pagina en rangschikkingsfactoren beïnvloedt die Google (of zoekmachines) op SEO scannen:

Element op de pagina
Potentieel SEO-probleem
Mogelijke SEO-oplossing
Weergegeven inhoud
Zoekmachines (zoals Google) kunnen uw pagina niet weergeven als de bronnen ervan zijn geblokkeerd in het robots.txt-bestand van uw site. Google kan ook geen JS- en CSS-bestanden indexeren of weergeven, die zijn geblokkeerd of verborgen.
Verminder JavaScript op de kerninhoud van de pagina volg alternatieve benaderingen voor client-side rendering, zoals server-side rendering, dynamische rendering, hybride rendering (combinatie van client-side en server-side)
Links
Als sommige links intern zijn of JavaScript de links naar een URL genereert wanneer de gebruiker erop klikt, kan Google dergelijke links niet ontdekken.
Gebruik ankerlinks met het href attribuut, beschrijvende ankerteksten voor de links. Pseudo-links zoals

en tags worden niet gecrawld
Metagegevens
Tenzij de site Node.js-pakketten zoals vue-meta gebruikt, crawlen zoekmachines mogelijk dezelfde of, erger nog, geen metadata voor elke weergave of pagina.
Gebruik Node.js-pakketten zoals react-helm, vue-meta, react-meta-tags
Lazy-loaded afbeeldingen
Zoekmachinecrawler kiest geen inhoud die is gemarkeerd voor lui laden. De zoekmachine kan niet naar inhoud scrollen en daarom wordt sommige inhoud mogelijk nooit weergegeven.
Gebruik de IntersectionObserver API, die de zichtbaarheid en positie van DOM-elementen begrijpt zodra ze beschikbaar zijn. U kunt ook de native lazy-loading-functie van de browser (Chrome) gebruiken.
Laadtijden van pagina’s
Een pagina met veel JavaScript-inhoud kan traag worden geladen, wat van invloed kan zijn op de positie in de zoekresultaten.
Voeg kritieke JS-code inline toe en stel niet-kritieke JS-code uit totdat de hoofdinhoud wordt weergegeven, waardoor de algehele JS-code wordt verminderd.

  Hoe u uw iPhone veilig kunt reinigen met desinfecterende doekjes

Praktische tips voor JavaScript-SEO

Door enkele van de best practices te volgen, kunnen we zoekmachines ertoe brengen de pagina’s beter te crawlen en weer te geven:

Voeg links en afbeeldingen toe volgens gedefinieerde webstandaarden

Voeg alle links toe met de ahreftag in plaats van onclick, #pageurl of window.location.href=’/page-url. Google kan de links gemakkelijk crawlen en volgen.

<a href=”http://epcdream.nl.com”>Welcome to Geek world</a>

Voeg op dezelfde manier afbeeldingen toe met de img src-tag en niet de img data-src-tag:

<img src=”myimg.png” />

Geef de voorkeur aan weergave aan de serverzijde

Zorg ervoor dat de inhoud van uw website beschikbaar is op de server, los van de gebruikersbrowser.

Zorg ervoor dat uw gerenderde HTML alle belangrijke inhoud bevat die u wilt weergeven

De gerenderde HTML moet de juiste titel, metarobots, metabeschrijvingen, afbeeldingen, gestructureerde gegevens en canonieke tags hebben.

  Hoe wifi-wachtwoord te hacken

Uw JavaScript-website SEO-vriendelijk maken

Om de implementatie van JavaScript SEO op uw webpagina te testen, kunt u de onderstaande stappen volgen:

  • Weet hoeveel JavaScript uw ​​website gebruikt: Hiervoor kunt u JavaScript eenvoudig uitschakelen in uw browser. Als u niet veel inhoud ziet, betekent dit dat uw website grotendeels afhankelijk is van JavaScript.
  • Controleer of Googlebot alle belangrijke inhoud en tags krijgt: U kunt de Google mobielvriendelijke testtool of de tool voor het testen van uitgebreide resultaten om te controleren hoe Googlebot de onbewerkte HTML gebruikt om inhoud weer te geven.
  • U kunt ook Chrome-extensies gebruiken zoals Weergegeven bron weergeven om te begrijpen hoe JavaScript de pagina verandert en de bron-HTML en de weergegeven HTML vergelijkt.
  • U kunt controleren op belangrijke tags (titel, metabeschrijving, enz.) op de weergegeven HTML met behulp van de SEO Pro Chrome-extensie.

Conclusie

In dit artikel hebben we geleerd hoe JavaScript de SEO-afhandeling een beetje ingewikkeld kan maken en de benaderingen om de mogelijke problemen op te lossen die worden veroorzaakt door veel JavaScript aan uw code toe te voegen.

We hebben ook enkele best practices en tools gezien om uw JavaScript-website SEO-vriendelijk te maken. Andere geweldige tools die Google helpen uw dynamische inhoud te herkennen en te crawlen, zijn Prerender, AngularJSen Huckabuy.

U kunt ook enkele van de beste manieren bekijken om de laadtijd van websites te verkorten.

Met plezier het artikel gelezen? Wat dacht je van delen met de wereld?

gerelateerde berichten