Angular & SEO – Att göra Angular 6 Single-Page Web Apps sökmotorvänliga
I följande handledning kommer vi att ta en titt på det enklaste sättet att bli av med denna begränsning för din Angular 6-applikation genom att använda server-side rendering med Angular Universal.
För att komma igång kan vi först konfigurera en ny Angular-applikation i följande steg:
För att konfigurera en ny Angular-applikation använder vi Angular CLI. För att installera Angular CLI på ditt system använder du Node.js Package Manager på följande sätt på din kommandorad:
$ npm install -g @angular/cli
När du har installerat Angular CLI framgångsrikt är det möjligt att använda det nya kommandot ng för att konfigurera ett nytt Angular-projekt från grunden:
$ ng new ngseo --routing
Med alternativet new säger vi att ett nytt Angular-projekt ska skapas, ngseo är namnet på det nya projektet och genom att använda alternativet – routing ser vi till att en grundläggande routing-konfiguration läggs till i projektet också.
När projektet har konfigurerats framgångsrikt kan vi växla in i den nyskapade projektmappen:
$ cd ngseo
Och starta utvecklingswebservern genom att använda Angular CLI igen på följande sätt:
$ ng serve -o
Du bör nu kunna se följande resultat i webbläsaren:
Hur crawlers ser ensidiga webbapplikationer
Nu när vi har en Angular-applikation som körs ska vi utforska hur sökmotorernas crawlers ser vår webbplats. Vi får ett bra intryck när vi använder kommandoradsverktyget curl för att komma åt vår webbplats:
$ curl localhost:4200
Resultatet du får tillbaka bör se ut ungefär som följande:
Här kan du se att webbplatsens huvudinnehåll inte är en del av detta HTML-dokument. Istället hittar du platshållarelementet <app-root> inne i avsnittet body. Detta är mycket Angular infogar webbplatsens innehåll när sidans JavaScript-kod exekveras. Crawler kan dock inte se det innehållet eftersom JavaScript-koden inte exekveras.
Angular Universal For Server-Side Rendering
Så vad kan vara en lösning på det problemet? Ja, det är server-side rendering (SSR). När server-side rendering utförs utförs JavaScript-koden i Angular-applikationen redan på servern och hela HTML-strukturen och innehållet kommer att vara tillgängligt även för webbcrawlare.
Tekniken som möjliggör server-side rendering för Angular-applikationer kallas Angular Universal. Angular Universal genererar statiska applikationssidor på servern genom en process som kallas server-side rendering.
En detaljerad beskrivning av hur man använder Angular Universal finns på https://angular.io/guide/universal. Det finns dock ett annat tillvägagångssätt som gör det mycket enkelt att lägga till Angular Universal: att använda paketet @ng-toolkit/universal.
Att lägga till Angular Universal med @ng-toolkit/universal för att göra din Angular-applikation sökmotorvänlig
Paketet @ng-toolkit/universal läggs till i vårt projekt genom att använda ng-kommandot en gång till på följande sätt:
$ ng add @ng-toolkit/universal
När du lagt till paketet öppnar du package.json och kontrollerar att paketet webpack-cli finns med i avsnittet för beroenden med minst version 3.1:
"webpack-cli": "^3.1.0"
Om det inte är fallet ändrar du denna post i enlighet med detta och utför följande kommando:
$ npm install
Nästan, istället för att köra ng serve -o kör du:
$ npm run build:prod
och
$ npm run server
Servern startas på localhost:8080 och om du kommer åt den URL:n i webbläsaren bör du kunna se webbplatsen för standardprogrammet angular igen.
Låt oss prova att komma åt webbplatsen igen via curl:
$ curl localhost:8080
Utmatningen bör nu se ut som du kan se i följande skärmdump:
Denna gång är hela innehållet i HTML-webbplatsen inkluderat. Anledningen till detta är att HTML-sidan har renderats som en del av uppbyggnadsprocessen (serversidan) och nu är tillgänglig utan att behöva exekvera JavaScript-kod på klientsidan. På så sätt kan en crawler i en sökmotor hitta sidans innehåll och kan se till att den läggs till i sökresultaten på rätt sätt.
Slutsats
Som standard använder Angular rendering på klientsidan, vilket är ett problem när din webbplats ska listas i sökmotorns resultat. Lösningen är att rendera programmet på serversidan och generera slutliga HTML-element som sökmotorns crawlers lätt kan tolka.
Rendering på serversidan för Angular-applikationer kan uppnås med Angular Universal. Att lägga till Angular Universal till din befintliga Angular-applikation är mycket enkelt genom att använda paketet @ng-toolkit/universal.
Detta inlägg har publicerats först på CodingTheSmartWay.com.
#1 Angular 6 – The Complete Guide
Master Angular (Angular 2+, inkl. Angular 6) och bygg häftiga, reaktiva webbappar med efterföljaren Angular.js
Gå till kursen …
Disclaimer: Det här inlägget innehåller affilierade länkar, vilket innebär att om du klickar på en av produktlänkarna, får jag en liten provision. Detta hjälper till att stödja den här bloggen!