@angular/platform-browser: Meta Tags e SEO

Grazie a @angular/platform-browser è possibile gestire i meta tags grazie alla funzionalità di addTag, getTag, updateTag e removeTag. Utilizzare i tags ed il title in ogni pagina è molto importante per migliorare il SEO all’interno del proprio sito.

@angular/platform-browser: come usarlo

Per utilizzare “@angular/platform-browser” come prima cosa dobbiamo inserirlo all’interno del nostro file TypeScript. (typescript)

1
2
3

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

Una volta inserito l’import di Meta e Title non resta che passarli tramite dependency injection al nostro costruttore. Nel nostro esempio utilizzeremo una classe SeoMetaTag (il codice verrà mostrato in seguito) e valorizzato le proprietà in maniera statica.

Suggerimento: per rendere il tutto dinamico vi basterà effettuare una chiamata HTTP Get ad una vostra API per ottenere tutti i valori desiderati. (typescript)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

	private seo = new SeoMetaTag();


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

		this.seo.title = "Dev 2.0";
		this.seo.author = "Andrea Carratta";
		this.seo.keywords = "Andrea Carratta, Cloud, Azure, DevOps, developer, freelance";
		this.seo.description = "Freelance | C# Software Developer | Microsoft Azure Cloud | Azure DevOps";

	}

A questo punto mancano solamente due cose

• La definizione della classe SeoMetaTag

• Portare le proprietà valorizzate nel costruttore nei tag della pagina.

Per prima vedremo il come valorizzare i tag. La creazione della classe la faremo come ultima operazione, anche se in realtà è stata la prima fatta sia per la stesura di questo breve tutorial, che per il sito web in fase di sviluppo. (typescript)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

	ngOnInit() {

		this.title.setTitle(this.seo.title);

		this.meta.addTag({ name: 'description', content: this.seo.description});

		this.meta.addTags([
			{ name: 'title', content: this.seo.title },
			{ name: 'author', content: this.seo.author },
			{ name: 'keywords', content: this.seo.keywords }
		]);
	}

Ora -finalmente- vedremo come definire la classe SeoMetaTag.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

interface ISeoMetaTag {
	title: string;
	description: string;
	author: string;
	keywords: string;
}

class SeoMetaTag implements ISeoMetaTag {
	title: string;
	description: string;
	author: string;
	keywords: string;
}

Come potete vedere abbiamo scritto davvero pochissime righe di codice TypeScript, ma l’utilizzo è davvero potente.

• Angular platform browser: https://angular.io/api/platform-browser

• Dependency Injection in Angular: https://angular.io/guide/dependency-injection

Ora non vi resta che provare ad utilizzare il codice proposto ed aggiornare e/o correggere il vostro client SPA rendendo dinamici i metatags ed il title.