Il framework Angular è un framework strutturale basato su javascript per applicazioni web. Viene utilizzato per creare pagine Web dinamiche con contenuti resi tramite servizi Web. Il framework angolare è molto adatto agli sviluppatori. È in circolazione da diversi anni e ha accumulato una forte comunità di strumenti e utilità tra cui strumenti CMS angolari, framework di back-end e altro ancora.

L'ecosistema Angular

Le applicazioni create utilizzando il framework Angular sono chiamate Single Page Applications (SPA) a causa del modo in cui funzionano. Un’applicazione angolare, una volta caricata, esegue il rendering dinamico di altre pagine senza ricaricare nuovamente le pagine web. Questa esperienza viene fornita con la potenza del framework javascript angolare. Modifica dinamicamente le pagine eseguendo il codice javascript o caricando solo il contenuto richiesto. Ciò offre all’utente un’esperienza fluida senza attendere che si verifichi una ricarica. Tuttavia, i siti angolari possono subire effetti negativi sulla loro ottimizzazione dei motori di ricerca (SEO).

In questo articolo, spieghiamo come le applicazioni Angolari necessitano di un trattamento SEO speciale e forniamo alcune istruzioni di distribuzione specifiche per facilitare un buon SEO angolare.

Comprensione crawler dei motori di ricerca e SEO

Prima di affrontare la soluzione, cerchiamo di capire come i crawler dei motori di ricerca (o bot) effettivamente funzionano. I motori di ricerca di tutto il mondo strisciano attraverso i tuoi siti web per capire le pagine e l’obiettivo finale della tua attività. Per questo, i crawler leggono i metadati delle pagine come titolo, descrizione, tag immagine e categorie. Questi metadati devono essere diversi per ogni pagina per consentire ai motori di ricerca di comprendere l’intento di ciascuna pagina.

Risultati tradizionali del crawler di ricerca SEO

Un bot del motore di ricerca raggiunge una pagina specifica, trova i collegamenti ipertestuali sulla pagina, legge i metadati sulla pagina e inizia a attraversare i collegamenti ipertestuali. Continua a ripetere questo processo sul tuo sito web fino a quando non è in grado di trovare nuovi link. Durante questo processo, il bot scarica il contenuto statico del tuo sito web e comprende la pagina. Pertanto, diventa importante massimizzare i dettagli di ogni pagina nei metadati e nel contenuto statico.

Il nostro CMS angolare consente contenuti dinamici che i marketer possono aggiornare.

SEO è diventato uno degli investimenti più importanti per qualsiasi business online oggi. In passato, le applicazioni web in fase di sviluppo erano abbastanza semplici e contenevano pagine per lo più statiche. Queste pagine contenevano tutte le informazioni richieste precodificate in esse. Con l’evolversi dello sviluppo di applicazioni web, siamo entrati in un’era di rendering dinamico dei contenuti in cui il contenuto delle pagine Web viene memorizzato da qualche parte e recuperato secondo necessità.

Ci sono due modi per farlo:

  1. Rendering lato server
  2. Rendering lato client

A causa della mancanza di sofisticati framework di rendering lato client in passato, il rendering lato server delle pagine era la tendenza. C’erano numerose lingue e framework per gestire lo stesso. Ad esempio, PHP, Java Spring, NodeJS con Handlebars e altri framework rendono le pagine in anticipo e inviano solo il contenuto HTML semplice al frontend.

Questo approccio garantisce che la pagina abbia i meta tag giusti e tutto il contenuto reso prima che venga ricevuto dal crawler dei motori di ricerca. Pertanto, le applicazioni web convenzionali erano praticamente semplici quando si trattava di SEO. Tuttavia, hanno sicuramente avuto uno svantaggio di tempi di caricamento più lunghi. Con i server di fascia bassa, l’elaborazione di migliaia di richieste di pagine è diventata difficile. Ciò ha portato framework frontend come Angular nell’immagine.

SEO per applicazioni a pagina singola (SPA)

Un’applicazione a pagina singola è un concetto in cui il layout di base dell’applicazione viene caricato una sola volta e il resto delle pagine e dei componenti viene caricato solo se necessario. Ciò è reso possibile con la potenza di Javascript che decide dinamicamente quale contenuto è richiesto, recupera i dati e li rende nel formato desiderato.

Il nostro CMS angolare consente contenuti dinamici che i marketer possono aggiornare.

Vantaggi di un’applicazione a pagina singola

A causa della sua natura dinamica, un’applicazione a pagina singola ha molti vantaggi intrinseci ad essa associati. Alcuni di questi sono elencati di seguito:

  • più Veloce tempo di transizione dopo il caricamento dell’applicazione
  • Liscia esperienze rispetto a un convenzionale applicazione web
  • Meno carico sul webserver elaborazione di pagine
  • più Veloce i tempi di sviluppo con un sofisticato framework come Angolare

