Optimizar la estructura HTML para SEO es crucial para mejorar el posicionamiento de tu sitio web en los resultados de búsqueda. Utilizar un marcado semántico SEO adecuado no solo ayuda a los motores de búsqueda a entender mejor tu contenido, sino que también mejora la experiencia de usuario.
En este artículo, exploraremos cómo la estructura HTML influye en el SEO de tu sitio web y qué etiquetas HTML son esenciales para un buen posicionamiento.
Discutiremos la importancia del marcado semántico y cómo puedes implementarlo para potenciar tu SEO on page. Además, te mostraremos ejemplos prácticos de código HTML y cómo las etiquetas correctas pueden hacer que tu contenido aparezca en los resultados de búsqueda de manera más efectiva.
¿Qué es la estructura HTML para SEO?
La estructura HTML para SEO se refiere a cómo se organiza el código HTML de tu sitio web para que sea más fácil de entender para los motores de búsqueda.
Una buena estructura HTML puede incluir tanto etiquetas semánticas, como meta etiquetas.
Las etiquetas semánticas se refieren al marcado utilizado por su significado y utilidad, por ejemplo, la etiqueta <body> para el contenido <head> para los meta datos, las etiquetas del <h1> al <h6> para marcar encabezados, elementos de párrafo <p> para párrafos, listas (ul , ol , dl , datalist o nav ) para listas, tablas, tablas de datos, menús, etc.
Para saber qué elementos semánticos ofrece HTML y cuál es su significado, puedes consultar las especificaciones de HTML5.
Las meta etiquetas por otro lado, son las que utilizamos para dar información a Google y otros motores de búsqueda sobre como interpretar, rastrear e indexar el contenido de manera eficiente. Generalmente son funcionales y se encuentran en la etiqueta <head> del sitio, como la meta etiqueta <title> y los atributos “description”, “canonical” y “robots”, etc..
El uso de meta etiquetas puede:
- Mejorar la experiencia de usuario en las búsquedas, dándole información que le permita elegir tu contenido.
- Mejor comprensión por parte de los motores de búsqueda, le permite clasificar tu contenido y mejorar su posicionamiento si es relevante.
- Mejora la accesibilidad para usuarios con capacidades diferentes.
Títulos y Encabezados
En HTML, los “head” o encabezados son elementos que se utilizan para estructurar y jerarquizar el contenido de una página web. Los encabezados van desde h1 hasta h6, siendo h1 el de mayor importancia y h6 el de menor.
Estos encabezados ayudan a los usuarios y a los motores de búsqueda a entender la estructura y el contenido de una página. A continuación, se explica cada uno de estos elementos:
- h1: Se utiliza para el título principal de la página. Solo debe haber un h1 por página, ya que representa el tema o título más importante del contenido.
- h2: Se utiliza para los subtítulos o secciones principales dentro del contenido. Puede haber varios h2 en una página.
- h3: Se utiliza para subsecciones dentro de las secciones definidas por h2.
<h1>Título Principal de la Página</h1>
<p>Este es un párrafo introductorio debajo del título principal.</p>
<h2>Sección Principal 1</h2>
<p>Contenido de la primera sección principal.</p>
<h3>Subsección 1.1</h3>
<p>Contenido de la primera subsección de la primera sección principal.</p>
<h2>Sección Principal 2</h2>
<p>Contenido de la segunda sección principal.</p>
Title Tags o meta título
Un meta título, también conocido como “title tag” en inglés, es una etiqueta HTML que define el título de una página web. Este título se muestra en la pestaña del navegador y en los resultados de búsqueda de los motores de búsqueda como Google.
El meta título es importante durante el proceso de optimización para motores de búsqueda, ya que les ayuda a entender de qué tema trata la página y a los usuarios, les ayuda a decidir si hacen clic en el enlace o si es la información que buscan.
Características clave del meta título
- El meta título se encuentra dentro de la etiqueta
<head>del código HTML de una página web. - Generalmente, se recomienda que el meta título tenga entre 45 y 55 caracteres para asegurarse de que se muestre completamente en los resultados de búsqueda.
- Los motores de búsqueda utilizan el meta título como uno de los factores principales para determinar el tema y la relevancia de una página.
- Un buen meta título debe ser descriptivo y atractivo para animar a los usuarios a hacer clic en el enlace cuando aparece en los resultados de búsqueda.
- Incluir palabras clave relevantes en el meta título puede mejorar la visibilidad de la página en los motores de búsqueda.
Ejemplo de un meta título en HTML:
<head>
<title>¿Cómo es la estructura básica de HTML para SEO?</title>
</head>
Meta descriptions o etiqueta de descripción SEO
La descripción SEO, o meta description en inglés, es una etiqueta HTML que proporciona un resumen breve y conciso del contenido de una página web. Esta descripción aparece en los resultados de búsqueda debajo del título y la URL de la página, y su principal objetivo es atraer a los usuarios para que hagan clic en el enlace.
Aunque no influye directamente en los rankings de búsqueda, una buena meta description puede mejorar la tasa de clics (CTR) y, por ende, el tráfico hacia el sitio web.
Características clave de la meta description.
- La “meta description” se encuentra dentro de la etiqueta
<head>del código HTML de una página web. - Se recomienda que la meta description tenga entre 150 y 160 caracteres para asegurar que se muestre completamente en los resultados de búsqueda.
- Debe ser relevante y describir con precisión el contenido de la página.
- Incluir palabras clave relevantes puede ayudar a que la descripción sea más atractiva para los usuarios y resalte en los resultados de búsqueda.
- Es beneficioso incluir una llamada a la acción que invite a los usuarios a hacer clic en el enlace.
<head>
<meta name="description" content="La manera de crear la estructura HTML para SEO influye en el posicionamiento en motores de búsqueda. Aprende cómo funcionan y cómo usarla.">
</head>
Anchor Text
El anchor text o texto ancla es el texto visible y clicable de un enlace en una página web. Este texto ancla es importante tanto para los usuarios como para los motores de búsqueda, ya que proporciona información sobre el contenido al que está vinculado el enlace.
<a href="https://www.ejemplo.com" target="_blank" rel="noopener">Visita nuestro sitio web</a>
Características del Anchor Text
- El enlace debe describir claramente la página de destino.
- Incluir palabras clave relevantes puede mejorar el SEO, ya que los motores de búsqueda utilizan el anchor text para entender el contexto del enlace.
- Debe ser fácilmente comprensible y natural dentro del contenido.
Enlace o Vínculo Interno
Los enlaces internos son vínculos que llevan a otras páginas dentro de tu sitio web.
- Ayudan a distribuir el “link juice” y mejorar la indexación, mejorando el SEO de las páginas enlazadas.
- Ayudan a los usuarios a encontrar información relevante y relacionada dentro del mismo sitio.
- Ayudan a los motores de búsqueda a entender la jerarquía y la estructura del sitio web.
Texto Alternativo o “Alt text”
El texto alternativo o “alt text” es una descripción breve y concisa de una imagen en una página web, incluida en el atributo alt del código HTML de la imagen.
Este texto tiene varios propósitos importantes, tanto para la accesibilidad como para el SEO (optimización para motores de búsqueda).
Ejemplo de Código HTML con Texto Alternativo:
< img src="https://endupla.com/uri/estructura-html-para-seo.webp" alt="Estructura HTML para SEO que se usa para mejorar el posicionamiento">
Características del Texto Alternativo.
- Proporciona una descripción de la imagen para las personas que utilizan lectores de pantalla debido a discapacidades visuales. Los lectores de pantalla leen el “alt text” en lugar de la imagen, permitiendo a los usuarios entender el contenido visual.
- Los motores de búsqueda no pueden ver imágenes, pero pueden leer el “alt text”. Incluir descripciones precisas y relevantes ayuda a los motores de búsqueda a indexar correctamente las imágenes, mejorando la visibilidad en los resultados de búsqueda de imágenes.
- Si una imagen no se carga correctamente, el alt text se mostrará en su lugar, proporcionando contexto sobre lo que debería estar ahí.
Tips para escribir un buen texto alternativo.
- Describe la imagen de manera clara y concisa.
- Asegúrate de que el “alt text” sea relevante para el contenido de la página.
- Incluye palabras clave de manera natural, pero evita el “keyword stuffing” (llenar el texto con palabras clave de forma forzada).
- No uses términos como “imagen de” o “foto de”, ya que los lectores de pantalla ya indican que se trata de una imagen.
Etiqueta Canonical
Una etiqueta canonical (también conocida como “canonical tag”) es una etiqueta HTML que se utiliza para indicar la versión preferida de una página web entre varias páginas con contenido duplicado o muy similar.
Esta etiqueta ayuda a los motores de búsqueda a entender cuál es la página principal o canónica, lo que es crucial para evitar problemas de contenido duplicado que pueden afectar negativamente al SEO.
Características y Función de la Etiqueta Canonical
- La etiqueta canonical se coloca dentro de la sección
<head>del código HTML de una página web. - Es común que varias URLs en un sitio web tengan contenido muy similar o idéntico. La etiqueta canonical señala a los motores de búsqueda cuál URL debe considerarse la original o principal.
- Ayuda a consolidar las señales de enlace (link juice) y la autoridad de página a la versión preferida, en lugar de dividirlas entre varias páginas.
Ejemplo de Etiqueta Canonical en HTML:
<head>
<link rel="canonical" href="https://endupla.com/blog-de-seo/preguntas-frecuentes/estructura-html-para-seo/">
</head>
En este ejemplo, la etiqueta canonical indica a los motores de búsqueda que “https://endupla.com/blog-de-seo/preguntas-frecuentes/estructura-html-para-seo/” es la versión preferida de la página.
Importancia de la Etiqueta Canonical
- Los motores de búsqueda penalizan los sitios con contenido duplicado, y la etiqueta canonical ayuda a evitar estas penalizaciones al clarificar cuál es la página original.
- Todas las señales de enlace de las páginas duplicadas se consolidan en la página canónica, lo que puede mejorar su ranking en los motores de búsqueda.
- Ayuda a los motores de búsqueda a indexar correctamente la página más relevante y a evitar confusiones con contenido duplicado.
Casos Comunes de Uso de la Etiqueta Canonical
- Sitios de comercio electrónico a menudo tienen múltiples URLs para el mismo producto debido a variaciones de filtros, clasificaciones, etc.
- Páginas con parámetros de seguimiento en la URL o con versiones de impresión.
- Artículos o blogs publicados en más de un sitio web.
Ejemplo Práctico de Implementación:
Supongamos que tienes dos URLs para el mismo producto en tu tienda en línea:
https://www.ejemplo.com/producto?color=rojohttps://www.ejemplo.com/producto?color=azul
Ambas páginas tienen el mismo contenido excepto por la variación de color. Para evitar problemas de contenido duplicado, podrías establecer una página canónica:
<head>
<link rel="canonical" href="https://www.ejemplo.com/producto">
</head>
Robots meta tags o meta robots no índex
Los Robots Meta Tag, también conocidos como meta robots ó etiqueta noindex, son etiquetas HTML que proporcionan instrucciones a los motores de búsqueda sobre cómo deben indexar y seguir (o no) una página web específica.
Estas etiquetas son especialmente útiles para controlar la visibilidad de ciertas páginas en los resultados de búsqueda y para gestionar el comportamiento de los motores de búsqueda en relación con el contenido del sitio.
Características de los robots Meta Tag
- Estas etiquetas se colocan dentro de la sección
<head>del código HTML de una página web. - Permiten especificar si una página debe ser indexada y si los enlaces en la página deben ser seguidos.
Principales directivas de robots Meta Tag
- noindex: Indica a los motores de búsqueda que no deben indexar la página. Esto significa que la página no aparecerá en los resultados de búsqueda.
- nofollow: Indica a los motores de búsqueda que no deben seguir los enlaces en la página. Esto significa que los enlaces no pasarán autoridad o “link juice” a las páginas de destino.
- index: Indica a los motores de búsqueda que deben indexar la página. Esta es la configuración predeterminada si no se especifica lo contrario.
- follow: Indica a los motores de búsqueda que deben seguir los enlaces en la página. Esta es la configuración predeterminada si no se especifica lo contrario.
¿Cuándo usar Noindex y Follow?
Si deseas que una página no sea indexada, pero que los enlaces en la página sean seguidos.
<head>
<meta name="robots" content="noindex, follow">
</head>
¿Cuándo usar los atributos noindex y nofollow?
Si deseas que una página no sea indexada y que los enlaces en la página no sean seguidos.
<head>
<meta name="robots" content="noindex, nofollow">
</head>
¿Cuándo se usa el Index y Nofollow?
Si deseas que una página sea indexada, pero que los enlaces en la página no sean seguidos.
<head>
<meta name="robots" content="index, nofollow">
</head>
Importancia y Uso de los Robots Meta Tag
- Permiten a los administradores de sitios web controlar qué páginas deben o no deben aparecer en los resultados de búsqueda. Esto es útil para páginas que no tienen valor SEO, como páginas de políticas, términos de servicio, páginas de inicio de sesión, etc.
- Permiten controlar la distribución de autoridad de enlace, decidiendo si los enlaces en una página deben contribuir a la autoridad de las páginas de destino.
- Ayudan a los motores de búsqueda a concentrar sus esfuerzos de rastreo en las páginas más importantes del sitio, mejorando la eficiencia del rastreo y la indexación.
Ejemplo Práctico: Imagina que tienes una página de confirmación de compra en tu tienda en línea que no deseas que aparezca en los resultados de búsqueda, pero tienes enlaces a otros productos y secciones relacionadas a las que quieres aumentarle la relevancia. Puedes usar la siguiente etiqueta meta robots:
<head>
<meta name="robots" content="noindex, follow">
</head>
Open Graph Tags y Twitter Cards
Las etiquetasOpen Graph TagyTwitter Cardson fragmentos de código HTML que permiten controlar cómo se muestra el contenido de tu sitio web cuando se comparte en redes sociales.
Estas etiquetas son esenciales para mejorar la presentación de tu contenido, aumentar el engagement y asegurar la consistencia de la marca en diferentes plataformas.
Las meta etiquetas de Facebook y las de Twitter pueden ser muchas. Tienen meta etiquetas para autor, tipo de contenido, ID de desarrolladores, y otros meta datos que pueden llegar a ser útiles.
En este caso utilizaremos solo las que necesitamos para asegurar que los usuarios tengan una mejor experiencia al momento de compartir las páginas de un sitio web.
Cómo funciona OpenGraph
og:title: Define el título del contenido que se compartirá.og:description: Proporciona una breve descripción del contenido.og:image: Especifica la URL de la imagen que se mostrará al compartir el contenido.og:url: Define la URL canónica del contenido.
Puedes encontrar más documentación en elsitio para webmasters de Facebook.
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="https://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
Cómo funciona la Twitter Card
Utilizar las etiquetas de TwitterCard le permite a los usuarios compartir enlaces en “X” obteniendo un diseñado que mejora la visualización de contenido. También se colocan en la sección <head> del HTML.
twitter:card: Define el tipo de tarjeta que se debe mostrar (por ejemplo,summary_large_image).twitter:title: Especifica el título del contenido para Twitter.twitter:description: Proporciona una descripción del contenido para Twitter.twitter:image: Especifica la URL de la imagen para Twitter.twitter:url: Define la URL canónica del contenido.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="History of #tbt on twitter">
<meta name="twitter:description" content="History of #tbt on twitter">
<meta name="twitter:image" content="blog.twitter.com/img/tbt-history.jpg">
<meta name="twitter:url" content="blog.twitter.com">
En resumen,
Utilizar una estructura HTML para SEO no solo se limita al uso de meta etiquetas, también debe implementarse un marcado semántico que le permita a los motores de búsqueda clasificar el contenido.
Las meta etiquetas SEO que vimos en este artículo le permite a los motores de búsqueda encontrar, clasificar, entender y mostrar el contenido en los resultados de busqueda según la relevancia del contenido. Varias de ellas pueden ayudar a mejorar el posicionamiento y otras mejoran la experiencia de usuario, paso fundamental en la atracción de tráfico organico.