Las etiquetas HTML son conocidas por todo programador web. Es difícil conocer todas pero al menos las principales son conocidas por todos. Otro tema es que sean conscientes del valor real que tienen para el SEO y la web semántica y les saquen todo el partido en este campo. No todos los programadores tienen conocimientos en SEO, aunque sean básicos.
Sin embargo, para los especialistas en SEO puede que no resulten tan familiares, pero deberían serlo si quieren potenciar el posicionamiento de una web y deberán estar vigilantes a ellas.
Al menos las principales etiquetas HTML que afectan al SEO y que vamos a repasar en este artículo.
Tabla de Contenidos
¿Qué son las etiquetas HTML?
Las etiquetas HTML son fragmentos de código que se pueden usar para describir nuestro contenido a los motores de búsqueda y los navegadores como Chrome, Firefox, Safari o Edge. Podemos usar etiquetas HTML para resaltar las partes importantes de nuestros textos, para describir imágenes e incluso para dar instrucciones a los robots de los motores de búsqueda.
Las etiquetas HTML también se utilizan para influir en la forma en que aparecen nuestras páginas en los resultados de búsqueda. Con la ayuda de ciertas etiquetas, podemos convertir fragmentos de búsqueda regulares en fragmentos enriquecidos, y tal vez incluso en fragmentos destacados en las búsquedas. Y, a medida que nuestros fragmentos de búsqueda se vuelven más avanzados, pueden asegurar mejores posiciones SERP y atraer más tráfico. En definitiva, utilizar adecuadamente las etiquetas HTML hará que aprovechemos lo que se llama la web semántica.
¿Siguen siendo importantes las etiquetas HTML para el SEO hoy en día?
Sin lugar a dudas. Y cuidar las etiquetas HTML siempre debe estar en tu lista de tareas.
Algunos dicen que los motores de búsqueda se han vuelto demasiado inteligentes para las etiquetas HTML. Dicen que los motores de búsqueda no necesitan ayuda para entender nuestro contenido. Pero no es exactamente así.
Primero, aunque la inteligencia artificial ha avanzado mucho en la comprensión del contenido, aún no es perfecta. Todavía hay un margen de error considerable y todavía necesitamos etiquetas HTML bien utilizadas para asegurarnos de que todo nuestro contenido se interprete como debe ser.
En segundo lugar, ayudar a los motores de búsqueda a comprender nuestro contenido no es la única función de las etiquetas HTML. También mejoran la experiencia del usuario, crean llamativos fragmentos de búsqueda, resuelven problemas de contenido duplicado y hacen cumplir las reglas de rastreo.
Así que todo lo que podamos ayudar a interpretar nuestra web a los motores de búsqueda, más sencillo y eficaz será la correcta indexación de todo el contenido.
1. Etiqueta de título
Los motores de búsqueda utilizan las etiquetas de título para determinar el tema de una página y mostrarlo en las SERP. En HTML, una etiqueta de título se define de la siguiente manera:
<title>El título de la página</title>Mientras que en una búsqueda, una etiqueta de título se ve así:
Valor SEO del título de la página
Las etiquetas de título solían ser de gran importancia para los motores de búsqueda. El título de la página es su tema principal, por lo que Google miraría el título para decidir si la página es relevante para una consulta de búsqueda.
Naturalmente, los especialistas en SEO comenzaron a llenar las etiquetas de título con tantas palabras clave como fuera posible, tratando de hacer que sus páginas fueran relevantes para múltiples consultas. Como respuesta, Google comenzó a castigar el relleno de palabras clave y otras técnicas obsoletas de SEO , por lo que las páginas con títulos fraudulentos perdieron su clasificación en la búsqueda.
Hoy en día, dado que Google ha cambiado a la búsqueda semántica , el valor de una etiqueta de título optimizada es aún menor. De hecho, Google se ha vuelto tan bueno en la comprensión de nuestras páginas, que a veces reescribe nuestros títulos para nosotros. Así es, es posible que establezca un título determinado para su página y luego Google muestre un título diferente en los resultados de búsqueda. Aunque todavía es una ocurrencia rara, puede suceder cuando:
- El título está lleno de palabras clave. Google podría corregir un título de spam si la página en sí tiene contenido de calidad. No es necesario desperdiciar buen contenido solo porque cometió el error de agregar algunas palabras clave adicionales a su título.
- El título no coincide con una consulta. Google puede elegir su página para una consulta en particular incluso si su título no coincide con esta consulta. En este caso, el título a veces se puede reescribir para SERP. Es obvio que no puede escribir un título que coincida con todas las consultas posibles. Sin embargo, si ve que Google reescribe su título para consultas de gran volumen, considere revisarlo.
- El título es demasiado largo o demasiado corto. En 2021, Google confirmó que implementó la Actualización del título de la página . Los algoritmos comenzaron a reemplazar los títulos con algo más si los títulos eran demasiado cortos, demasiado largos o tenían algunos signos de puntuación especiales, por ejemplo, punto y coma. Por ejemplo, si un título era demasiado largo, el motor de búsqueda usaba encabezados H1 en su lugar. Si era demasiado corto, Google le agregaba el nombre de la marca.
- Hay algunos títulos alternativos. Facebook y Twitter tienen sus propias etiquetas en la sección <head> de su página, por lo que si usa los títulos alternativos para estas redes sociales, Google también puede usarlas en lugar de su etiqueta de título.
Como optimizar el título de una página
Longitud del título
Google tiene un cierto límite en la cantidad de caracteres de título que puede mostrar en SERP. Este límite no es exacto, cambia según el tamaño de su pantalla. Como regla general, los títulos que tienen menos de 60 caracteres caben en la mayoría de las pantallas.
Si tu título no se ajusta a una pantalla en particular, Google lo acortará. Se vería así:
No es necesariamente malo que tu título sea interrumpido. A veces, incluso puede tener un efecto positivo en el CTR. Los títulos truncados crean un suspense y despiertan la curiosidad entre los usuarios, por lo que se animan a visitar la página.
La única vez que un título truncado puede ser un problema es cuando la parte visible del título parece no ser relevante para la consulta. Por lo tanto, no es necesario que todo el título sea visible, pero es importante que la parte visible incluya su palabra clave principal.
Palabras clave en el título
Tener palabras clave en los títulos sigue siendo importante: así es como comunica la relevancia de su página a los usuarios. Pero, si incluye demasiadas palabras clave, Google degradará su página o reescribirá su título para que sea menos spam.
La mejor práctica actual es incluir solo una palabra o frase clave por título y luego completar el resto del título con expresiones típicas del marketing. Por ejemplo:
Las 10 mejores motos eléctricas para cualquier presupuesto | Experto en motos
El título tiene una frase corta de palabras clave hacia el principio. También vemos que es una lista, porque dice 10 principales, hay una marca al final para comunicar autoridad y el título dice cualquier presupuesto, que es solo un punto de venta genérico.
Marca en un título
En caso de que tengas una marca conocida o quieras potenciarla, es una buena idea usarla en el título. Cuando los usuarios ojean la página de resultados, es más probable que elijan algo que reconozcan.
Si no tienes una marca establecida, no verá ningún beneficio inmediato al incluirla en el título. Sin embargo, puede ayudarlo a generar reconocimiento de marca con el tiempo, por lo que eventualmente comenzarás a ver los beneficios, aunque pueden pasar años.
2. Etiqueta de meta descripción
La meta descripción es un breve párrafo de texto que se utiliza para describir tu página en los resultados de búsqueda. En HTML, una etiqueta de meta descripción se ve así:
<meta name="description" content="La descripción de la página">Mientras que en las SERP se ve así:
Valor SEO de la meta descripción
La función de la meta descripción es similar al título. Proporciona un poco más de detalles sobre tu página y ayuda a los usuarios a decidir si visitar tu página o no.
Aunque la meta descripción no es un factor de clasificación directo, puede ser de ayuda. Si tu meta descripción es relevante y atractiva, más usuarios harán clic en tu fragmento y, eventualmente, Google podría considerar darle una mejor posición en el ranking.
Aunque, al igual que con los títulos, Google se reserva el derecho de reescribir tu meta descripción. De hecho, sucede muy a menudo: la mayoría de las meta descripciones que ves en SERP han sido creadas por Google y no por los propietarios de sitios web.
Como explicó John Mueller, las metadescripciones se ajustan con frecuencia para que coincidan incluso con el más mínimo cambio en la consulta del usuario. Entonces, Google realmente te está haciendo un favor. Muestra diferentes meta descripciones para diferentes usuarios y mejora la relevancia de sus fragmentos de búsqueda.
Como optimizar la meta descripción
Aunque Google a menudo reescribe las metadescripciones, todavía hay una buena cantidad de descripciones originales que se muestran en SERP. No lo dejes al azar, no confíes en Google para generar tu meta descripción por ti, porque podría no hacerlo. Y si no es así, te quedas con un fragmento mal optimizado y un bajo rendimiento en la búsqueda. Por último, pero no menos importante, una meta descripción atractiva y bien escrita probablemente aumentará su tasa de clics orgánicos .
Longitud de la meta descripción
No existe un límite técnico en la longitud de la meta descripción, pero Google generalmente mostrará solo los primeros 160 caracteres en su fragmento. El consejo es el mismo que con la etiqueta de título: hazlo tan largo como quieras, pero asegúrate de que tus palabras clave y otra información importante se mencionen más cerca del principio.
Palabras clave de meta descripción
Hay más espacio en una meta descripción, por lo que está bien usar más de una palabra clave. La mejor práctica actual es utilizar variaciones de la palabra clave que hayas colocado en el título.
Aunque puedes usar más palabras clave en la descripción, se recomienda no usar más de dos o tres. Mantenlo natural, no te esfuerces por incluir una palabra clave más donde no sea coherente.
Además, cuando usas comillas dobles en el HTML de la meta descripción, Google cortará este texto en las comillas cuando lo muestre en SERP. Por lo tanto, es mejor eliminar todos los caracteres alfanuméricos de tus meta descripciones.
3. Encabezados
Los encabezados (H1-H6) se utilizan para dividir una página en secciones o capítulos. Cada encabezado es como un pequeño título dentro de la página. En HTML, un encabezado se ve así:
<h1>Un encabezado de tu página</h1>Por ejemplo, en esta al principio de esta misma página que estás leyendo, aparece una tabla de contenidos con los encabezados que aparecen en está página de mi blog.
Valor SEO de los encabezados
La función inicial de los encabezados era mejorar la experiencia del usuario. Cuando la página está organizada correctamente con encabezados, a los usuarios les resulta más fácil navegar por el contenido, saltándose capítulos irrelevantes y encontrando las cosas importantes. Y si los usuarios están contentos, Google está contento.
Hoy en día, el papel de los encabezados está mucho más avanzado. Desde la introducción de la indexación de pasajes, Google puede usar ciertas secciones de su página como un resultado de búsqueda independiente.
Por ejemplo, supongamos que alguien le pregunta a Google qué valor SEO tienen los encabezados en HTML, Google podrá tomar esta misma sección y presentarlo como un resultado de búsqueda independiente.
Así que, si tus encabezados están optimizados para la búsqueda, cada uno de ellos es elegible para convertirse en un resultado de búsqueda independiente. Es básicamente como tener páginas dentro de páginas.
Como optimizar los encabezados HTML
Jerarquía de encabezados
Tradicionalmente, solo hay un encabezado H1 por página y es el título de tu página. Sin embargo, no es lo mismo que la etiqueta del título. La etiqueta de título se muestra en los resultados de búsqueda, mientras que el encabezado H1 se muestra en la parte superior de tu contenido. Una diferencia real es que no hay límite de caracteres para el encabezado H1, por lo que puedes hacerlo más largo que tu etiqueta de título. O puedes hacerlos iguales. Tú decides.
En el navegador, el título se muestra en el texto de la pestaña donde se muestra la página, mientras que el encabezado H1 se visualizará dentro del contenido.
Luego están los encabezados H2, que se utilizan para dividir su contenido en capítulos. Luego, los encabezados H3, que se utilizan para dividir los capítulos en subcapítulos. Y puede seguir la misma lógica hasta H6, pero generalmente no se recomienda ir más allá de H3-H4. Las páginas con muchos niveles de encabezado se vuelven demasiado desordenadas y son más difíciles de seguir por el usuario si no está justificado su uso.
Palabras clave de encabezados
¿Recuerdas que cada uno de tus encabezados puede ser un resultado de búsqueda independiente? Para que esto sea posible, debe escribir cada encabezado como si fuera un título de página. Incluye una palabra clave que sea relevante para la sección de la página y exprese su encabezado como si fuera una consulta.
Puedes fijarte, por ejemplo, en los encabezados utilizados en esta página o las demás entradas de este blog.
Sintaxis paralela
A veces, Google puede tomar tus encabezados y convertirlos en un fragmento destacado de tipo lista. Para que tus encabezados sean elegibles para un fragmento de lista, deben seguir una sintaxis paralela. Significa que todos sus encabezados deben estar redactados de manera similar, por ejemplo, todos deben comenzar con un verbo o todos deben ser frases nominales. También ayuda si todos los encabezados del mismo nivel tienen una longitud similar y están organizados en una lista numerada. Aquí tienes un ejemplo:
4. Atributo texto alternativo en las imágenes
El atributo de texto alternativo es parte de una etiqueta de imagen y proporciona una descripción para una imagen. En HTML puede verse así:
<img src="url" alt="Descripción de la imagen">Valor SEO del texto alternativo
El texto alternativo juega un papel importante en la optimización de imágenes . Hace que tus imágenes sean accesibles tanto para los motores de búsqueda (diciéndoles lo que significa una imagen en particular) como para las personas (mostrando un texto alternativo en caso de que una imagen en particular no se pueda cargar o ayudando a los lectores de pantalla a transmitir imágenes).
El principal beneficio en términos de optimización de búsqueda es que los textos alternativos optimizados ayudarán a que sus imágenes se clasifiquen en la búsqueda de imágenes. Y aunque la inteligencia artificial se ha vuelto bastante buena leyendo imágenes, una descripción escrita ayuda a cerrar la brecha restante.
Así también podemos atraer a usuarios que utilicen un buscador de imágenes como el de Google.
Como optimizar
No dejes las etiquetas alt vacías
Aprovechar esta oportunidad adicional para obtener una clasificación más alta mediante la optimización de la imagen. Verifica si hay textos alternativos vacíos. Hay herramientas que los detectan por ti.
Priorizar imágenes
Si tienes muchas imágenes publicadas, no tienes que optimizar cada una de ellas. Presta atención a las que transmiten algún dato útil, no a las que se usan para decorar. Las imágenes útiles son imágenes de productos, capturas de pantalla de procesos, su logotipo, infografías, diagramas, etc.
Agrega palabras clave a tus atributos alternativos
Los textos alternativos son una oportunidad más para utilizar las palabras clave objetivo. Como todo, sin excesos y sin forzar. Escribe la descripción que proporciona contexto a su contenido y usa una palabra clave donde sea adecuado. Las imágenes optimizadas para palabras clave funcionarán muy bien en combinación con los factores que los motores de búsqueda tienen en cuenta al clasificar las páginas.
5. Etiquetas de Graph
Las etiquetas Open Graph (OG) se colocan en la sección <head> de una página y permiten que cualquier página web se convierta en un objeto rico en las redes sociales. Fue presentado por primera vez por Facebook en 2010 y reconocido por otras plataformas de redes sociales importantes (LinkedIn, Twitter, etc.)
En HTML, puede verse así:
<meta name="og:title" property="og:title" content="El título">Valor SEO
Las etiquetas OG le permiten controlar cómo se representa la información sobre tu página cuando se comparte a través de los canales sociales. Esta posibilidad puede ayudarlo a mejorar el rendimiento de sus enlaces en las redes sociales, generando así más clics y aumentando las conversiones.
Como optimizar
Título original
Sí, esta es otra etiqueta con el título de tu página. Así que ahora tienes tres títulos diferentes: uno es para búsqueda (etiqueta de título), uno es para su sitio web (H1) y el tercero es para redes sociales (título OG). Puedes copiar los otros títulos y mantener las cosas sencillas, o bien, puedes crear un título separado para compartir en redes sociales.
Ten en cuenta que debe tener entre 60 y 90 caracteres, de lo contrario, puede truncarse.
Tipo OG
Usa esta etiqueta para describir qué tipo de objeto estás compartiendo: un sitio web, una publicación, un video, una empresa, etc. Puedes consultar la lista completa aquí .
Esta etiqueta se considera importante cuando su página tiene el botón Me gusta. Puede ser útil determinar si su contenido aparecerá en la sección de interés del usuario de Facebook en caso de que le «guste».
En la mayoría de los casos, el tipo es «sitio web», porque en su mayoría comparte enlaces a sitios web.
Descripción original
Esta es muy similar a la etiqueta de meta descripción. Sin embargo, no se mostrará en las SERP, se mostrará como resumen cuando se comparta su página. Por esta razón, no tiene sentido intercalar tus palabras clave en esta descripción en particular.
Tu tarea principal aquí es hablar a tu audiencia potencial y generar más clics.
En cuanto a la longitud, se considera una buena práctica mantenerla en torno a los 200 caracteres.
Imagen original
Una imagen hará que tu enlace para compartir sea mucho más atractivo. Se acepta algo de texto sobre la imagen, pero intenta colocarlo en el medio de una imagen, ya que algunas plataformas recortarán los bordes.
La resolución recomendada para la imagen OG es de 1200×627 píxeles y el tamaño de hasta 5 MB.
Una vez que hayas terminado con sus metaetiquetas OG, puedes verificar cómo se ve todo con la ayuda de Open Graph Object Debugger , una herramienta creada por Facebook.
Tarjetas de X (Twitter)
Las tarjetas de Twitter son muy similares a las etiquetas OG (título, descripción, imagen, etc.), pero son de uso exclusivo de X / Twitter. Aunque ahora los tweets pueden exceder los 140 caracteres, estas tarjetas son una buena extensión que permite que su tweet se destaque entre la multitud de tweets de texto comunes.
Tarjeta de resumen. Además del tweet original, hay una vista previa del contenido de su página, lo cual es bueno para resaltar publicaciones de blog, productos, noticias, etc.
Título: 70 caracteres
Descripción: 200 caracteres
Imagen: 120x120px, hasta 1MB
Tarjeta de resumen con una imagen grande. Esta tarjeta es similar a la anterior, pero contiene una imagen más grande. La imagen también puede incluir algún texto que transmita el punto principal del contenido de su página, una llamada a la acción o algo que realmente provoque hacer clic.
Título: 70 caracteres
Descripción: 200 caracteres
Imagen: 280x150px, hasta 1MB
Tarjetas de jugador. Estas tarjetas permiten a los usuarios reproducir videos o audios dentro de un tweet.
Descripción: 200 caracteres
Vídeo: H.264, perfil básico, nivel 3.0, hasta 640 x 480 píxeles a 30 fps.
Audio: AAC, perfil de baja complejidad
Tarjetas de aplicación. Estas tarjetas permiten a los usuarios descargar aplicaciones móviles directamente desde un tweet. Presentan un nombre, una descripción, un icono, una calificación y un precio.
Título: renderizado desde la ID de la aplicación
Descripción: 200 caracteres
Imagen: renderizada desde la ID de la aplicación
Hay que tener en cuenta que solo se admite un tipo de tarjeta por página.
Una vez que esté listo con los elementos de su tarjeta de Twitter, deberá configurar las tarjetas y luego validarlas con un validador de tarjetas .
6. Etiqueta de robots
Una etiqueta de robots es un elemento en el HTML de una página que informa a los motores de búsqueda qué páginas de su sitio deben indexarse y cuáles no. Sus funciones son similares a robots.txt, pero robots.txt da sugerencias. Mientras que las etiquetas de robots dan instrucciones.
En HTML, puede verse así:
<meta name="robots" content="index, follow">Valor SEO de la etiqueta robots
No es que una etiqueta de robots pueda ayudarte a mejorar tus clasificaciones en buscadores, pero puedes usarla para bloquear la indexación de algunas páginas irrelevantes.
Por ejemplo, puedes tener algunas páginas con contenido bastante escaso que no le interesa que se indexen en la búsqueda, pero que te gustaría conservar. En este caso, puedes agregar una etiqueta noindex para esta página.
Como optimizar la metaetiqueta robots
Dirigirse a los bots por su nombre
Usa robots si quieres dirigirte a todos los bots, pero usa nombres de bot individuales si quieres dirigirte a un bot en particular. Los nombres de bots individuales se usan comúnmente para prohibir que los bots maliciosos rastreen tu sitio web.
Parámetros de robots
Google comprende y respeta los siguientes parámetros en su etiqueta de robots:
- Noindex. Evita que los motores de búsqueda indexen una página.
- Nofollow. Evita que el motor de búsqueda siga TODOS los enlaces de la página.
- Follow. Los enlaces en la página deben seguirse incluso si la página no es indexada;
- Noimageindex. Las imágenes de esta página no se indexarán.
- Noarchive. Evita que una copia en caché de la página aparezca en los resultados de búsqueda.
7. Etiqueta canónica
Cuando tiene algunas páginas con contenido idéntico, puede usar una etiqueta canónica para indicar a los motores de búsqueda qué página debe priorizarse.
En HTML, puede verse así:
<link href="URL" rel="canonical">Valor SEO de canonical
En primer lugar, te evita tener contenido duplicado. El contenido duplicado no es necesariamente malo, pero puede ser sospechoso para los motores de búsqueda.
En segundo lugar, previene la canibalización. Si tiene dos páginas similares y ambas se indexan, comienzan a competir entre sí en los resultados de búsqueda en vez de aunar fuerzas.
Como optimizar
En caso de que tengas algunas URL con contenido idéntico, especifica un elemento <link rel=»canonical»> en el HTML de la página.
8. Marcado de esquema
Por último, pero no menos importante, está el marcado Schema. Se puede agregar a tu código para informar a los motores de búsqueda sobre todo tipo de información: tus datos de contacto, precios de productos, ingredientes de recetas, entidades y mucho más.
Valor SEO
El marcado de esquema se usa para señalar información específica en una página y Google puede usar esta información para crear fragmentos enriquecidos. Por ejemplo, si aplicas Schema a una página de recetas, Google sabrá el tiempo de cocción, los ingredientes, la cantidad de reseñas e incluso la cantidad de calorías de la receta. Y usará la información para crear estos resultados más vistosos.
Estos se denominan fragmentos enriquecidos. Hoy en día, tenemos artículos, productos, eventos, libros, películas y alrededor de una docena de otros esquemas que pueden mejorar la apariencia de su búsqueda.
Como optimizar
El esquema puede complicarse un poco y es mejor hacerlo mediante un asistente de marcado de datos estructurados.
