Angular: Poner título y metas a las páginas

Angular es una tecnología con filosofía SPA, es decir, single page application, o lo que viene a ser lo mismo, toda la web se carga en la misma página.

No es por tanto una tecnología de entrada amigable con el robot indexador de Google, hay pequeños -y grandes- trucos para que Google indexe una página creada con Angular, pero no son tan eficaces como una página clásica.

Para ayudar un poquito a que un sitio creado con Angular sea más indexable y además más amigable Angular nos permite agregar títulos y metas en los componentes. ¿Cómo se hace? Pues muy sencillo.

En primer lugar importamos las librerías que nos permiten agregar title y metas:
import { Title, Meta } from '@angular/platform-browser';

Después tenemos que inyectar la dependencia en el constructor:
constructor(private title: Title, private meta: Meta) {}

A continuación ya podemos agregar el título y los metas:
ngOnInit() {
    title.setTitle('Título de la página');
    meta.updateTag({name: "title", content: "Título de la página"})
    meta.updateTag({name: "description", content: "Descripción del contenido de la página"})
    meta.updateTag({name: "image", content: "https://www.prueba.com/blog-image.jpg"})
    meta.updateTag({name: "site", content: "Mi sitio web"})
}

Como veis es sencillo y muy práctico.

Espero que os sea de utilidad ^_^.

Comentarios