Mejora tu SEO en Angular usando los servicios Meta y Title

En el desarrollo de aplicaciones web, especialmente aplicaciones SPA, (Single Page Application) lograr una buena optimización para motores de búsqueda (SEO) puede ser un desafío. Esto se debe a que las SPA cargan contenido de manera dinámica sin recargar la página, lo que dificulta a los motores de búsqueda rastrear e indexar correctamente el contenido. Sin embargo, Angular nos proporciona de servicios para poder actualizar los metadatos importantes para el SEO de la página. 

¿Qué son los servicios Meta y Title?

El servicio Meta de Angular nos permite gestionar dinámicamente los metadatos de nuestra aplicación, como la descripción o las palabras clave. Por otro lado, el servicio Title nos permite actualizar el título de la página. Juntos, estos servicios ayudan a que cada ruta o vista de nuestra SPA tenga sus propios metadatos y título, mejorando la indexación y el SEO general de la aplicación.

¿Cómo funcionan los servicios Meta y Title?

El servicio Title tiene dos métodos principales:

• getTitle(): Este método recupera el título actual del documento HTML. Es útil si necesitamos manipular o verificar el título existente antes de modificarlo.
• setTitle(newTitle: string): Este método establece un nuevo título para la página. Esto es fundamental cuando queremos cambiar dinámicamente el título en función de la ruta o el contenido.

Por otro lado, el servicio Meta nos ofrece varios métodos para manipular las <meta> tags:

• addTag(tag: MetaDefinition, forceCreation?: boolean): Añade una nueva meta tag al documento. Si ya existe una meta tag con los mismos atributos, devolverá la existente sin modificarla, a menos que forceCreation sea verdadero.
• addTags(tags: MetaDefinition[], forceCreation?: boolean): Añade varias meta tags a la vez. Es útil si queremos definir múltiples meta tags al cargar una vista.
• getTag(attrSelector: string): Recupera una meta tag específica, utilizando un selector en formato de atributo, por ejemplo, name='description'.
• getTags(attrSelector: string): Recupera múltiples meta tags que coincidan con el selector de atributos proporcionado.
• updateTag(tag: MetaDefinition, selector?: string): Actualiza una meta tag existente, identificándola por su atributo name o property. Si no se especifica un selector, busca una meta tag coincidente con el nuevo contenido.
• removeTag(attrSelector: string): Elimina una meta tag basada en su selector de atributos.
• removeTagElement(meta: HTMLMetaElement): Elimina un elemento meta específico del documento.

Enlace a la documentación

Ejemplo: Implementación de Meta y Title en un componente

A continuación, veamos cómo podemos usar estos servicios en un componente para actualizar el título y los metadatos de la página cuando se carga una nueva vista.

1. Importar los servicios Meta y Title

Primero, importamos los servicios Meta y Title desde el paquete @angular/platform-browser.

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

2. Inyectar los servicios en el constructor

Inyectamos los servicios Meta y Title en el constructor del componente.

@Component({
  selector: 'app-seo-example',
  templateUrl: './seo-example.component.html',
})
export class SeoExampleComponent {
  constructor(private metaService: Meta, private titleService: Title) {}
  
  ngOnInit() {
    // Actualizar el título de la página
    this.titleService.setTitle('Título dinámico - Code in Progress');
    
    // Añadir o actualizar la descripción en los metadatos
    this.metaService.updateTag({ name: 'description', content: 'Esta es una descripción dinámica para mejorar el SEO de nuestra aplicación.' });
    
    // Añadir múltiples metatags
    this.metaService.addTags([
      { name: 'author', content: 'Code in Progress' },
      { name: 'keywords', content: 'Angular, SEO, Meta, Title' }
    ]);
  }
}

3. Explicación del ejemplo

En este ejemplo, hemos utilizado tanto el servicio Title como el servicio Meta en el método ngOnInit() del componente:

• Primero, llamamos a setTitle() para cambiar el título de la página a un valor dinámico.
• Después, usamos updateTag() para modificar la descripción de la página. Si ya existe una meta tag con el atributo name='description', la reemplazamos con el nuevo contenido.
• Finalmente, utilizamos addTags() para añadir varias meta tags, como las palabras clave y el autor de la página.

Además de estos métodos, puedes usar getTag() y getTags() si necesitas acceder a las meta tags ya existentes. También es posible eliminar metatags específicas con removeTag() o removeTagElement() si es necesario limpiar o actualizar información obsoleta.

Con estos servicios, puedes personalizar los metadatos de cada vista, garantizando que los rastreadores web capturen la información correcta en cada ruta. Así que, si estás desarrollando una aplicación Angular que depende de SEO, ¡no olvides utilizarlos.