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 ^_^.
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