Guida SEO per Angular 4 (Universal + Angular CLI)

Indice

1. Introduzione
2. Cos'è Angular Universal?
3. Vantaggi di Angular Universal
4. Come rendere un'app Angular SEO-friendly con Angular Universal
   1. Installazione di Angular Universal
   2. Configurazione di Angular Universal in app.module.ts
   3. Creazione di app.server.module.ts
   4. Creazione del server Express
   5. Aggiornamento delle configurazioni TypeScript
   6. Aggiunta di metatag e titoli personalizzati alle pagine
5. Esempi pratici di Angular Universal per l'ottimizzazione SEO
   1. Esempio 1: Creazione di una homepage con metatag personalizzati
   2. Esempio 2: Creazione di una pagina "About" con metatag personalizzati
6. Conclusioni

Cos'è Angular Universal e come renderlo SEO-friendly con Angular Universal

Angular Universal è un framework di generazione di rendering lato server per Angular che consente di renderizzare le pagine dell'applicazione sul lato server, migliorando così la SEO e l'esperienza dell'utente.

Vantaggi di Angular Universal

• Migliora l'indicizzazione SEO: renderizzando le pagine sul lato server, i motori di ricerca possono accedere facilmente ai contenuti dell'app e indicizzarli correttamente.
• Velocità di caricamento migliorata: poiché il server invia pagine già renderingizzate agli utenti, il tempo di caricamento è più veloce rispetto all'attesa del caricamento di tutti i file JavaScript.
• Accessibilità: le pagine renderizzate sul lato server consentono agli utenti di visualizzare i contenuti anche se JavaScript non è abilitato nel loro browser.
• Supporto per i social media: con i metatag personalizzati, puoi migliorare l'aspetto delle condivisioni sui social media, fornendo informazioni specifiche.
• Migliore esperienza UX: le pagine renderizzate sul lato server consentono un caricamento più rapido e una navigazione fluida, migliorando l'esperienza dell'utente.
• Supporto per dispositivi mobili: con il rendering lato server, le pagine sono facilmente accessibili e utilizzabili su dispositivi mobili.

Come rendere un'app Angular SEO-friendly con Angular Universal

Per rendere un'app Angular SEO-friendly con Angular Universal, segui i passaggi seguenti:

1. Installa Angular Universal: usando npm, puoi installare Angular Universal nel tuo progetto Angular.
2. Configura Angular Universal in app.module.ts: aggiungi il modulo ServerTransferStateModule e ServerModule al tuo app.module.ts e importa il modulo TransferHttpCacheModule per gestire la cache HTTP.
3. Crea app.server.module.ts: questo modulo viene utilizzato per avviare l'app sul lato server.
4. Crea il server Express: crea un file server.ts per creare il server Express che gestirà le richieste HTTP e renderizzerà le pagine sul lato server.
5. Aggiorna le configurazioni TypeScript: aggiungi la configurazione TypeScript appropriata per consentire a Angular di generare i file di factory necessari.
6. Aggiungi metatag e titoli personalizzati alle pagine: utilizzando il pacchetto @angular/platform-server, puoi aggiungere metatag personalizzati come meta e titoli alle tue pagine per renderle più accattivanti per i motori di ricerca.

Esempi pratici di Angular Universal per l'ottimizzazione SEO

Di seguito sono riportati alcuni esempi pratici di come utilizzare Angular Universal per l'ottimizzazione SEO:

Esempio 1: Creazione di una homepage con metatag personalizzati

Partendo da un'app Angular base, puoi creare una homepage utilizzando Angular Universal che includa metatag personalizzati come il titolo, i metatag delle parole chiave e la descrizione. Questi metatag contribuiranno a migliorare l'indicizzazione SEO della homepage e a fornire informazioni pertinenti ai motori di ricerca.

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private meta: Meta, private title: Title) {}

  ngOnInit() {
    this.title.setTitle('La mia fantastica homepage');
    this.meta.addTags([
      { name: 'author', content: 'Il mio nome' },
      { name: 'keywords', content: 'Angular, SEO, tutorial' },
      { name: 'description', content: 'Benvenuti nella mia fantastica homepage!' }
    ]);
  }
}

Esempio 2: Creazione di una pagina "About" con metatag personalizzati

Puoi applicare lo stesso concetto anche alle altre pagine del tuo sito. Ad esempio, puoi creare una pagina "About" che includa metatag personalizzati come il titolo, i metatag delle parole chiave e la descrizione. Questi metatag forniranno informazioni specifiche sulla pagina "About" ai motori di ricerca.

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {

  constructor(private meta: Meta, private title: Title) {}

  ngOnInit() {
    this.title.setTitle('La mia fantastica pagina "About"');
    this.meta.addTags([
      { name: 'author', content: 'Il mio nome' },
      { name: 'keywords', content: 'Angular, SEO, tutorial' },
      { name: 'description', content: 'Benvenuti nella mia fantastica pagina "About"!' }
    ]);
  }
}

Conclusioni

Utilizzando Angular Universal e seguendo i passaggi per renderizzare l'app Angular sul lato server, è possibile migliorare l'indicizzazione SEO, velocizzare il caricamento delle pagine e migliorare l'esperienza dell'utente. Incorporando metatag personalizzati e titoli, è possibile fornire informazioni specifiche per rendere l'app più attraente per i motori di ricerca. Speriamo che questo tutorial ti abbia aiutato a capire come utilizzare Angular Universal per ottimizzare l'aspetto SEO della tua app Angular.