SEO en Angular: cómo dar poder a nuestra webapp con ngx-seo-helper

1. ¿Por qué usar ngx-seo-helper?

ngx-seo-helper ofrece muchas funcionalidades que pueden mejorar el rendimiento de la SEO de nuestra webapp:

1. ✅ Update meta tags: para actualizar rápidamente el contenido de las meta tags como title, description, keywords, de cada una de nuestras páginas.
2. ✅ Soporte para Open Graph y Twitter Card: Esto asegura que tu contenido se muestre de forma correcta en las redes sociales.
3. ✅ Structured Data con Json-LD: implementa los datos estructurados de Schema.org para mejorar la visibilidad del contenido en los motores de búsqueda.
4. ✅ URLs Canónicas: Gestiona las URLs canónicas para evitar problemas de contenido duplicado.
5. ✅ Configuración de idioma (hreflang): Mejora la internacionalización estableciendo atributos de idioma.
6. ✅ Schema de Migas de Pan (Breadcrumb): Mejora la visibilidad en buscadores con datos estructurados de navegación mediante migas de pan.
7. ✅ Función de Auditoría SEO: Verifica la presencia de etiquetas esenciales y asegúrate de que tus páginas estén optimizadas para motores de búsqueda.

2. Instalación de ngx-seo-helper

Para empezar con ngx-seo-helper, instanlémoslo via npm:

npm install ngx-seo-helper

3. Importa el módulo de Seo Helper en tu main module

Primero que todo, tendrás que importar tu NgxSeoModule en el módulo principal de tu aplicación. Normalmente suele ser el app.component.ts, si estamos trabajando con Typescript y Angular CLI

import { NgxSeoHelperModule } from 'ngx-seo-helper'; 
    @NgModule({
    imports: [
      NgxSeoModule,
      // other imports...
    ],
  })
  export class AppModule {}

4. Inyecta SEOService en tus componentes

Después de haber inicializado ngx-seo-helper, ya puedes empezar a implementarlo en cada una de las vistas en las que te hará falta.

Aquí tienes un ejemplo de como lo implementé en mi Home Page:

import { Component, OnInit } from '@angular/core';
  import { SEOService } from 'ngx-seo-helper';
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html'
  })
  export class HomeComponent implements OnInit {
    webUrl:string = 'https://giuliacapozzi.com';
    constructor(private seoService: SEOService) {}
    ngOnInit() {
      this.setSeoTags();
    }
    
    setSeoTags() {
      this.seoService.updateMetaTags({
        title: 'Giulia Capozzi - Web Developer',
        description: 'Desarrolladora web con experiencia en Angular, TypeScript y tecnologías modernas. Crea aplicaciones web rápidas y eficientes.',
        keywords: 'Angular, Node, SEO, Git, TypeScript, JavaScript, Web Development',
        author: 'Giulia Capozzi',
        imageUrl: 'https://example.com/image.jpg',
        url: this.webUrl,
        robots: 'index,follow'
      });

      this.seoService.setTwitterTags({
        cardType: 'summary_large_image',
        title: 'Giulia Capozzi - Web Developer',
        creator: 'Giulia Capozzi ',
        description: 'Desarrolladora web con experiencia en Angular, TypeScript y tecnologías modernas. Crea aplicaciones web rápidas y eficientes.',
        image: 'https://example.com/image.jpg'
      });

      this.seoService.setCanonicalUrl(this.webUrl);

      this.seoService.setRobotsTag('index,follow');

      this.seoService.setHreflang('es', this.webUrl);

      this.seoService.setStructuredData({
        "@context": "https://schema.org",
          "@type": "Person",
          "jobTitle": "Desarrolladora Web", 
          "knowsAbout": "Desarrollo de aplicaciones web, JavaScript, Angular, SEO",
          "description": "Giulia Capozzi es una desarrolladora web especializada en JavaScript y tecnologías frontend.",
          "name": "Giulia Capozzi",
          "url": this.webUrl,
      });

      this.seoService.auditSEO(); // Run SEO audit to check essential tags
    }
}

Podemos ver como se están ejecutando varios métodos:

• ⭐ updateMetaTags: Establece metaetiquetas comunes como el título, la descripción, las palabras clave y las etiquetas de Open Graph. Es un objeto que contiene propiedades como title (título), description (descripción), keywords (palabras clave), author (autor), imageUrl (URL de la imagen), url (URL de la página) y robots (directivas para los motores de búsqueda).
• ⭐ setTwitterTags(tags: { title: string; description: string; image: string; cardType: string }): El parámetro es un objeto que contiene todos los metadatos para una correcta lectura de la página en las redes sociales.
• ⭐ URL canónica: la URL canónica le indica a google que la indicada es la que debe de indexarse, y esto se hace para evitar una innecesaria duplicación de URLs.
• ⭐ setRobotTags: estamos indicando a los robots si queremos indexar y seguir la página en la que se encuentra. Cuidado en NO dejarlo en noindex si queremos que se indexe correctamente y no nos dé problemas en herramienta de monitoreo como Google Search Console.
• ⭐ setHreflang('es', this.webUrl); Comunicamos a los bots que el idioma que se habla en nuestra web es español.
• ⭐ setStructuredData: un objeto JSON con el schema de datos estructurados.

5. Structured data: ¿Para qué sirven?

Los structured data sirven para ayudar a los motores de búsqueda a entender de forma detallada el contenido de tu página web.

• 🔥 Mejora la visibilidad en buscadores mediante el uso de contenido enriquecido (rich results o rich snippets)
• 🔥 Suele aumentar el CTR: Click Through Rate: esto porque hace que tus contenidos en motores de búsqueda se vean más atractivos
• 🔥 Da contenido semántico: cada artículo de tu blog, receta, descripción de producto/evento - o lo que sea- recibe especificaciones semánticas que mejoran significativamente la indexación.

Si tu proyecto web necesita ser encontrado por los bots, es fundamental implementar una sólida estrategia de SEO on page para que las palabras claves sean alcanzables.

Ya tienes los metaData de tus páginas correctamente configurados. Ahora puedes empezar a implementar otros importantes aspectos para la indicización de tu página, como La creación de un sitemap dinámico en XML.