Etiquetas HTML para SEO

Optimizar el HTML de tu página web es fundamental para mejorar su posicionamiento en buscadores y ofrecer una buena experiencia de usuario. Algo que conseguimos mediante el uso correcto de las etiquetas HTML para SEO. Si quieres aprender a identificarlas y aplicarlas correctamente, aquí te explico todo lo que sé.

Lo que aprenderás aquí
¿Aún no me sigue en Youtube?
Suscríbete a mi canal y aprende a posicionar tu web, con videos claros y al grano.

Fundamentos del HTML

Vamos a empezar por asentar las bases para aquellos que no comprendan del todo bien sobre qué estamos hablando. El HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web.

Qué es el HTML
El HTML es el esqueleto que da estructura al contenido en internet, indicando a los navegadores cómo deben mostrar texto, imágenes, videos, enlaces y otros elementos.
html seo

¿Qué es una etiqueta HTML?

En HTML, una etiqueta es un comando que define un elemento de la página. Las etiquetas están encerradas entre signos de menor que < y mayor que >, y suelen venir en pares: una etiqueta de apertura y otra de cierre. Por ejemplo:

<p>Esto es un párrafo</p>

Aquí lo que ocurre es lo siguiente:

  • <p> es la etiqueta de apertura que define un párrafo.
  • </p> es la etiqueta de cierre que indica el final del párrafo.
  • Esto es un párrafo es el contenido o texto que estará dentro del elemento.
Cuidado
Mucho cuidado con escribir más etiquetas de las necesarias o acabarás generando un tamaño excesivo de DOM.

Atributos de una etiqueta HTML

Por otro lado, las etiquetas o tags HTML pueden incluir atributos que aportan información adicional o modifican su comportamiento. Por ejemplo:

<a href="https://www.google.com" target="_blank">Ir a Google</a>

Aquí lo que ocurre es lo siguiente:

  • Etiqueta <a>: crea un enlace.
  • Atributo href: especifica la URL a la que redirige el enlace.
  • Atributo target: indica cómo se abre el enlace (en este caso, en una nueva pestaña).

El etiquetado HTML semántico

El etiquetado HTML semántico se refiere al uso de tags que tienen un significado claro y específico sobre el tipo de contenido que contienen. Básicamente, estas etiquetas no solo definen cómo se verá un elemento en una página, sino también cuál es su propósito dentro de la estructura del documento. Esto facilita que los motores de búsqueda, navegadores y tecnologías de asistencia (como lectores de pantalla) comprendan mejor el contenido de la página.

No semántico

Ejemplos: <div> o <span>

<div>Encabezado principal</div>

Semántico

Ejemplos: <header> o <footer>

<header>Encabezado principal</header>

Etiquetas SEO

Las etiquetas SEO son elementos de HTML que ayudan a los motores de búsqueda a comprender mejor el contenido de una página web y cómo debería mostrarse en los resultados de búsqueda (SERPs). Básicamente, son piezas clave para optimizar una página tanto en términos de visibilidad como de relevancia para las consultas de los usuarios.

  • Encabezados (<h1> a <h6>): organizan la estructura del contenido jerárquicamente.
  • Atributo alt de las imágenes (<img alt="">): ayuda a estructurar el contenido enlazando páginas relevantes internas o externas.
  • Enlaces internos y externos (<a>): proporciona una descripción alternativa para las imágenes, lo cual mejora la accesibilidad y ayuda en el SEO de búsquedas de imágenes.
  • Etiqueta canonical (<link rel="canonical">): indica a los motores de búsqueda cómo deben indexar o rastrear una página.
  • Meta robots (<meta name="robots">): ayuda a evitar el contenido duplicado indicando la URL preferida.
  • Etiquetas Open Graph (<meta property="og:...">): optimiza cómo se muestra el contenido en redes sociales como Facebook o LinkedIn.
  • Etiqueta de título (<title>): define el título de la página (title HTML) que se muestra en la pestaña del navegador y en los resultados de búsqueda.
  • Meta descripción (<meta name="description">): proporciona un resumen del contenido de la página.
  • Etiqueta (<hreflang>): indica a los motores de búsqueda el idioma y la región para los que está diseñada una página web.
  • Negritas <strong> y <b>: la negrita se aplica usando etiquetas HTML como <strong> o <b>, y su principal función es dar énfasis visual a ciertas palabras o frases dentro del contenido.

