Angular SEO: hoe begin je eraan?

angular-seo-thumbnail
Bert Bossier

Geschreven door Bert

9 augustus 2020

Onmiddellijk zien hoe je start met Angular SEO? Klik hier!

1) Wat is Angular?

Angular is een Javascript front-end framework die werd ontwikkeld om SPA’s (Single Page Applications) te ontwikkelen. Zo’n front-end framework maakt het makkelijker voor ontwikkelaars om zo’n app te ontwikkelen. Dankzij een specifieke aanpak wordt een specifieke pagina geladen die alles aankan.

angular-intro-baltius

In 2010 werd Angular ontwikkeld door een team binnen Google (wat tot op heden nog steeds zo is). Die eerste versie ging voort onder de benaming Angular JS. Vanaf de tweede versie werd het framework herschreven, dit ging ook voort met een nieuwe naam: Angular. Zoals andere frameworks werkt Angular met verschillende componenten (bv. een navigatiebalk, een zijbalk, widgets…). Deze widgets beschikken elk over hun eigen stukje HTML en data die de inhoud van deze widgets weergeeft. Deze data werkt overigens heel goed samen met elkaar tussen verschillende widgets, een van de redenen waarom zoveel ontwikkelaars Angular gebruiken.

Een tweede eigenschap aan Angular is dat het client-side rendering gebruikt in plaats van server side rendering. Dat betekent dat wanneer je een website hebt en je navigeert naar een pagina, die het resultaat onmiddellijk zal versturen naar de gebruiker (client).

 

1.2 ) Enkele grote Angular websites:

  • NBA
  • NFL
  • Tesco
  • Paypal
  • Lego
  • Google

 

2) Wat is dan het verschil met React?

Net zoals Angular is React een veelgebruikt framework. Beiden zijn echter geschikt om een goed functionerende website te maken. Een van de voordelen van Angular ten opzichte van React is dat het zeer compatibel is met TypeScript, een veelgebruikte JavaScript extensie die ontwikkelaars helpt snel en efficiënt errors in je code op te sporen. Uiteraard zijn er ook ontwikkelaars die Typescript liever niet gebruiken. Wanneer dat het geval is, kies je beter voor React of een ander framework.

typescript-javascript-seo

Daarnaast biedt Angular haar gebruikers een complete toolkit, gaande van routing tot HTTP. Bij React wordt gebruikt gemaakt van een virtuele DOM (Document Object Model). Zo’n DOM is de weergavepresentatie van alle code. Het vertaalt HTML naar wat we zien op een webpagina. Je ziet een DOM in werking wanneer je een website inspecteert in Google Chrome.

Om nu terug te komen op de virtuele DOM bij React. Wanneer je React gebruikt maakt het framework twee snapshots van je DOM. Een statische, die dus continu hetzelfde blifjt, en een snapshot met de wijzigingen. Hierbij vergelijkt het de twee snapshots waardoor de code enkel wordt gewijzigd bij de verschillen die worden opgemerkt. Dit is veel efficiënter dan het gehele HTML document te herschrijven. Het voordeel? Een snellere website!

In tegenstelling tot Angular, dien je zelf op zoek te gaan naar aanvullende bibliotheken (libraries) om je routing etc. aan te passen. Door het grote assortiment dien je hier echter wel op te letten met welke libraries je wenst te gebruiken in je React framework.

 

1.3) Enkele grote React websites:

  • Facebook
  • Instagram
  • Twitter
  • Airbnb
  • Uber
  • Pinterest

 

1.4) Het overzicht

 

Angular React
Type Framework Library (bibliotheek)
Snelheid ⭐️⭐️⭐️ (grotere bestandsgroottes) ⭐️⭐️⭐️⭐️
Gegevensbinding Two-way data binding One-way data binding
Component architectuur Geïntegreerd Via tools
Updates ⭐️⭐️ (niet mogelijk om versies over te slaan) ⭐️⭐️⭐️⭐️ (mogelijk om sneller oudere versies te updaten)
Schalen ⭐️⭐️⭐️⭐️ (full service, geen third party applicaties vereist) ⭐️⭐️⭐️ (libraries vereist om groot te schalen)
Populariteit 57,6% 74,5%
DOM Fysieke DOM Virtuele DOM

