Blog

Terug

SEO in de JAMstack-wereld

hoofdafbeelding van het artikel
  • SEO
  • Development
Leestijd 0 min

Wat hebben een website, blog en E-commercewinkel gemeen? Ze moeten allemaal worden gevonden via een zoekmachine, het liefst door zoveel mogelijk mensen. Zoekmachine optimalisatie (SEO) kan daarom bepalend zijn voor het succes en de opbrengst van jouw website.

In dit artikel zal ik de basisprincipes van SEO doornemen met best practices en laat ik zien welke voordelen de JAMstack-ontwikkelmethode biedt op dit terrein.

Wat verstaan we onder SEO?

SEO is een nogal breed begrip. Er zijn heel veel factoren die de vindbaarheid van je website kunnen beïnvloeden. Je kan SEO grofweg in drie pijlers opdelen:

On-page: Dit betreft alle zaken die in de webpagina's voorkomen. De inhoud (content) is uiteraard het belangrijkst, maar ook de UX (user experience) doet er toe. De inhoud kan nog zo goed zijn, als het heel slecht benaderbaar is dan bereik je alsnog je doelgroep niet. Denk hierbij aan te kleine tekst, onnodig lange formulieren, onduidelijke structuur etc. Verder zijn keywords belangrijk (wat zoeken mensen en waarom zoeken ze het) en goede meta-tags.

Off-page: Dit betreft alle zaken die van buiten af de vindbaarheid van je website bevorderen, zoals delen op social media, autoriteit, link building (links naar jouw website vanaf andere sites) en verwijzingen naar jouw website.

Technisch: Dit betreft alle technische zaken zoals snelheid, beveiliging, sitemap en broken links.

In dit artikel wordt aandacht besteed aan on-page en technische aspecten die de vindbaarheid verbeteren.

SEO is niet een eenmalige handeling, maar een proces van constant bijschaven en verbeteren. Het is een marathon, geen sprint.

Best practices voor het verbeteren van de vindbaarheid

Tijdens en na de bouw van een website zijn er een flink aantal stappen die je kan nemen om de vindbaarheid van je website te verbeteren en optimaliseren. Hier volgt een opsomming van de belangrijkste onderdelen:

Beveiliging met HTTPS

Dit onderdeel is makkelijk te realiseren. Als je HTTPS nog niet hebt ingeschakeld, doe dat dan meteen. Veel hosting providers bieden dit gratis aan en Google beschouwd dit als een ranking factor. En daarnaast is het gewoon een goed hulpmiddel om je website te beveiligen en heeft het een positief effect op de betrouwbaarheid.

Mobile friendliness

Dit onderdeel kost iets meer moeite, maar is een must have. Veel bezoekers gebruiken een smartphone of tablet en als je website niet responsive is dan biedt de website een beroerde ervaring op deze apparaten. Mobile friendliness is een ranking factor. Gelukkig is dit makkelijk te testen met deze Google tool.

Een website van Corneel Online is altijd mobile friendly en biedt een hele prettige ervaring op mobiele apparaten.

Core Web Vitals (oftewel: snelheid)

Core Web Vitals is een ranking factor en tevens de term voor een set meetbare factoren voor een gezonde site. Het bestaat uit de volgende onderdelen:

Largest Contentful Paint (LCP): meet de laadprestaties. Om een goede gebruikerservaring te bieden, moet LCP plaatsvinden binnen 2,5 seconden nadat de pagina voor het eerst wordt geladen.

First Input Delay (FID): meet interactiviteit. Om een goede gebruikerservaring te bieden, moeten pagina's een FID van 100 milliseconden of minder hebben.

Cumulative Layout Shift (CLS): meet visuele stabiliteit. Om een goede gebruikerservaring te bieden, moeten pagina's een CLS van 0,1 hebben. of minder.

Uitgebreide informatie over dit onderwerp is hier te vinden: https://web.dev/vitals/.

Het voordeel van een JAMstack website is dat deze heel goed scoren op dit onderdeel. Pagina's laden bijna instant en hebben geen last van vertragingen en verspringende layouts. Met tools zoals Lighthouse kan je zichtbaar maken hoe snel de website is en waar er nog optimalisatie mogelijk is.

Text compression

Text compression heeft een positieve invloed op de snelheid van de website en is daarom erg belangrijk. Dit onderdeel wordt vaak automatisch verzorgd door de tools die gebruikt worden bij de bouw of door het hosting platform. Zo maakt Nuxt (mijn favoriete gereedschap) gebruik van GZIP en Netlify (mijn voorkeurs JAMstack hosting) van Brotli, beide tools waarmee de website automatisch wordt gecomprimeerd.

Broken links en redirects

Broken links zijn links die niet (meer) bestaan en moeten vermeden worden. Controleer altijd of een uitgaande link werkt. Als de structuur van de eigen website is veranderd, stel dan redirects in, zodat links van buitenaf op de juiste plek terecht komen. Bij Netlify kan je heel eenvoudig redirects instellen door een tekstbestand te plaatsen in de root van het project. Stel dat de URL structuur veranderd is op je website, dan kan je de oude URL naar de nieuwe versie doorsturen.