Vamos a ver cada una de ellas en mayor detalle.

¡No te quedes atrás en Google!

Únete a mi lista y recibe tips de SEO periódicamente.

Encabezados (<h1> a <h6>)

Los encabezados son etiquetas HTML utilizadas para organizar el contenido de una página en niveles jerárquicos, donde la etiqueta <h1> representa el tema principal y <h6> los temas menos relevantes. Estas etiquetas permiten estructurar el contenido de forma lógica, facilitando su lectura tanto para los usuarios como para los motores de búsqueda.

Para los usuarios, los encabezados hacen que el contenido sea más fácil de escanear y comprender, ayudándolos a encontrar rápidamente la información que buscan. Para los motores de búsqueda, indican la importancia relativa de cada sección, siendo el <h1> un indicador clave del tema central de la página. Por ejemplo:

<h1>Guía completa sobre SEO</h1>  
<h2>Qué es el SEO</h2>

Que los errores técnicos no arruinen tus esfuerzos

screaming frog tutorial basico

Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.

¡Comienza mi curso de Screaming Frog gratis hoy!

Atributo alt de las imágenes (<img alt="">)

El atributo alt es un texto alternativo que se incluye dentro de la etiqueta <img> para describir el contenido de una imagen. Este atributo es esencial para mejorar la accesibilidad, ya que permite a los lectores de pantalla transmitir información sobre la imagen a personas con discapacidades visuales. Además, el texto alternativo se muestra si la imagen no se carga correctamente.

ver atributo alt html

Para los motores de búsqueda, el atributo alt ayuda a comprender el contexto y contenido de las imágenes, lo que es clave para el posicionamiento en búsquedas de imágenes. También refuerza la relevancia temática de la página, especialmente si el texto alt incluye palabras clave relacionadas. Por ejemplo:

<img src="grafico-seo.png" alt="Gráfico mostrando tendencias de SEO en 2025">

Enlaces internos y externos (<a>)

La etiqueta <a> permite crear enlaces que conectan diferentes páginas, ya sea dentro del mismo sitio (enlaces internos) o hacia otros sitios web (enlaces externos). Estos enlaces no solo facilitan la navegación para los usuarios, guiándolos a contenido relevante o complementario, sino que también organizan y conectan las diferentes secciones de un sitio web.

En términos de SEO, los enlaces internos distribuyen la autoridad entre las páginas del sitio, ayudando a que los motores de búsqueda comprendan la estructura del contenido. Por otro lado, los enlaces externos. que conseguirmos a través del link building, permiten mejorar la relevancia al señalar fuentes confiables. Por ejemplo:

<link href="https://www.mi-sitio.com/guia-seo">

Etiqueta canonical (<link rel="canonical">)

La etiqueta canonical se utiliza para informar a los motores de búsqueda cuál es la versión principal o preferida de una página cuando existen múltiples versiones similares o duplicadas. Su propósito es evitar problemas de contenido duplicado, consolidar la autoridad SEO y asegurar que el tráfico se dirija a la URL correcta.

De cara al usuario es cierto que no tiene un impacto visible, pero garantiza que siempre se muestre la versión más relevante del contenido en los resultados de búsqueda.

<link rel="canonical" href="https://www.mi-sitio.com/guia-seo">

Meta robots (<meta name="robots">)

La metaetiqueta robots le dice a los motores de búsqueda si deben indexarla o seguir sus enlaces. Es especialmente útil para controlar qué contenido deseas que aparezca o no en los resultados de búsqueda.

<meta name="robots" content="noindex, nofollow">

