Angular & SEO – Angular 6 Single-Page Web Apps Search-Engine Friendly

In de volgende tutorial gaan we kijken naar de meest eenvoudige aanpak die beschikbaar is om van die beperking af te komen voor uw Angular 6 applicatie door gebruik te maken van server-side rendering met Angular Universal.

Om te beginnen, laten we eerst een nieuwe Angular applicatie opzetten in de volgende stappen.

Om een nieuwe Angular applicatie op te zetten, gebruiken we Angular CLI. Om Angular CLI op je systeem te installeren gebruik je de Node.js Package Manager op de volgende manier op uw opdrachtregel:

$ npm install -g @angular/cli

Als u Angular CLI met succes hebt geïnstalleerd, kunt u het nieuwe commando ng gebruiken om een nieuw Angular-project vanaf nul op te zetten:

$ ng new ngseo --routing

Met de optie new zeggen we dat er een nieuw Angular project moet worden aangemaakt, ngseo is de naam van het nieuwe project en door de optie – routing te gebruiken zorgen we ervoor dat er ook een basis routing configuratie aan het project wordt toegevoegd.

Als het project eenmaal met succes is opgezet, kunnen we naar de nieuw aangemaakte projectmap gaan:

$ cd ngseo

En start de development webserver met behulp van Angular CLI opnieuw op de volgende manier:

$ ng serve -o

U zou nu in staat moeten zijn om het volgende resultaat in de browser te zien:

How Crawlers See Single-Page Web Apps

Nu we een draaiende Angular applicatie hebben, laten we eens onderzoeken hoe crawlers van zoekmachines onze website zien. We krijgen een goede indruk als we de opdrachtregel-tool curl gebruiken om onze site te openen:

$ curl localhost:4200

Het resultaat dat u terugkrijgt zou er ongeveer zo uit moeten zien als het volgende:

Hier kunt u zien dat de hoofdinhoud van de website geen deel uitmaakt van dat HTML-document. In plaats daarvan vind je het placeholder element <app-root> binnen de body sectie. Dit is heel Angular voegt de inhoud van de website in wanneer de JavaScript code van de zijkant wordt uitgevoerd. Maar de crawler is niet in staat om die inhoud te zien omdat JavaScript code niet wordt uitgevoerd.

Angular Universal For Server-Side Rendering

Dus wat zou een oplossing voor dat probleem kunnen zijn? Ja, het is server-side rendering (SSR). Bij server-side rendering wordt de JavaScript-code van de Angular-applicatie al op de server uitgevoerd en is de volledige HTML-structuur en -inhoud ook beschikbaar voor webcrawlers.

De technologie die server-side rendering voor Angular-applicaties mogelijk maakt, wordt Angular Universal genoemd. Angular Universal genereert statische applicatiepagina’s op de server via een proces dat server-side rendering wordt genoemd.

Een gedetailleerde beschrijving van hoe Angular Universal te gebruiken is beschikbaar op https://angular.io/guide/universal. Er is echter een andere aanpak die het toevoegen van Angular Universal zeer eenvoudig maakt: met behulp van het pakket @ng-toolkit/universal.

Het toevoegen van Angular Universal met @ng-toolkit/universal om uw Angular applicatie zoekmachine-vriendelijk te maken

Het @ng-toolkit/universal pakket wordt aan ons project toegevoegd door nogmaals het ng commando te gebruiken op de volgende manier:

$ ng add @ng-toolkit/universal

Nadat u het pakket heeft toegevoegd, opent u package.json en controleert u of het webpack-cli pakket is opgenomen in de afhankelijkhedensectie met ten minste versie 3.1:

"webpack-cli": "^3.1.0"

Als dat niet het geval is, wijzigt u deze vermelding en voert u het volgende commando uit:

$ npm install

Volgende, in plaats van ng serve -o uit te voeren, voert u uit:

$ npm run build:prod

en

$ npm run server

De server wordt gestart op localhost:8080 en als u die URL in de browser opent, zou u de website van de standaard angular-applicatie weer moeten kunnen zien.

Laten we proberen om de website weer te benaderen via curl:

$ curl localhost:8080

De uitvoer zou er nu uit moeten zien zoals u kunt zien in de volgende schermafbeelding:

Deze keer wordt de volledige inhoud van de HTML-site opgenomen. De reden daarvoor is dat de HTML-kant is gerenderd als onderdeel van het bouwproces (server-side) en nu beschikbaar is zonder de noodzaak om JavaScript-code client-side uit te voeren. Zo kan een crawler van een zoekmachine de inhoud van de kant vinden en ervoor zorgen dat deze correct aan de zoekresultaten wordt toegevoegd.

Conclusie

Aangezien Angular standaard gebruik maakt van client-side rendering, is dat een probleem wanneer uw website in de resultaten van zoekmachines moet worden opgenomen. De oplossing is om de applicatie server-side te renderen en uiteindelijke HTML elementen te genereren die zoekmachine crawlers gemakkelijk kunnen interpreteren.

Server-side rendering voor Angular applicaties kan worden bereikt met Angular Universal. Het toevoegen van Angular Universal aan uw bestaande Angular applicatie is zeer eenvoudig door gebruik te maken van het pakket @ng-toolkit/universal.

Dit bericht is als eerste gepubliceerd op CodingTheSmartWay.com.

#1 Angular 6 – The Complete Guide

Master Angular (Angular 2+, incl. Angular 6) en bouw geweldige, reactieve webapps met de opvolger van Angular.js
Ga naar cursus …

Disclaimer: Deze post bevat affiliate links, wat betekent dat als je op een van de productlinks klikt, ik een kleine commissie ontvang. Dit helpt ter ondersteuning van deze blog!