Cómo Agregar Etiquetas Title, Meta Etiquetas y Recursos Externos en Angular para una Mejor Optimización SEO


Victor Arana Flores

17 Aug 2023

Cuando se trata de optimizar tu aplicación Angular para los motores de búsqueda (SEO), la estructura adecuada de las etiquetas HTML es esencial. En este artículo, aprenderemos cómo agregar etiquetas title, meta etiquetas y enlaces a recursos externos como hojas de estilo y scripts, para mejorar la visibilidad de tu sitio web en los resultados de búsqueda.

Agregar Etiqueta Title

La etiqueta title es uno de los elementos más importantes para el SEO. Proporciona un resumen conciso y relevante del contenido de la página. En Angular, podemos usar el servicio Title para cambiar dinámicamente el título de la página en función del componente actual.

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private titleService: Title) { }

  ngOnInit(): void {
    this.titleService.setTitle('Página de Inicio - Mi Sitio Web');
  }

}

Agregar Meta Etiquetas

Las meta etiquetas proporcionan información adicional sobre la página, como la descripción, las palabras clave y el autor. Podemos utilizar el servicio Meta para agregar o actualizar meta etiquetas en Angular.

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

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {

  constructor(private meta: Meta) { }

  ngOnInit(): void {
    this.meta.addTag({ name: 'description', content: 'Este es un artículo sobre optimización SEO en Angular.' });
    this.meta.addTag({ name: 'keywords', content: 'Angular, SEO, meta etiquetas, optimización' });
  }

}

Agregar Recursos Externos

La carga de recursos externos como hojas de estilo y scripts también es crucial para el SEO y el rendimiento de tu aplicación. Podemos utilizar el servicio Renderer2 para agregar enlaces a hojas de estilo y scripts externos.

import { Component, OnInit, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  constructor(private renderer: Renderer2) { }

  ngOnInit(): void {
    const link = this.renderer.createElement('link');
    this.renderer.setAttribute(link, 'rel', 'stylesheet');
    this.renderer.setAttribute(link, 'href', 'https://example.com/styles.css');
    this.renderer.appendChild(document.head, link);

    const script = this.renderer.createElement('script');
    this.renderer.setAttribute(script, 'src', 'https://example.com/script.js');
    this.renderer.appendChild(document.body, script);
  }

}

Conclusión

Optimizar tu aplicación Angular para SEO es esencial para asegurarte de que tu contenido sea visible en los motores de búsqueda. Al agregar etiquetas title, meta etiquetas y recursos externos, puedes mejorar la clasificación y la visibilidad de tu sitio web en los resultados de búsqueda. Utilizando los servicios y métodos proporcionados por Angular, puedes lograr esto de manera eficiente y efectiva.


1 comentarios

Inicia sesión para comentar

Comentarios:

  • Jose Carlos Valderrama

    Jose Carlos Valderrama hace 5 meses

    tengo una duda, yo tengo una web que estaba bien posicionada  en google, no tenia meta etiquetas ni keywords, estaba 3a en google en el buscador con las palabras que a mi me gustaban, debajo del titulo en google ponia las primeras frases de la web, y gracias a eso posiciono, un par de meses despues sin venir a cuento google me quito a descripcion y ahora ya no tengo el posicionamiento y me dijeron esto

     "No solo no tiene una meta descripción, tampoco tiene contenido textual relevante que permita al algoritmo mostrar un fragmento de texto de interés en los resultados. Lo mismo ocurre con las demás páginas del sitio, que además no se indexan porque tienen el mismo título que el home." 

    lo que yo no entiendo si nunca tuvo porque antes estaba bien posicionada y ahora ya no … que diferencia hay …

     

    respecto a tu articulo te queria preguntar, web esta hecha con angular, tendria que hacer en el TS de cada complemento creado lo del title, las metaetiquetas y el render para solucionar el problema???

    • Victor Arana Flores hace 5 meses

      Hola, José. Te recomendaría tomar un curso de Posicionamiento SEO para comprender mejor estos conceptos. El objetivo de este artículo es mostrar cómo se realiza desde la perspectiva de un programador, en lugar de explicar los fundamentos del funcionamiento del posicionamiento.

    • Jose Carlos Valderrama hace 5 meses

      claro es que yo lo quiero desde el punto de vista de un programador, llegue aqui por eso Cómo Agregar Etiquetas Title, Meta Etiquetas y Recursos Externos en Angular para una Mejor Optimización SEO

      deduzco entonces que en cada complemento de la pagina de angular que he programado debo hacer titles y meta tags en cada TS como explicas aqui 

    • Victor Arana Flores hace 5 meses

      Hola Jose, asi es. En cada uno debes poner etiquetas title. Puedes tomar como referencia como tengo los titles y meta descripciones en mi web.