Angular & SEO – Az Angular 6 egyoldalas webalkalmazások keresőmotor-baráttá tétele

A következő bemutatóban a legegyszerűbb megközelítést fogjuk megnézni, amely elérhető, hogy megszabaduljunk ettől a korlátozástól az Angular 6 alkalmazásunk számára a szerveroldali renderelés használatával az Angular Universal segítségével.

Az induláshoz először állítsunk be egy új Angular alkalmazást a következő lépésekben.

Az új Angular alkalmazás beállításához az Angular CLI-t használjuk. Az Angular CLI telepítéséhez a rendszerünkre használjuk a Node.js csomagkezelőt a következő módon a parancssorodon:

$ npm install -g @angular/cli

Az Angular CLI sikeres telepítése lehetővé teszi, hogy az új ng parancsot használd egy új Angular projekt nulláról történő beállításához:

$ ng new ngseo --routing

A new opcióval azt mondjuk, hogy egy új Angular projektet kell létrehozni, ngseo az új projekt neve, az option – routing használatával pedig biztosítjuk, hogy egy alapvető routing konfiguráció is hozzá legyen adva a projekthez.

A projekt sikeres beállítása után át tudunk váltani az újonnan létrehozott projekt mappába:

$ cd ngseo

Az Angular CLI segítségével újra elindítjuk a fejlesztői webszerverünket a következő módon:

$ ng serve -o

A böngészőben most már a következő eredményt kell látnunk:

How Crawlers See Single-Page Web Apps

Most, hogy van egy futó Angular alkalmazásunk, vizsgáljuk meg, hogyan látják a keresőmotorok lánctalpasai a weboldalunkat. Jó benyomást kelt, ha a curl parancssori eszközzel elérjük az oldalunkat:

$ curl localhost:4200

A visszaérkező eredménynek az alábbiakhoz hasonlóan kell kinéznie:

Itt látható, hogy a weboldal fő tartalma nem része ennek a HTML-dokumentumnak. Ehelyett a body részen belül található a <app-root> helyőrző elem. Ez nagyon Angular beilleszti a weboldal tartalmát, amikor az oldal JavaScript kódja végrehajtásra kerül. A lánctalpas azonban nem látja ezt a tartalmat, mert a JavaScript kódot nem hajtja végre.

Angular Universal For Server-Side Rendering

Szóval mi lehet a megoldás erre a problémára? Igen, ez a szerveroldali renderelés (SSR). A szerveroldali renderelés során az Angular alkalmazás JavaScript kódja már a szerveren végrehajtódik, és a teljes HTML struktúra és tartalom elérhető lesz a webkúszók számára is.

Az Angular alkalmazások szerveroldali renderelését lehetővé tevő technológia neve Angular Universal. Az Angular Universal egy szerveroldali renderelésnek nevezett folyamat révén statikus alkalmazásoldalakat generál a szerveren.

Az Angular Universal használatának részletes leírása a https://angular.io/guide/universal oldalon érhető el. Van azonban egy másik megközelítés is, amely nagyon egyszerűvé teszi az Angular Universal hozzáadását: a @ng-toolkit/universal csomag használata.

Az Angular Universal hozzáadása a @ng-toolkit/universal segítségével, hogy az Angular alkalmazásunk keresőmotor-barát legyen

A @ng-toolkit/universal csomagot ismét az ng parancs segítségével adjuk hozzá a projektünkhöz a következő módon:

$ ng add @ng-toolkit/universal

A csomag hozzáadása után nyissuk meg a package.json-t és győződjünk meg róla, hogy a webpack-cli csomag szerepel a dependencies részben, legalább a 3. verzióval.1:

"webpack-cli": "^3.1.0"

Ha ez nem így van, akkor ennek megfelelően változtassuk meg ezt a bejegyzést, és hajtsuk végre a következő parancsot:

$ npm install

A következőkben az ng serve -o helyett futtassuk:

$ npm run build:prod

és

$ npm run server

A szerver elindul a localhost:8080 címen, és ha ezt az URL-t éred el a böngészőben, akkor újra látnod kell az alapértelmezett angular alkalmazás weboldalát.

Próbáljuk meg újra elérni a weboldalt curl segítségével:

$ curl localhost:8080

A kimenetnek most úgy kell kinéznie, ahogy az alábbi képernyőképen látható:

Ezúttal a HTML oldal teljes tartalma szerepel. Ennek az az oka, hogy a HTML-oldal az építési folyamat részeként (szerveroldali) renderelésre került, és így a JavaScript kód kliensoldali futtatása nélkül is elérhető. Így egy keresőmotor lánctalpas programja képes megtalálni az oldal tartalmát, és gondoskodhat arról, hogy az helyesen kerüljön be a keresési találatok közé.

Következtetés

Az Angular alapértelmezés szerint kliensoldali renderelést használ, ami problémát jelent, ha a weboldalunknak szerepelnie kell a keresőmotorok találatai között. A megoldás az alkalmazás szerveroldali renderelése és olyan végleges HTML elemek generálása, amelyeket a keresőmotorok lánctalpasai könnyen értelmezni tudnak.

A szerveroldali renderelés az Angular alkalmazásokhoz az Angular Universal segítségével érhető el. Az Angular Universal hozzáadása a meglévő Angular alkalmazásodhoz nagyon egyszerű a @ng-toolkit/universal csomag használatával.

Ez a bejegyzés először a CodingTheSmartWay.com-on jelent meg.

#1 Angular 6 – The Complete Guide

Master Angular (Angular 2+, incl. Angular 6) és építs fantasztikus, reaktív webes alkalmazásokat az Angular.js utódjával
Menj a tanfolyamra …

Disclaimer: Ez a bejegyzés affiliate linkeket tartalmaz, ami azt jelenti, hogy ha rákattintasz valamelyik terméklinkre, kis jutalékot kapok. Ez segít támogatni ezt a blogot!