/nieuws/mijn-oude-titel /blog/mijn-nieuwe-titel 301

Canonical links

Voor elke pagina in de site moet een canonical link worden ingesteld. Een canonical link vertegenwoordigt de gewenste link / versie van de pagina. Vaak kan een pagina op verschillende manieren worden opgevraagd (vooral bij e-commerce sites komt dit voor) en de zoekmachine indexeert al deze varianten, met als gevolg duplicate content.

Voorbeeld:

https://example.com
https://example.com/
https://example.com/?foo
https://example.com/#ab

Met een canonical link maak je aan de zoekmachine duidelijk dat het een en dezelfde pagina betreft. Ook kan je afdwingen dat alle canonical links eindigen met een trailing slash (/). De canonical link in bovenstaand voorbeeld wordt dan:

https://example.com/

Sitemap

Maak een sitemap.xml voor alle relevante URLs. Dit kan over het algemeen worden geautomatiseerd. Bij een grote hoeveelheid pagina's (>10k) wordt aangeraden om op te splitsen in meerdere sitemaps.

Voor Nuxt is er een plugin beschikbaar waarmee de sitemap automatisch wordt gegenereerd.

Optimaliseer assets

Onder assets worden alle onderdelen verstaan die in een pagina kunnen worden ingeladen, zoals afbeeldingen en JavaScript-bestanden. Enkele optimalisaties die kunnen worden toegepast zijn:

Gebruik responsive images met de <picture> tag

  • let op het formaat en de afmetingen
  • verwijder metadata uit afbeeldingen en comprimeer voor web
  • pas lazy loading toe

JS met code-splitting
Cache alle statische assets
Gebruik beschrijvende namen voor afbeeldingen (helpt echt!)

Paginastructuur

Biedt een logische en hiërarchische structuur in de website. Probeer daarbij de pagina's niet te diep (meer dan 3 klikken) te nesten.

URL structuur

Gebruik korte en beschrijvende URLs. Gebruik keywords in de URL. Koppel woorden met een koppelteken, niet met een underscore. Kies tussen www of niet-www.

Semantische HTML

Gebruik semantische HTML, oftewel tags die betekenis hebben en de inhoud van het element beschrijven.

  • juiste tags voor het juiste element
  • gebruik nav, footer, main, section waar het kan
  • gebruik headings op een goede manier en in hiërarchie

Alt Tags voor afbeeldingen

Zorg ervoor dat alle afbeeldingen een alt tag hebben met daarin een beschrijving van de afbeelding. Gebruik de alt tag niet voor keywords.

Meta tags

Vind de ideale titel en meta-beschrijving voor elke pagina. Dit is zichtbaar in het zoekresultaat. Het gebruik van OG-tags helpt om een goede preview van de link te geven, zoals je vaak ziet bij het delen op social media.

De meta-title is bij voorkeur 50 tot 60 tekens lang en bevat het eerste en tweede keyword. De meta-description is bij voorkeur 150 tot 160 tekens lang en maakt reclame voor de inhoud van de pagina.

In het headless CMS worden op elke pagina SEO-velden beschikbaar gesteld waarmee de titel en omschrijving kunnen worden ingevuld. In het CMS van deze website ziet dat er zo uit:

Het zoekresultaat op Google ziet er dan zo uit:

Wat te doen na alle optimalisaties?

Okee, alle optimalisaties zijn gedaan. En wat nu?

In de eerste plaats kan je de resultaten analyseren met Google Search Console. Eventuele aanpassingen kan je hier opnieuw aanmelden voor snellere updates. En tot slot: heb geduld. SEO aanpassingen hebben tijd nodig.

Verder optimaliseren?

Dit artikel legt vooral nadruk op de technische kant van SEO, maar het kan zo zijn dat je hulp kan gebruiken bij het analyseren van teksten en keywords en het schrijven van teksten die goed converteren. In dat geval werkt Corneel Online samen met partners die je daarbij op weg kunnen helpen.

Conclusie

In principe kan iedere website geoptimaliseerd worden, maar JAMstack websites hebben het voordeel dat ze erg snel en reactief zijn, waardoor ze op dit punt (Core Web Vitals) hoog scoren en een voordeel hebben ten opzichte van websites die met een traditioneel CMS zijn gebouwd.

SEO is niet een eenmalige handeling, maar een proces van constant bijschaven en verbeteren. Het is een marathon, geen sprint.

SEO verbeteren met JAMstack?

Wil jij ook gebruik maken van de voordelen die JAMstack biedt voor het verbeteren van je SEO? Of wil je gewoon een razendsnelle website?

Neem contact op

Wat houdt je bezig?

Heb jij een interessant project?
En wil je erover praten?

Of je nou een starter bent of een doorgewinterd bedrijf, ik hoor het graag als je een leuke uitdaging voor me hebt.

Marco Verheul
T. 06 2846 1106
E. marco@corneelonline.nl