Nu je meer weet over de twee bekendste frameworks, is het tijd om ons te focussen hoe je deze nu optimaliseert voor zoekmachines.

 

3) Starten met Angular SEO

Een Angular website (correct) laten indexeren door een zoekmachine (Google, Bing, Yahoo…) is niet zo eenvoudig. Dat komt omdat een groot deel van de zoekmachines geen Javascript opnemen. Iets wat je kan nabootsen bij crawling programma’s zoals Screaming Frog. Vaak zullen die enkel de pagina vinden die je invoerde. Met andere woorden: JavaScript SEO is dus een hele uitdaging. Google indexeert op basis van gerenderde inhoud. Dit is het proces waarbij HTML wordt omgezet naar leesbare content via JavaScript om uiteindelijk te lezen in de DOM. Met JavaScript zal die HTML er anders uitzien dan de DOM. Om de HTML vanuit een JavaScript correct te lezen moeten zoekmachines die indexeren in twee verschillende golven.

Omdat Angular pas in de tweede golf de ‘interessante’ inhoud toont aan zoekmachines, zal die vaak niet worden geïndexeerd. De oplossing is client side rendering om te zetten naar server side rendering. Dan wordt content reeds geladen in de eerste golf. Zo hoef je niet te wachten op JavaScript rendering. Bovendien brengt het nog een aantal andere cruciale SEO elementen met zich mee. Heb je een website die zelden wijzigt? Kies dan voor pre-rendering. Hier wordt HTML opgebouwd wanneer die wordt opgevraagd door de server (dus een vorm van SSR).

  • Structured data
  • Meta data
  • HTML tags
    • Canonicals
    • Hreflang

Eerder werd reeds aangegeven dat er twee grote versies bestaan van Angular. V1 (Angular JS) en de volgende versies (V2 tot V8 die gewoon Angular heten). Het is pas vanaf de tweede versie dat je website correct geïndeerd zal kunnen worden.

 

3.1) Single Page Application (SPA)

Veelal wordt Angular gebruikt in combinatie met een Single Page Application. Dit maakt het mogelijk om content onmiddellijk door te sturen zonder een tussenstop bij de server (m.a.w. Client Side Rendering). Dit brengt met zich mee dat een pagina vaak niet overeenkomt met de correcte inhoud van de website (door een unieke URL te creëren). Gelukkig is dit snel op te lossen via pushState(). Een stuk code die de URL update wanneer nieuwe inhoud wordt opgevraagd. Om hier beter mee te leren biedt Google een snelcursus aan zodat je SPA’s kunt optimaliseren voor SEO. Controleer tenslotte of je URL-structuur wel matcht met de inhoud van je pagina.

Werk je samen met een webbouwer? Vraag dan ook even na of content dynamisch wordt geladen. Indien dat het geval is dien je ook virtuele pageviews te volgen.

 

3.2) Lazy loading

Veel websites maken gebruik van lazy loading. Dit betekent dat afbeelding en tekst pas na een bepaalde scrollactiviteit in beeld worden gebracht. Deze vorm van laden zorgt dat de website sneller wordt. Het is echter nadelig voor crawlbots omdat ze deze content niet kunnen zien. Dit probleem is op te lossen door een intersection observer aan te maken.

Sommige websites maken gebruik van tabs/accordions om content te laden. Iets wat bots niet standaard kunnen lezen. Activeer hiervoor de CSS visibility.

 

3.3) Let op met CSS

Daarnaast is het in Angular belangrijk om niet te overdrijven met CSS in je afbeeldingen voor styling. Gebruik altijd een src attribuut om correct gevonden te worden door zoekmachines.

 

4) Conclusie

Angular is net zoals React en andere frameworks (bv. Vue) niet zo vanzelfsprekend om search engine optimization te doen wanneer je geen technische achtergrond hebt. Zorg daarom dat je de verschillen weet tussen HTML, DOM zodat communicatie tussen jou als SEO expert en de webbouwer vlot kan verlopen. Een snelcursus Angular blijft natuurlijk de beste optie om Javascript SEO te gaan toepassen op je website.

 

Gerelateerde blogs