De best practices voor SEO bij een headless CMS

Wat is een Headless CMS?

Een headless CMS is een content management systeem dat enkel bestaat uit een back-end. In deze back-end beheer je de inhoud van je website (het lichaam). De front-end, wat je ziet als gebruiker (het hoofd), is dus losgekoppeld.

Dit wijkt af van een traditioneel CMS, waar de back-end en front-end gekoppeld zijn. Denk hier bijvoorbeeld aan WordPress, Shopify en Drupal. Bij een headless CMS wordt de content vanaf de back-end middels een API uitgeserveerd op verschillende platformen, zoals de website en Android & iOS apps.

Headless CMS vs traditioneel CMS

We duiken er nog wat dieper in. Hieronder zie je een visuele weergave van de twee typen systemen. Hier zie je duidelijk het verschil dat front-end en back-end bij een traditioneel CMS gekoppeld zijn en bij een headless CMS los staan. Verder is te zien dat alle verschillende platforms bij een headless CMS een eigen front-end hebben. Bij een traditioneel CMS is er één responsive front-end voor tablet, desktop en mobiele schermen.

Wat voor voordeel heeft het lostrekken van de front-end en back-end?

Het grootste voordeel van een headless CMS is dat je veel meer flexibiliteit hebt als het gaat om visualisatie van de front-end. Waar een traditioneel CMS werkt met een thema dat een bepaalde presentatie laag heeft waar je niet van kunt afwijken, biedt een headless CMS alle ruimte voor flexibiliteit en creativiteit van design. Oftewel, je bent volledig vrij in het maken van de front-end van je websites zonder gelimiteerd te worden door het CMS.

Een ander groot voordeel is dat het mogelijk is om vanaf één centraal punt middels een API content te plaatsen op meerdere platformen.

Single Page Applications (SPA’s)

Uiteraard heeft het lichaam (back-end) ook een hoofd (front-end) nodig om goed te kunnen functioneren. Het hoofd van een headless CMS komt vaak in de vorm van een Single Page Application (SPA).

Een SPA is een website of webapplicatie die een snelle gebruikerservaring biedt doordat het in de webbrowser werkt en hierdoor niet webpagina’s hoeft te herladen. Bekende Single Page Applications zijn onder andere Netflix, Facebook, maar ook het platform van onze klant TalentZ.

De grootste voordelen van SPA’s zijn:

• Snelle gebruikerservaring voor bezoekers van de website;

• Development kan gemakkelijk de SPA’s aanpassen, repareren en updaten;

• SPA’s zijn gemakkelijk te dupliceren en kunnen dus worden hergebruikt.

SPA’s draaien op Javascript frameworks. Enkele veelgebruikte JavaScript frameworks zijn Angular en React.

Headless CMS & SEO

Je voelt hem waarschijnlijk al aankomen, maar er zit wel een addertje onder het gras. Zo gaan er bij het horen van de termen ‘Single Page Application’ en ‘JavaScript framework’ aardig wat red flags omhoog bij SEO specialisten. SPA’s draaien op JavaScript frameworks en deze kunnen niet in alle gevallen volledig begrepen – en daarmee geïndexeerd en gerankt – worden door zoekmachines als Google.

Daarnaast zijn er bij een headless CMS geen standaard SEO-functionaliteiten ingebouwd, wat vaak wel het geval is bij een traditioneel CMS. Deze functionaliteiten zijn essentieel om goed te ranken in de zoekresultaten. Denk bij deze functionaliteiten bijvoorbeeld aan: page titles, meta descriptions en canonical tags.

Is een Headless CMS dan niet geschikt voor SEO?

Niet per se, maar bij de ontwikkeling dient er wel rekening gehouden te worden met SEO voor optimale resultaten. Zo dienen er meerdere SEO-functionaliteiten ingebouwd worden bij de ontwikkeling en moet er gezorgd worden dat zoekmachines als Google de content goed kan begrijpen.

De voordelen van een headless CMS voor SEO zijn ook zeker aanwezig. Zo hebben de SPA’s doorgaans een snelle laadtijd en zien ze er gelikt uit. Dit biedt een fijne gebruikservaring wat weer positief is voor je organische rankings.

Headless CMS SEO best practices

Kies je voor een headless CMS en wil je organisch goed scoren? Lees dan deze best practices om in ieder geval de grootste valkuilen te vermijden.

1. Maak gebruik van Server Side Rendering (SSR)

Single Page Applications kampen vaak met het probleem dat er geen HTML/content beschikbaar is tijdens het renderen van de website. Dit kan leiden tot onder meer indexatie problemen voor zoekmachines als Google. Server Side Rendering is hier een oplossing voor en raden we dan ook aan om altijd te implementeren.

2. Meta data

Meta data zijn SEO-functionaliteiten die meestal niet standaard ingebouwd zijn maar wel erg belangrijk zijn. Zorg er voor dat deze meta data te allen tijden aangepast kunnen worden. Onder meta data verstaan wij onder andere:

Title tags;

• Meta descriptions;

• Canonictal tags;

• HREFLANG tags.

3. Zorg voor SEO vriendelijke URL’s

De mogelijkheid om zoekmachine vriendelijke URL’s te maken is erg fijn. Een voorbeeld van een SEO vriendelijke URL:

https://www.voorbeeld.nl/diensten/zoekmachine-optimalisatie

Een voorbeeld van een niet-SEO vriendelijke URL:

https://www.voorbeeld.nl/diensten/139-1/zoekoptimalisatie=1

4. Juiste statuscodes bij error pagina’s

De juiste statuscode van de pagina moet worden gegeven als er een error optreedt. Bijvoorbeeld een 404 of 500 statuscode.

5. Interne links

Zorg dat alle interne links worden ingesloten met de link <a>-tags in de broncode, in tegenstelling tot JavaScript onclick-events.

6. XML-sitemaps

Zorg ervoor dat het mogelijk is om een XML-sitemap te genereren en om deze te updaten.

7. Schema markup

Implementeer schema markup voor structured data mogelijkheden.

8. Redirect mogelijkheden

Mogelijkheid tot het implementeren van redirects (301,302,307).

9. Breadcrumbs

Voor zowel SEO als UX is het aan te raden om breadcrumbs site-wide te implementeren. Zorg dat deze implementatie beschikbaar is.

Naast deze best practices zijn er uiteraard nog een flink aantal andere zaken die van belang zijn. Mocht je hier geïnteresseerd in zijn, neem dan contact met ons op.

Conclusie

Een headless CMS biedt zeker voordelen, zoals de mogelijkheid tot het publiceren van content voor meerdere platformen en de flexibiliteit van de front-end. Ook heeft het een goede gebruikerservaring door de snelheid en het gelikte design.

Het is wel zaak om SEO-best practices mee te nemen in de ontwikkeling. Zonder deze best practices op het gebied van JavaScript SEO en SEO-functionaliteiten zal het namelijk knap lastig worden om goed te scoren in zoekresultaten.

Plannen om te migreren naar een headless CMS of maak je hier al gebruik van en wil je verder groeien? Neem dan contact met ons op zodat je op het gebied van SEO niets over het hoofd ziet.