A continuación te explico cada una de las posibles opciones:

  • index: instruye a los motores de búsqueda a indexar la página, es decir, incluirla en su base de datos para que aparezca en los resultados de búsqueda. Este es el comportamiento por defecto si no se especifica la etiqueta.
  • noindex: indica que la página no debe ser incluida en los resultados de búsqueda. Es útil para páginas que no deseas que sean públicas, como páginas de inicio de sesión o versiones duplicadas de contenido.
  • follow: permite a los motores de búsqueda rastrear y transmitir autoridad a los enlaces de la página. Este es el comportamiento predeterminado, incluso si no se incluye en la etiqueta.
  • nofollow: indica que los motores de búsqueda no deben rastrear ni transmitir autoridad SEO a los enlaces de la página. Es útil para evitar promocionar enlaces externos irrelevantes o de baja calidad.

Así mismo, éstas etiquetas son combinables entre sí para generar diversas combinaciones:

  • index, follow: La página será indexada y sus enlaces serán rastreados.
  • index, nofollow: La página será indexada, pero los enlaces no transferirán autoridad SEO.
  • noindex, follow: La página no será indexada, pero los enlaces seguirán siendo rastreados. Aunque a la larga Google bot deja de rastrearlo y las páginas acaban siendo huérfanas a efectos prácticos.
  • noindex, nofollow: Ni la página será indexada, ni los enlaces serán rastreados.

Etiquetas Open Graph (<meta property="og:...">)

Las etiquetas Open Graph son metaetiquetas diseñadas para controlar cómo se presenta el contenido de una página en redes sociales como Facebook, LinkedIn y Twitter. Definen elementos clave como el título, la descripción y la imagen de vista previa que aparecen cuando alguien comparte un enlace.

Para los usuarios, mejoran la experiencia visual en redes sociales, haciendo que los enlaces sean más atractivos y clicables. Para los motores de búsqueda, aunque no impactan directamente el SEO, contribuyen al tráfico social. Un ejemplo sería:

<meta property="og:title" content="Guía completa de etiquetas SEO">

Etiqueta de título (<title>)

La etiqueta <title> define el título de la página web, que aparece tanto en la pestaña del navegador como en los resultados de búsqueda. Si bien es cierto que existe mucha controversia ya que hay gente que indica que no afecta al posicionamiento orgánico, la realidad es que afecta al CTR que ves en Google Search Console, lo cual indirectamente afecta al SEO.

De cara a los usuarios, un título claro y atractivo mejora la experiencia, ayudándolos a identificar rápidamente de qué trata una página. Un ejemplo optimizado sería:

<title>Guía completa sobre SEO para principiantes</title>

Meta descripción (<meta name="description">)

La meta descripción proporciona un resumen breve del contenido de la página que se muestra en los resultados de búsqueda, justo debajo del título. De nuevo, aunque no afecta directamente el posicionamiento, influye en el CTR (tasa de clics), ya que puede motivar al usuario a hacer clic en el enlace.

Un resumen conciso y relevante mejora la experiencia del usuario al saber qué esperar del contenido. Para los motores de búsqueda, sirve como una guía para destacar la relevancia de la página en una consulta específica. Un ejemplo sería:

<meta name="description" content="Aprende a optimizar tu página con las mejores etiquetas SEO. Mejora tu visibilidad en buscadores con esta guía completa.">

Etiqueta hreflang (<link rel="alternate" hreflang="...">)

La etiqueta hreflang se usa para indicar el idioma y la región objetivo de una página web, siendo clave para sitios multilingües o multirregionales. Esto evita confusiones entre versiones similares y asegura que los usuarios vean la página más relevante según su idioma o ubicación.

Para los motores de búsqueda, ayuda a evitar contenido duplicado y garantiza que la versión adecuada aparezca en los resultados. Un ejemplo de uso sería:

<link rel="alternate" hreflang="es-MX" href="https://www.mi-sitio.com/mx/">

Negritas (<strong> y <b>)

Las etiquetas <strong> y <b> permiten resaltar texto en negrita, pero con diferencias. <strong> tiene un valor semántico, indicando importancia al contenido, mientras que <b> solo añade énfasis visual sin significado adicional.

