Aggiungere i META tags in Angular

Mattepuffo's logo
Aggiungere i META tags in Angular

Aggiungere i META tags in Angular

I META tags possono essere molto importanti sotto diversi punti di vista.

In Angular, avendo una sola pagina HTML, non possiamo aggiungerli li di default.

Ma possiamo aggiungerli / cancellarli / modificarli con il modulo integrato Meta.

Vediamo come fare:

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

@Component({
    selector: 'app-articolo',
    templateUrl: './articolo.component.html',
    styleUrls: ['./articolo.component.scss']
})

export class ArticoloComponent implements OnInit {

    constructor(private meta: Meta) {
    }

    ngOnInit(): void {
        this.meta.addTag({name: 'description', content: 'Descrizione'});
        this.meta.addTag({name: 'robots', content: 'index,follow'});
        this.meta.addTag({name: 'keywords', content: 'test,ciao'});
        this.meta.addTag({property: 'og:title', content: 'Facebook'});

        console.log(this.meta.getTag('name=keywords').content);
        console.log(this.meta.getTag('name=description').content);
    }

}

Come vedete possiamo aggiungere anche le property per i social media come Facebook.

Enjoy!


Share this Post

Commentami!