Nonostante questi vantaggi, una sfida significativa con singola pagina applicazioni è il SEO.

Angular SEO challenges

Come inteso, Angular non ricarica le pagine a meno che non venga esplicitamente richiesto. Angular supporta la modifica dei metadati per le pagine in modo dinamico, ma dipende completamente da JavaScript. Come discusso prima, i crawler dei motori di ricerca normalmente non intrattengono Javascript. Ciò può causare il fallimento delle applicazioni Angolari nel rendering del contenuto o dei metadati corretti.

Angular SEO - Search engine crawler results

Tuttavia, nel corso degli anni, Angular SEO si è evoluta e la comunità ha portato una soluzione per aggirare questo problema. La soluzione ci consente di creare pagine statiche da pagine angolari. Queste pagine statiche contengono i metadati giusti e il contenuto pre-renderizzato. Più avanti in questo articolo, ci immergeremo in questo processo per comprendere le sfide coinvolte e implementare tattiche per ottimizzare SEO angolare.

SEO angolare: sviluppo di pagine di ricerca

Prima di iniziare a costruire una soluzione SEO angolare funzionante, iniziamo creando un’applicazione angolare JS vuota.

ng new seo-friendly-app

Il comando crea una nuova applicazione Angular JS in cui creeremo una semplice home page e una pagina del blog, renderemo alcuni contenuti sulla pagina del blog usando le API ButterCMS e li renderemo SEO-friendly.

Iniziamo creando pagine e percorsi per lo stesso. Esegui i seguenti comandi nel terminale per creare le tue pagine home e blog.

ng g c pages/home --skipTests=trueng g c pages/blog --skipTests=true

Questo creerà i componenti e li importerà nell’app.modulo.file ts. Ora, aggiungi le pagine al modulo di routing per permetterci di instradare a queste pagine. Modificare l’app-routing.modulo.file ts.

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './pages/home/home.component';import { BlogComponent } from './pages/blog/blog.component';const routes: Routes = ;@NgModule({ imports: ,exports: })export class AppRoutingModule { }

Il codice precedente mappa i rispettivi componenti con i loro percorsi e impostaHomeComponent come componente predefinito. Ora, modificare l’applicazione.componente.file html per contenere solo una singola riga di codice.

<router-outlet></router-outlet>

Infine, eseguire l’applicazione utilizzando il seguente comando e verificare che l’applicazione sia impostata correttamente. Una volta che il comando passa, puoi premere l’URL localhost:4200 per assicurarti che le cose siano impostate correttamente. Dovresti vedere il testo ” home works!”.

ng serve

Ora aggiungiamo un’intestazione che ci permette di navigare tra le pagine. Creare un componente di intestazione utilizzando il comando seguente.

ng g c header --skipTests=true

Quindi, modificare il contenuto dell’intestazione.componente.html per contenere gli elementi di navigazione.

<div><a ="">Home</a></div><div><a ="">Blog</a></div>

Infine, hai un’applicazione completa in cui hai due pagine e una semplice navigazione non stilizzata che ti permette di spostarti tra le pagine. Ora, analizziamo questa applicazione da una prospettiva SEO. Fare clic con il pulsante destro del mouse sul browser e selezionare “Visualizza origine pagina”. Dovresti essere in grado di vedere come i crawler dei motori di ricerca vedrebbero la tua pagina senza Javascript. Il codice assomiglia al frammento sottostante.

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>SeoFriendlyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body> <app-root></app-root><script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body></html>

Ora, passare alla pagina del blog ed eseguire la stessa azione e notare il contenuto della pagina. È simile. Questo include il titolo della pagina così come il corpo. Questo perché Angular modifica il tuo DOM usando javascript.

Creazione di pagine dinamiche

Con la presente, siamo riusciti a implementare questo sulle pagine statiche. Cerchiamo ora di rendere i nostri blog e pagina di contenuto del blog utilizzando ButterCMS API. Questo ci permetterà di eseguire SEO su contenuti web statici e dinamici. Prima di iniziare con esso, non registrare un account di prova gratuito con ButterCMS per essere in grado di creare contenuti dinamici facilmente.

Per fare ciò, installiamo il plugin ButterCMS usando NPM.

npm install --save buttercms

Una volta installato, creiamo un file di servizio sul percorso services / butterCMS.servizio.ts e inserire il contenuto sottostante all’interno del file.

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

Sostituisci il tuo token nel codice precedente. Questo file di servizio garantisce che il token sia gestito globalmente in un singolo file. Possiamo importare questo file ovunque abbiamo bisogno di utilizzare i servizi ButterCMS. Ora, cerchiamo di implementare rapidamente il codice qui sotto nel blog.componente.ts file per ottenere un elenco di messaggi.

