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

BY admin
|

Seuraavassa tutoriaali aiomme tarkastella helpoin lähestymistapa, joka on saatavilla päästä eroon että rajoitus Angular 6 sovellus käyttämällä palvelinpuolen renderöinti Angular Universal.

Aloittaaksemme asetetaan ensin uusi Angular-sovellus seuraavissa vaiheissa.

Uuden Angular-sovelluksen asettamiseen käytämme Angular CLI:tä. Voit asentaa Angular CLI:n järjestelmääsi käyttämällä Node.js-paketinhallinta seuraavasti komentorivilläsi:

$ npm install -g @angular/cli

Asennettuasi Angular CLI:n onnistuneesti voit käyttää uutta komentoa ng uuden Angular-projektin perustamiseen tyhjästä:

$ ng new ngseo --routing

Vaihtoehdolla new sanomme, että luodaan uusi Angular-projekti, ngseo on uuden projektin nimi ja käyttämällä optiota – routing varmistamme, että projektiin lisätään myös perusreititysmääritys.

Kun projekti on perustettu onnistuneesti, voimme siirtyä juuri luotuun projektikansioon:

$ cd ngseo

Ja käynnistää kehitysverkkopalvelimen Angular CLI:n avulla uudelleen seuraavalla tavalla:

$ ng serve -o

$ ng serve -o

Tässä vaiheessa selaimessa pitäisi näkyä seuraava tulos:

Miten indeksoijat näkevät yksisivuiset verkkosovellukset

Nyt kun meillä on käynnissä oleva Angular-sovellus, tutkitaanpa, miten hakukoneiden indeksoijat näkevät sivustomme. Saamme hyvän vaikutelman, kun käytämme komentorivityökalua curl päästäksemme sivustollemme:

$ curl localhost:4200

Tuloksen, jonka saat takaisin, pitäisi näyttää seuraavanlaiselta:

Tässä näet, että sivuston pääsisältö ei ole osa kyseistä HTML-dokumenttia. Sen sijaan body-osan sisältä löytyy placeholder-elementti <app-root>. Tämä on hyvin Angular lisää sivuston sisällön, kun sivun JavaScript-koodi suoritetaan. Mönkijä ei kuitenkaan näe tuota sisältöä, koska JavaScript-koodia ei suoriteta.

Angular Universal For Server-Side Rendering

Mikä voisi siis olla ratkaisu tähän ongelmaan? Kyllä, se on palvelinpuolen renderöinti (SSR). Kun palvelinpuolen renderöinti suoritetaan, Angular-sovelluksen JavaScript-koodi suoritetaan jo palvelimella, ja koko HTML-rakenne ja -sisältö ovat myös web-koneiden indeksoijien käytettävissä.

Teknologia, joka mahdollistaa palvelinpuolen renderöinnin Angular-sovelluksille, on nimeltään Angular Universal. Angular Universal tuottaa staattiset sovellussivut palvelimella palvelinpuolen renderöinniksi kutsutun prosessin avulla.

Tarkka kuvaus Angular Universalin käytöstä löytyy osoitteesta https://angular.io/guide/universal. On kuitenkin olemassa toinenkin lähestymistapa, joka tekee Angular Universalin lisäämisestä hyvin yksinkertaista: käyttämällä pakettia @ng-toolkit/universal.

Angular Universalin lisääminen @ng-toolkit/universalilla tekee Angular-sovelluksestasi hakukoneystävällisen

Paketti @ng-toolkit/universal lisätään projektiin käyttämällä ng-komentoa vielä kerran seuraavalla tavalla:

$ ng add @ng-toolkit/universal

Paketin lisäämisen jälkeen avataan package.json-tiedosto ja varmistutaan siitä, että webpack-cli-paketti on listattu riippuvuudet-kohdassa vähintään versiolla kolme.1:

"webpack-cli": "^3.1.0"

Jos näin ei ole, vaihda tätä merkintää vastaavasti ja suorita seuraava komento:

$ npm install

Seuraavaksi ajetaan ng serve -o:n sijaan ng serve -o:

$ npm run build:prod

ja

$ npm run server

Palvelin käynnistetään osoitteessa localhost:8080, ja jos käytät tuota URL-osoitetta selaimessa, sinun pitäisi nähdä taas oletusarvoisen angular-sovelluksen verkkosivusto.

Kokeillaan päästä verkkosivulle uudelleen curl:n kautta:

$ curl localhost:8080

Tulosteen pitäisi nyt näyttää seuraavassa kuvakaappauksessa näkyvältä:

Tällä kertaa HTML-sivuston koko sisältö on mukana. Syynä tähän on se, että HTML-puoli on renderöity osana rakentamisprosessia (palvelinpuolella) ja on nyt käytettävissä ilman tarvetta suorittaa JavaScript-koodia asiakaspuolella. Näin hakukoneen crawler pystyy löytämään sivun sisällön ja voi varmistaa, että se lisätään hakutuloksiin oikein.

Johtopäätös

Esimerkiksi Angular käyttää asiakaspuolen renderöintiä, mikä on ongelma silloin, kun sivuston pitäisi olla hakukoneen tuloksissa. Ratkaisu on renderöidä sovellus palvelinpuolella ja tuottaa lopulliset HTML-elementit, joita hakukoneiden indeksoijat voivat tulkita helposti.

Palvelinpuolen renderöinti Angular-sovelluksille voidaan toteuttaa Angular Universalilla. Angular Universalin lisääminen olemassa olevaan Angular-sovellukseen on erittäin helppoa käyttämällä pakettia @ng-toolkit/universal.

Tämä viesti on julkaistu ensin CodingTheSmartWay.com-sivustolla.

#1 Angular 6 – The Complete Guide

Master Angular (Angular 2+, sis. Angular 6) ja rakenna mahtavia, reaktiivisia verkkosovelluksia Angular.js:n seuraajalla
Mene kurssille …

Disclaimer: Tämä viesti sisältää affiliate-linkkejä, mikä tarkoittaa, että jos napsautat jotakin tuotelinkkiä, saan pienen provision. Tämä auttaa tukemaan tätä blogia!