Angular & SEO – Cum să faci ca aplicațiile web cu o singură pagină din Angular 6 să fie prietenoase cu motorul de căutare

BY admin
|

În următorul tutorial vom arunca o privire la cea mai simplă abordare care este disponibilă pentru a scăpa de această limitare pentru aplicația dvs. Angular 6 prin utilizarea randării pe partea serverului cu Angular Universal.

Pentru a începe, haideți mai întâi să configurăm o nouă aplicație Angular în următorii pași.

Pentru a configura o nouă aplicație Angular vom folosi Angular CLI. Pentru a instala Angular CLI pe sistemul dvs. folosiți programul Node.js Package Manager în felul următor în linia de comandă:

$ npm install -g @angular/cli

După ce ați instalat Angular CLI cu succes, este posibil să folosiți noua comandă ng pentru a configura un nou proiect Angular de la zero:

$ ng new ngseo --routing

Cu opțiunea new spunem că trebuie creat un nou proiect Angular, ngseo este numele noului proiect, iar prin utilizarea opțiunii – routing ne asigurăm că o configurație de bază de rutare este adăugată și în proiect.

După ce proiectul a fost configurat cu succes suntem capabili să trecem în folderul proiectului nou creat:

$ cd ngseo

Și să pornim din nou serverul web de dezvoltare folosind Angular CLI în felul următor:

$ ng serve -o

Ar trebui acum să puteți vedea următorul rezultat în browser:

Cum văd crawlerii aplicațiile web cu o singură pagină

Acum că avem o aplicație Angular care rulează, haideți să explorăm modul în care crawlerii motoarelor de căutare văd site-ul nostru web. Avem o impresie bună atunci când folosim instrumentul de linie de comandă curl pentru a accesa site-ul nostru:

$ curl localhost:4200

Rezultatul pe care îl primiți înapoi ar trebui să arate similar cu următorul:

Aici puteți vedea că conținutul principal al site-ului nu face parte din acel document HTML. În schimb, veți găsi elementul placeholder <app-root> în interiorul secțiunii body. Acest lucru este foarte Angular inserează conținutul site-ului web atunci când codul JavaScript al laturii este executat. Cu toate acestea, crawlerul nu este capabil să vadă acel conținut deoarece codul JavaScript nu este executat.

Angular Universal For Server-Side Rendering

Deci, care ar putea fi o soluție pentru această problemă? Da, este vorba de server-side rendering (SSR). Atunci când se realizează redarea pe partea serverului, codul JavaScript al aplicației Angular este deja executat pe server, iar structura HTML completă și conținutul vor fi disponibile și pentru web crawlere.

Tehnologia care permite redarea pe partea serverului pentru aplicațiile Angular se numește Angular Universal. Angular Universal generează pagini statice ale aplicației pe server printr-un proces numit server-side rendering.

O descriere detaliată a modului de utilizare a Angular Universal este disponibilă la https://angular.io/guide/universal. Cu toate acestea, există o altă abordare care face ca adăugarea Angular Universal să fie foarte simplă: utilizarea pachetului @ng-toolkit/universal.

Adding Angular Universal With @ng-toolkit/universal To Make Your Angular Application Search-Engine Friendly

Pachetul @ng-toolkit/universal este adăugat la proiect prin utilizarea din nou a comenzii ng în felul următor:

$ ng add @ng-toolkit/universal

După ce ați adăugat pachetul, deschideți package.json și asigurați-vă că pachetul webpack-cli este listat în secțiunea dependencies cu cel puțin versiunea 3.1:

"webpack-cli": "^3.1.0"

Dacă nu este cazul, modificați această intrare în consecință și executați următoarea comandă:

$ npm install

În continuare, în loc să executați ng serve -o executați ng serve -o:

$ npm run build:prod

și

$ npm run server

Serverul este pornit pe localhost:8080 și dacă accesați acel URL în browser ar trebui să puteți vedea din nou site-ul web al aplicației angular implicite.

Să încercăm să accesăm din nou site-ul web prin curl:

$ curl localhost:8080

Să încercăm să accesăm din nou site-ul web prin curl:

$ curl localhost:8080

Lovitura ar trebui să arate acum ca ceea ce puteți vedea în următoarea captură de ecran:

De data aceasta este inclus conținutul complet al site-ului HTML. Motivul este acela că partea HTML a fost redată ca parte a procesului de construire (server-side) și este acum disponibilă fără a fi necesară executarea de cod JavaScript client-side. Astfel, un crawler al unui motor de căutare este capabil să găsească conținutul laturii și se poate asigura că acesta este adăugat corect în rezultatele căutării.

Concluzie

În mod implicit, Angular utilizează redarea pe partea clientului, ceea ce reprezintă o problemă atunci când site-ul dvs. trebuie să fie listat în rezultatele motoarelor de căutare. Soluția este de a reda aplicația server-side și de a genera elemente HTML finale pe care crawlerele motoarelor de căutare le pot interpreta cu ușurință.

Rendarea server-side pentru aplicațiile Angular poate fi realizată cu Angular Universal. Adăugarea Angular Universal la aplicația Angular existentă este foarte ușoară prin utilizarea pachetului @ng-toolkit/universal.

Acest articol a fost publicat prima dată pe CodingTheSmartWay.com.

#1 Angular 6 – Ghidul complet

Master Angular (Angular 2+, incl. Angular 6) și construiți aplicații web impresionante și reactive cu succesorul lui Angular.js
Go To Course …

Disclaimer: Această postare conține link-uri afiliate, ceea ce înseamnă că, dacă faceți clic pe unul dintre link-urile de produs, voi primi un mic comision. Acest lucru ajută la susținerea acestui blog!

.