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

BY admin
|

Nel seguente tutorial daremo un’occhiata all’approccio più semplice che è disponibile per liberarsi di questa limitazione per la vostra applicazione Angular 6 utilizzando il rendering lato server con Angular Universal.

Per iniziare impostiamo prima una nuova applicazione Angular nei seguenti passi.

Per impostare una nuova applicazione Angular stiamo usando Angular CLI. Per installare Angular CLI sul vostro sistema usate il Node.js Package Manager nel seguente modo sulla vostra linea di comando:

$ npm install -g @angular/cli

Aver installato Angular CLI con successo rende possibile utilizzare il nuovo comando ng per impostare un nuovo progetto Angular da zero:

$ ng new ngseo --routing

Con l’opzione new stiamo dicendo che un nuovo progetto Angular dovrebbe essere creato, ngseo è il nome del nuovo progetto e utilizzando l’opzione – routing ci stiamo assicurando che una configurazione di routing di base sia aggiunta anche al progetto.

Una volta che il progetto è stato impostato con successo siamo in grado di passare nella cartella del progetto appena creato:

$ cd ngseo

E avviare il web server di sviluppo utilizzando di nuovo Angular CLI nel seguente modo:

$ ng serve -o

Dovresti ora essere in grado di vedere il seguente risultato nel browser:

Come i crawler vedono le applicazioni web a pagina singola

Ora che abbiamo un’applicazione Angular in esecuzione esploriamo come i crawler dei motori di ricerca vedono il nostro sito. Stiamo ottenendo una buona impressione quando usiamo lo strumento a riga di comando curl per accedere al nostro sito:

$ curl localhost:4200

Il risultato che stai ottenendo dovrebbe essere simile al seguente:

Qui potete vedere che il contenuto principale del sito non è parte di quel documento HTML. Invece troverete l’elemento segnaposto <app-root> all’interno della sezione body. Questo è molto Angular sta inserendo il contenuto del sito web quando il codice JavaScript del lato viene eseguito. Tuttavia il crawler non è in grado di vedere quel contenuto perché il codice JavaScript non viene eseguito.

Angular Universal For Server-Side Rendering

Quindi quale potrebbe essere una soluzione per questo problema? Sì, è il rendering lato server (SSR). Quando viene eseguito il rendering lato server, il codice JavaScript dell’applicazione Angular viene già eseguito sul server e la struttura HTML completa e il contenuto saranno disponibili anche ai web crawler.

La tecnologia che permette il rendering lato server per le applicazioni Angular è chiamata Angular Universal. Angular Universal genera pagine statiche dell’applicazione sul server attraverso un processo chiamato rendering lato server.

Una descrizione dettagliata di come usare Angular Universal è disponibile a https://angular.io/guide/universal. Tuttavia c’è un altro approccio che rende l’aggiunta di Angular Universal molto semplice: usare il pacchetto @ng-toolkit/universal.

Aggiungere Angular Universal con @ng-toolkit/universal per rendere la tua applicazione Angular Search-Engine Friendly

Il pacchetto @ng-toolkit/universal viene aggiunto al nostro progetto usando ancora una volta il comando ng nel seguente modo:

$ ng add @ng-toolkit/universal

Dopo aver aggiunto il pacchetto, apri package.json e assicurati che il pacchetto webpack-cli sia elencato nella sezione delle dipendenze con almeno la versione 3.1:

"webpack-cli": "^3.1.0"

Se non è così cambiate questa voce di conseguenza ed eseguite il seguente comando:

$ npm install

In seguito, invece di eseguire ng serve -o eseguite:

$ npm run build:prod

e

$ npm run server

Il server viene avviato su localhost:8080 e se stai accedendo a quell’URL nel browser dovresti essere in grado di vedere nuovamente il sito web dell’applicazione angolare predefinita.

Proviamo ad accedere nuovamente al sito web tramite curl:

$ curl localhost:8080

L’output dovrebbe ora assomigliare a quello che potete vedere nel seguente screenshot:

Questa volta il contenuto completo del sito HTML è incluso. La ragione di ciò è che il lato HTML è stato reso come parte del processo di costruzione (lato server) ed è ora disponibile senza la necessità di eseguire codice JavaScript lato client. Così un crawler di un motore di ricerca è in grado di trovare il contenuto del lato e può assicurarsi che venga aggiunto correttamente ai risultati di ricerca.

Conclusione

Di default Angular usa il rendering lato client, che è un problema quando il tuo sito web dovrebbe essere elencato nei risultati del motore di ricerca. La soluzione è rendere l’applicazione lato server e generare elementi HTML finali che i crawler dei motori di ricerca possono interpretare facilmente.

Il rendering lato server per le applicazioni Angular può essere ottenuto con Angular Universal. Aggiungere Angular Universal alla tua applicazione Angular esistente è molto facile usando il pacchetto @ng-toolkit/universal.

Questo post è stato pubblicato prima su CodingTheSmartWay.com.

#1 Angular 6 – La guida completa

Master Angular (Angular 2+, incl. Angular 6) e costruisci fantastiche web app reattive con il successore di Angular.js
Vai al corso …

Disclaimer: Questo post contiene link di affiliazione, il che significa che se clicchi su uno dei link dei prodotti, riceverò una piccola commissione. Questo aiuta a sostenere questo blog!