Aunque herramientas como nuestro Creador de Páginas Web permiten diseñar y publicar un proyecto en línea sin escribir una sola línea de código HTML, comprenderlo y saber cuándo y para qué usarlo les da control. Saber qué hacen las etiquetas de una página web en HTML les ayudará a corregir detalles, mejorar la accesibilidad y el SEO y a comunicarse mejor con desarrolladores.
HTML significa HyperText Markup Language, y es el lenguaje estándar que describe la estructura de una página web. No es programación porque no ejecuta lógica: las etiquetas HTML para páginas web indican qué es cada parte del contenido (títulos, párrafos, enlaces, imágenes, formularios). Así, cuando el navegador lee esas marcas, es capaz de construir el documento que aparece en pantalla. Por eso los códigos HTML son la base sobre la que se apoya toda página web, porque aportan significado y ayudan a los lectores de pantalla y a buscadores.
En el contexto del SEO, las metaetiquetas o etiquetas meta son elementos esenciales para mejorar la visibilidad de una página en buscadores. Optimizar correctamente una etiqueta meta HTML, como el meta title y meta descripción, puede marcar la diferencia en el posicionamiento y en el CTR. Las metaetiquetas HTML son fragmentos de código que se insertan en la sección
de una página. A través de estos datos, puedes indicar aspectos como la temática, la descripción o configuraciones técnicas que ayudan a los motores de búsqueda a interpretar correctamente tu sitio. Aunque no son visibles directamente para los usuarios al navegar, las metaetiquetas funcionan como señales internas que comunican a Google qué es lo importante de tu contenido.¿Qué es la Meta Descripción?
La etiqueta meta description es un breve resumen del contenido de la página, contenido en la etiqueta HTML <meta name="description">, que aparece debajo del título en los resultados de búsqueda de Google. La etiqueta “description” de una URL describe de manera breve su contenido. Suele aparecer como resumen en Google y puede influir directamente en el clic del usuario.
Importancia para SEO y el Usuario
Aunque el texto de la etiqueta de descripción no tiene un impacto directo en el aumento del ranking, puede, sin embargo, impulsar tu tasa de clics (CTR), que en gran medida es considerada por los motores de búsqueda como una señal de posicionamiento positiva. La meta descripción no es un factor de clasificación SEO, pero tiene un impacto significativo en el CTR. Si los usuarios hacen clic a menudo en un resultado con clasificación baja y la retención en el contenido es alta, Google lo clasificará en mejores posiciones. Además de brindar información adicional sobre la página a los motores de búsqueda, las etiquetas de descripción brindan a los redactores de contenido la posibilidad de crear textos que capten la atención de los internautas para que hagan clic en el fragmento de tu página en los resultados de búsqueda. Ten en cuenta que la descripción debe tener cualidades para hacer clic y así despertar interés.
Lea también: IVA 21% Excel
Cómo Optimizar la Meta Descripción
- Usa la palabra clave principal de manera natural.
- Sé claro y persuasivo, anticipando el beneficio para el usuario.
- ¿Qué encontrará en la página?
- Es muy recomendable incluir la palabra clave principal por la que quieres posicionar el contenido.
- Crea meta descripciones completas, evitando usar puntos suspensivos, excepto en el caso de que quieras crear expectación al usuario e incitar al clic. Un buen ejemplo de un caso de este tipo es una empresa que ofrece servicios urgentes, como un cerrajero.
- Aprovecha el espacio para dar un buen motivo al usuario para que visite tu web.
- Cautiva al usuario con un buen copy y describe de forma precisa que tienes lo que está buscando.
- Crear falsas expectativas al redactar la descripción es contraproducente.
Ejemplo de Código HTML para Meta Descripción
A continuación, se muestra un ejemplo del código HTML de la meta descripción:
<meta name="description" content="Caracterología criminal: clasificación de caracteres · 2. Carácter apasionado (emotivo, activo, secundario)">
Meta Title (Etiqueta <title>)
El meta title es el título que debería aparecer en la SERP (Search Engine Results Page) y en la pestaña del navegador. Está contenido en la etiqueta HTML <title> y su función es resumir en pocas palabras el contenido de la página. Define el título de la página. La etiqueta “title” o título de la página proporciona tanto a Google, como a los usuarios, el tema principal sobre el que trata una URL concreta de una página web. Es uno de los factores de posicionamiento SEO más importantes y fáciles de optimizar. Los títulos tienen un impacto directo en el CTR de un resultado de búsqueda. La función de esta etiqueta es describir el contenido de la página de una manera breve y clara para que las personas sientan curiosidad por hacer clic y obtener más información.
Para los motores de búsqueda, las etiquetas de título ayudan a comprender mejor el tema de la página. Escribir un título atractivo junto con una descripción te ayudará a generar más tráfico a tus páginas. Ten en cuenta que la etiqueta title no se muestra en la página en sí, sino que solo aparece en los fragmentos de las SERP. Además de aparecer en los fragmentos de la página, las etiquetas de título también se muestran en las pestañas del navegador para informar rápidamente a los usuarios qué páginas están abiertas. Además de eso, las etiquetas de título se utilizan como texto de anclaje cuando publicas enlaces en las redes sociales, a menos que se utilice el marcado Open Graph.
Para evitar el truncamiento de la etiqueta title, limítate a una longitud de entre 60 y 70 caracteres. Los motores de búsqueda cortan cualquier texto que supere los 600 píxeles de longitud. Al escribir el título de la página debemos incluir la palabra clave principal por la que queremos posicionar esa URL concreta. Es recomendable incluir la keyword lo más a la izquierda posible. El meta título debe describir de manera breve, concisa y comprensible de qué trata la página. Una práctica muy habitual es incluir la marca al final del titular.
Ejemplo de Código HTML para Meta Title
<!DOCTYPE html><html><head><title>Título de la página</title></head><body><h1>Este es un encabezado</h1><p>Este es un párrafo.</p></body></html>
Otras Meta Etiquetas Relevantes para SEO
No todas las metaetiquetas tienen el mismo peso: algunas, como el meta title y meta descripción, son fundamentales para SEO, mientras que otras ayudan a controlar la indexación o la forma en que tu contenido se comparte.
Lea también: Guía IVA reducido
Etiqueta Robots
La etiqueta robots es un meta tag HTML que se inserta en la sección
de la página. Este comportamiento suele ser predeterminado, pero la etiqueta es útil para controlar la visibilidad de ciertas páginas. No todas las páginas deben indexarse (es decir, incluidas en los resultados de búsqueda): algunas solo son útiles para usuarios dentro del sitio (login, filtros, pruebas) y mostrarlas en Google podría confundir o afectar el SEO.Etiqueta Canonical
La etiqueta canonical indica a los motores de búsqueda cuál es la versión principal de una página cuando existen varias con contenido similar o duplicado dentro del mismo sitio. La canonical le indica a Google cuál de esas páginas es la versión principal que debe indexar y mostrar en los resultados de búsqueda, mientras que las demás URLs no se penalizan ni se consideran duplicadas, sino que heredan autoridad de la URL canonical. Esta etiqueta no tiene ningún aspecto de diseño aparte del hecho de que los usuarios no verán páginas web que no sean para ellos.
Etiqueta Hreflang
El tag hreflang indica a Google que existen múltiples versiones de la misma página en diferentes idiomas o regiones, ayudando a mostrar la versión correcta al usuario y mejorando la experiencia y las conversiones. Usa el formato correcto: hreflang=”idioma-país” (por ejemplo: en-us, it-it, fr-fr). ⚠️ Una configuración incorrecta del tag hreflang puede confundir a Google en lugar de ayudarlo.
Meta Keywords (Histórico)
Las meta keywords eran etiquetas HTML que servían para listar las palabras clave relevantes de una página. Aunque ya no son tan relevantes para los motores de búsqueda modernos, aún pueden ser utilizadas para conocer la temática del sitio web.
Meta Tags Open Graph
Los meta tags Open Graph controlan cómo se muestra tu página al compartirse en redes sociales (título, descripción, imagen y tipo de contenido). Mejoran la visibilidad, el engagement y el tráfico cualificado desde estas plataformas.
Lea también: ¿Cómo localizar tus XML del SAT?
Meta Etiqueta Viewport
Esta meta etiqueta te brinda la libertad de controlar la ventana gráfica (área visible de la página), el ancho y la escala con el objetivo de mostrarla con precisión en todas las pantallas. El código asegura que el ancho de la página siempre coincidirá con el ancho de la pantalla en el dispositivo del usuario. Estos datos ayudan a los navegadores de los motores de búsqueda a obtener la información que necesitan para controlar las dimensiones y la escala de la página. Hoy en día, la usabilidad de un sitio web juega un papel determinante en el ranking de búsqueda.
<meta name="viewport" content="width = device-width, initial-scale=1.0">
Alt Text en Imágenes
El Alt Text es un atributo de las imágenes (<img>) que describe su contenido visual. Sirve para accesibilidad (usuarios con lectores de pantalla), mostrar un texto de respaldo si la imagen no carga y ayudar a Google a indexar correctamente la imagen. Añadan siempre ‘alt’ con una descripción, ya que mejora la accesibilidad y sirve de reemplazo si no carga.
Estructura HTML Básica y Fundamentos
HTML significa HyperText Markup Language, y es el lenguaje estándar que describe la estructura de una página web. Las etiquetas HTML para páginas web indican qué es cada parte del contenido (títulos, párrafos, enlaces, imágenes, formularios). Así, cuando el navegador lee esas marcas, es capaz de construir el documento que aparece en pantalla. Por eso los códigos HTML son la base sobre la que se apoya toda página web, porque aportan significado y ayudan a los lectores de pantalla y a buscadores.
- Elementos y etiquetas: Un elemento suele tener etiqueta de apertura y cierre que hacen que el contenido quede ‘envuelto’ dentro. Algunos no se cierran, como ‘img’.
- Atributos: Añaden información extra (por ejemplo, ‘href’ o ‘src’) y se escriben como ‘nombre="valor"’. Usen comillas y valores claros.
- Anidamiento correcto: Coloca elementos dentro de otros sin cruzar cierres para mantener una jerarquía y evitar problemas.
- Estructura mínima: ‘’, ‘’, ‘’ y ‘’ guían al navegador y los lectores de pantalla.
- Semántica: Elijan etiquetas para código HTML por significado (títulos, listas, navegación), no solo por apariencia, así mejorarán la accesibilidad y el mantenimiento.
Etiquetas Fundamentales (<html>, <head>, <title>, <body>)
<html>, <head>, <title>: Estas tres etiquetas forman el marco del documento y le dicen al navegador cómo tratar la página, además de ayudar a buscadores y herramientas de accesibilidad a comprenderlo. Son obligatorias en cualquier HTML completo y se escriben al inicio del archivo, antes del contenido visible.
- <html>: Elemento raíz que envuelve toda la página y normalmente contiene ‘<head>’ y ‘<body>’.
- <head>: Guarda metadatos y recursos (CSS, scripts, meta) y se usa una sola vez, arriba.
- <title>: Define el título del documento, por lo que aparece en la pestaña y en marcadores, dentro del ‘<head>’.
<body>: El elemento ‘<body>’ contiene todo lo que el usuario ve y con lo que interactúa: textos, imágenes, enlaces, formularios, etc. Se coloca dentro de ‘<html>’ y después de ‘<head>’. En un documento completo solo debe existir un ‘<body>’, que es el que agrupa el contenido principal del sitio.
Encabezados HTML (<h1> - <h6>)
Las etiquetas ‘<h1>’ a ‘<h6>’ definen encabezados, desde el nivel más importante al menos relevante. Se usan para estructurar secciones y crear jerarquía de lectura. Utilicen ‘<h1>’ para el título principal y los demás para subsecciones, manteniendo un orden lógico sin saltos entre niveles consecutivos. Los encabezados HTML (<h1> a <h6>) estructuran tu contenido y ayudan a los motores de búsqueda a entender la jerarquía de la información. El <h1> suele ser el título principal de la página, mientras que los <h2> a <h6> organizan secciones y subsecciones. Para fines de SEO, asegúrate de usar solo una etiqueta de encabezado h1 en una página y asegúrate de ceñirte al principio de jerarquía. Los encabezados hacen que el texto se pueda escanear y sea más fácil de entender para los lectores humanos.
Buenas Prácticas y Errores Comunes con Meta Etiquetas y HTML
Un código HTML escrito se lee como un esquema claro y reduce errores. Además, facilita el SEO y la accesibilidad, incluso antes de aplicar CSS o JavaScript. Los fallos en HTML no siempre rompen la página, ya que el navegador intenta corregirlos. Aun así, pueden afectar a la accesibilidad, el SEO o los formularios, por eso les conviene saber cuáles son, ¡es la mejor forma de evitar caer en ellos!
Buenas Prácticas
- Validar el documento con el W3C Markup Validator para detectar etiquetas mal cerradas.
- Usar elementos semánticos cuando existan, evitando abusar de ‘div’ si hay alternativas claras para secciones.
- Mantener una jerarquía de títulos ordenada (h1, h2, h3) para lectura y SEO correctos.
- Describir imágenes con un ‘alt’ útil y enlaces con texto informativo, sin provocar clics genéricos.
- Comentar lo justo para entender el código rápido sin dudas en el futuro.
Errores Comunes
- Omitir ‘’ o anidar mal etiquetas activa ‘quirks mode’ y provoca comportamientos impredecibles en navegadores.
- No usar etiquetas semánticas y depender de ‘div’ reduce la información en el árbol de accesibilidad.
- Saltarse niveles de encabezado (h1-h4) complica la navegación para lectores de pantalla y buscadores.
- Imágenes sin ‘alt’, lo que hace que el contenido se pierda para usuarios con lector de pantalla activo.
- Enlaces con texto vago, como ‘clic aquí’ o ‘ver más’, dificultan entender el destino fuera de contexto rápido.
- Incluso pequeños errores en las meta etiquetas pueden afectar la visibilidad de tu página en los buscadores.
Herramientas para la Optimización de Meta Etiquetas
Afortunadamente, hay una serie de herramientas especializadas en el mercado que puedes utilizar para mantenerte al tanto de los títulos, descripciones, encabezados y otros metadatos de tu página. Por ejemplo, con la ayuda de la herramienta de Auditoría SEO On-page de SE Ranking, puedes profundizar en páginas específicas y descubrir qué tan bien están optimizadas para tus palabras clave objetivo. SiteGround AI Studio te permite generar automáticamente meta title, meta description y otros meta tags a partir de tu contenido, optimizándolos para mejorar el CTR y mantener coherencia en múltiples páginas de manera sencilla. Para asegurarte de que los datos estructurados estén configurados correctamente en tu sitio web, puedes probarlos de forma gratuita utilizando Schema Markup Validator.
Tabla de Meta Etiquetas Esenciales
| Metaetiqueta | Descripción |
|---|---|
| <title> | Define el título del documento, que se muestra en la barra de título del navegador y en los resultados de búsqueda. |
| <meta charset="UTF-8"> | Especifica la codificación de caracteres utilizada en el documento. UTF-8 es la codificación más comúnmente utilizada para admitir caracteres multilingües. |
| <meta name="description" content=""> | Proporciona una breve descripción del contenido del sitio web. Es utilizado por los motores de búsqueda para mostrar información sobre el sitio en los resultados de búsqueda. |
| <meta name="keywords" content=""> | Especifica palabras clave relacionadas con el contenido del sitio web. Aunque no es tan relevante para los motores de búsqueda modernos, aún puede ser utilizado para conocer la temática del sitio web. |
| <meta name="viewport" content=""> | Define cómo se debe ajustar y escalar el contenido en dispositivos móviles. Es importante para lograr un diseño responsive. |
| <meta name="author" content=""> | Especifica el nombre del autor del documento. |
| <meta name="copyright" content=""> | Indica los derechos de autor del documento. |
| <meta name="robots" content=""> | Indica a los motores de búsqueda si deben indexar y seguir los enlaces dentro del documento. |