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!