Para los usuarios, destacan información clave dentro del texto. Para los motores de búsqueda, <strong> puede ayudar a identificar palabras relevantes relacionadas con las palabras clave. Por ejemplo:

<strong>SEO para principiantes</strong>

Diferencia entre <strong> y <b>:

  • <strong>: tiene un valor semántico. Le dice a los motores de búsqueda que el texto tiene relevancia dentro del contenido, lo que puede influir en cómo lo interpretan.
  • <b>: solo añade formato visual (negrita) sin indicar importancia semántica.

Otras etiquetas

Aunque ya hemos visto el etiquetado SEO de mayor impacto, existen otras etiquetas importantes que también cumplen un objetivo en la forma con la que estructuramos el contenido. Para que las tengas en cuenta, aquí quiero mostrarte otras tags:

quí tienes una tabla con otras etiquetas relevantes para SEO que no han sido mencionadas hasta ahora y que son clave para mejorar la optimización de un sitio web:

EtiquetaDescripción
<meta name="viewport">Adapta el diseño de la página a diferentes dispositivos y tamaños de pantalla, mejorando la experiencia móvil.
<meta charset="UTF-8">Define la codificación de caracteres de la página, necesaria para mostrar caracteres especiales correctamente.
<meta name="author">Identifica al autor del contenido de la página, útil para personalizar páginas con contenido firmado.
<meta http-equiv="refresh">Indica un tiempo de espera antes de redirigir a otra página.
<sitemap> en robots.txtIndica la ubicación del sitemap XML para facilitar el rastreo del sitio.
Cursiva (<i>)Elemento no semántico que se utiliza para estilizar texto sin añadir énfasis semántico, como nombres en latín, términos técnicos o fragmentos de otro idioma.
Cursiva (<em>)Elemento semántico que añade énfasis al contenido, indicando que es relevante o importante en el contexto.
Tachado (<s>)Elemento no semántico que se usa para texto que ha perdido relevancia, como precios o información obsoleta.
Tachado (y <del>)Elemento semántico que indica contenido eliminado, con la intención de reflejar un cambio en el contenido original.
<meta property="article:..."> (Facebook Instant Articles)Específica metadatos avanzados para artículos en redes sociales.

Vista esta tabla quizá te interese aprender cómo poner negrita, cursiva y subrayado en HTML.

Buenas prácticas en la codificación HTML para SEO

Ya para terminar, aquí quiero dejarte un par de consejos que quiero que me gustaría que tuvieras en cuenta, de cara a trabajar las HTML SEO tags:

  • Usa etiquetas semánticas como <header>, <article>, <footer> y <section> para estructurar correctamente el contenido.
  • Optimiza los títulos con la etiqueta <title> y asegúrate de que cada página tenga un título único y relevante.
  • Incluye meta descripciones claras y atractivas con <meta name="description"> para mejorar el CTR en los resultados de búsqueda.
  • Añade atributos alt a las imágenes con <img alt="..."> para mejorar la accesibilidad y el posicionamiento en búsquedas de imágenes.
  • Usa enlaces internos con anchor text descriptivo en <a href="..."> para mejorar la navegación y distribuir autoridad SEO entre las páginas de tu sitio.
  • Implementa la etiqueta canonical con <link rel="canonical"> en páginas con contenido duplicado para evitar problemas de indexación.
  • Configura correctamente la etiqueta hreflang con <link rel="alternate" hreflang="..."> en sitios multilingües para indicar el idioma y la región de cada página.
  • Minifica tu código HTML, CSS y JavaScript para mejorar los tiempos de carga y ofrecer una mejor experiencia al usuario. En otras palabras, el WPO en WordPress.
  • Valida tu código HTML utilizando herramientas como el W3C Validator (validator.w3.org) para corregir errores y asegurar un código limpio.
  • Usa la etiqueta <meta name="viewport"> para que el diseño de tu página sea responsive y se adapte correctamente a dispositivos móviles.

Sergio Canales SEO

Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!

Sergio Canales

Ingeniero industrial y amante del SEO para nichos. Me encanta crear proyectos, posicionarlos y monetizarlos

Subir