Angular & SEO – Angular 6 Single-Page Web Apps Search-Engine Friendly
I den følgende vejledning vil vi se på den nemmeste metode, der er tilgængelig for at slippe af med denne begrænsning for din Angular 6-applikation ved at bruge server-side rendering med Angular Universal.
For at komme i gang lad os først opsætte en ny Angular-applikation i de følgende trin.
For at opsætte en ny Angular-applikation bruger vi Angular CLI. For at installere Angular CLI på dit system skal du bruge Node.js Package Manager på følgende måde på din kommandolinje:
$ npm install -g @angular/cli
Hvis du har installeret Angular CLI med succes, er det muligt at bruge den nye kommando ng til at opsætte et nyt Angular-projekt fra bunden:
$ ng new ngseo --routing
Med indstillingen new siger vi, at der skal oprettes et nyt Angular-projekt, ngseo er navnet på det nye projekt, og ved at bruge indstillingen – routing sørger vi for, at der også tilføjes en grundlæggende routing-konfiguration til projektet.
Når projektet er blevet sat op med succes, er vi i stand til at skifte ind i den nyoprettede projektmappe:
$ cd ngseo
Og starte udviklingswebserveren ved hjælp af Angular CLI igen på følgende måde:
$ ng serve -o
Du bør nu kunne se følgende resultat i browseren:
Sådan ser crawlere single-page webapps
Nu har vi en Angular-applikation, der kører, og lad os undersøge, hvordan crawlere fra søgemaskiner ser vores websted. Vi får et godt indtryk, når vi bruger kommandolinjeværktøjet curl til at få adgang til vores websted:
$ curl localhost:4200
Det resultat, du får tilbage, bør ligne følgende:
Her kan du se, at webstedets hovedindhold ikke er en del af dette HTML-dokument. I stedet finder du placeholder-elementet <app-root> inde i body-sektionen. Dette er meget Angular er indsætter indholdet af webstedet, når JavaScript-koden af siden udføres. Crawleren er dog ikke i stand til at se dette indhold, fordi JavaScript-koden ikke udføres.
Angular Universal For Server-Side Rendering
Så hvad kunne være en løsning på dette problem? Ja, det er server-side rendering (SSR). Når server-side rendering udføres, udføres JavaScript-koden i Angular-applikationen allerede på serveren, og hele HTML-strukturen og -indholdet vil også være tilgængeligt for webcrawlere.
Den teknologi, der muliggør server-side rendering for Angular-applikationer, kaldes Angular Universal. Angular Universal genererer statiske applikationssider på serveren ved hjælp af en proces, der kaldes server-side rendering.
En detaljeret beskrivelse af, hvordan Angular Universal kan bruges, findes på https://angular.io/guide/universal. Der er dog en anden fremgangsmåde, som gør det meget enkelt at tilføje Angular Universal: ved at bruge pakken @ng-toolkit/universal.
Tilføjelse af Angular Universal med @ng-toolkit/universal for at gøre din Angular-applikation søgemaskinevenlig
Pakken @ng-toolkit/universal tilføjes til out project ved at bruge ng-kommandoen igen på følgende måde:
$ ng add @ng-toolkit/universal
Når du har tilføjet pakken, skal du åbne package.json og sikre dig, at pakken webpack-cli er opført i afsnittet dependencies (afhængigheder) med mindst version 3.1:
"webpack-cli": "^3.1.0"
Hvis det ikke er tilfældet, skal du ændre denne post i overensstemmelse hermed og udføre følgende kommando:
$ npm install
Næst skal du i stedet for at køre ng serve -o køre:
$ npm run build:prod
og
$ npm run server
Serveren er startet på localhost:8080, og hvis du får adgang til denne URL i browseren, bør du igen kunne se webstedet for standard angular-applikationen.
Lad os prøve at få adgang til hjemmesiden igen via curl:
$ curl localhost:8080
Opdatet skulle nu se ud som det, du kan se i følgende skærmbillede:
Denne gang er det komplette indhold af HTML-webstedet inkluderet. Grunden til det er, at HTML-siden er blevet gengivet som en del af opbygningsprocessen (server-side) og nu er tilgængelig uden at skulle udføre JavaScript-kode på klientsiden. Således er en crawler fra en søgemaskine i stand til at finde sidens indhold og kan sørge for, at den tilføjes korrekt i søgeresultaterne.
Konklusion
Som standard bruger Angular client-side rendering, hvilket er et problem, når dit websted skal vises i søgemaskineresultaterne. Løsningen er at rendere applikationen server-side og generere endelige HTML-elementer, som søgemaskinecrawlere nemt kan fortolke.
Server-side rendering for Angular-applikationer kan opnås med Angular Universal. Det er meget nemt at tilføje Angular Universal til din eksisterende Angular-applikation ved at bruge pakken @ng-toolkit/universal.
Dette indlæg er først blevet offentliggjort på CodingTheSmartWay.com.
#1 Angular 6 – The Complete Guide
Master Angular (Angular 2+, inkl. Angular 6) og byg fantastiske, reaktive webapps med efterfølgeren Angular.js
Gå til kursus …
Disclaimer: Dette indlæg indeholder affilierede links, hvilket betyder, at hvis du klikker på et af produktlinkene, modtager jeg en lille provision. Dette hjælper med at støtte denne blog!