import { Component, OnInit } from '@angular/core';import { butterService } from '../../services/butter-cms.service';@Component({ selector: 'app-blog', templateUrl: './blog.component.html', styleUrls: })export class BlogComponent implements OnInit { posts:any; constructor() { this.fetchPosts(); } private fetchPosts() { butterService.post.list({ page: 1, page_size: 10 }) .then((res) => { console.log('Content from ButterCMS'); console.log(res); this.posts = res.data.data; }); } ngOnInit() { }}

Ora, vai al browser e ispeziona l’output della console nella console. Dovresti essere in grado di vedere l’elenco dei tuoi post nella console del browser. Come puoi vedere nel frammento di codice qui sotto, questo dimostra due dei post che ho creato per questo tutorial.

Ora, rendiamo questo contenuto sulla pagina del blog. Per farlo, aggiorna il tuo blog.componente.file html con il seguente codice:

<div *ngIf="posts!=undefined"><div *ngFor="let post of posts.data"> <hr> <h1>{{post.title}}</h1> <div ="post.body"></div></div></div> 

Questo renderà i post dalla tua piattaforma ButterCMS sulla pagina web. Cerchiamo ora di capire come impostare un titolo personalizzato e meta tag per ogni pagina.

Impostazione del titolo e dei meta tag per Angular SEO

Angular capisce questo problema e ha già una soluzione a questo. Per aggiungere metadati e modificare dinamicamente il titolo della pagina, tutto ciò che devi fare è utilizzare questi moduli da Angular. Aggiorna il codice per la tua casa.componente.ts file con il sotto. Esegui modifiche simili sul tuo blog.componente.anche ts.

import { Component, OnInit } from '@angular/core';import { Meta,Title } from '@angular/platform-browser';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: })export class HomeComponent implements OnInit { constructor(private meta: Meta,private title: Title) { this.meta.addTags(); this.setTitle('Home Page'); } public setTitle( newTitle: string) { this.title.setTitle( newTitle ); } ngOnInit() { }}

Una volta salvate queste modifiche, osservare il titolo nella scheda del browser. Cambia dinamicamente mentre navighi tra le pagine. Inoltre, se si ispeziona il codice nella console del browser, verrà visualizzato che sono stati allegati anche i metadati corrispondenti. Tuttavia, se si controlla l’origine della pagina, il contenuto è sempre lo stesso. Ciò significa che se Javascript è consentito, possiamo generare un titolo dinamico e meta, ma non senza di esso.

Quindi, abbiamo bisogno di un modo per prendere il contenuto di questa pagina renderizzata e inviarlo all’utente. Questo processo è chiamato pre-rendering del contenuto ed è fondamentale per ottenere un buon SEO angolare. Esistono diversi metodi per eseguire il pre-rendering. Nella prossima sezione, esploreremo uno di loro.

Comprendere la necessità di pre-rendering

Il pre-rendering significa essenzialmente che il contenuto HTML della pagina sarebbe stato compilato in anticipo. Ciò garantirebbe che il titolo e i metadati della pagina siano presenti quando raggiunge il lato client. Con il pre-rendering, possiamo esporre il contenuto HTML finale al crawler piuttosto che esporre HTML vuoto.

Implementazione del pre-rendering per applicazioni angolari

Con gli aggiornamenti in Angular, ora viene fornito con una soluzione standardizzata anche per il pre-rendering. Il processo è abbastanza semplice. Vorremmo sfruttare il pacchetto universale angolare per supportare il pre-rendering delle pagine. Per aggiungere il pacchetto universale Angular, eseguire il comando seguente con il nome del progetto utilizzato durante la creazione dell’app Angular.

ng add @nguniversal/express-engine --clientProject seo-friendly-app

Questo creerà alcuni file all’interno del progetto e configurerà il progetto per supportare il pre-rendering utilizzando un server NodeJS. Per eseguire questo, eseguire il comando seguente.

npm run build:ssr && npm run serve:ssr

Questo comando compila, costruisce le pagine statiche, le inserisce nella cartella dist e le serve eseguendo un server NodeJS. Con questo, abbiamo notevolmente migliorato il nostro SEO angolare assicurando che la nostra applicazione sia costruita in modo SEO-friendly e che tutto il suo contenuto sia reso dinamicamente.

Convalida del tuo Angular SPA SEO-friendly

Per convalidare l’implementazione, puoi andare al browser e visualizzare l’origine della pagina per ogni pagina. Ora, sarai in grado di vedere che il browser rende il contenuto HTML esatto come ti aspetteresti. Con questo, abbiamo stabilito la nostra implementazione di un semplice blog non stilizzato con un rendering SEO-friendly su Angular framework. Con ButterCMS, puoi fare molto di più come recuperare dinamicamente i tag SEO, le meta descrizioni e persino il contenuto della pagina stessa. Controlla la nostra documentazione API angolare per saperne di più.

Iscriviti per ricevere articoli e tutorial su Angular SEO.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.