Metaetiquetas HTML

Las metaetiquetas HTML son información invisible de la página en su cabecera que proporcionan información importante sobre la misma. Al proporcionar información sobre la estructura de la página, el tipo, la función y el idioma, las metaetiquetas no solo se incluyen en la visualización y la indexación, sino que también sirven como herramienta SEO para mejorar el posicionamiento en los motores de búsqueda.

¿Qué son las HTML meta tags?

Las metaetiquetas son etiquetas HTML especiales para la visualización, interpretación e indexación de páginas web por parte de navegadores y motores de búsqueda. Se sitúan en la cabecera de las páginas y no son visibles para los usuarios. Mediante el uso de <meta> en HTML, los desarrolladores pueden proporcionar propiedades a la página para mejorar su legibilidad por los motores de búsqueda y definir información como el idioma, el contenido, la estructura o la codificación de caracteres.

Las metaetiquetas son, por tanto, una herramienta esencial en HTML para optimizar los motores de búsqueda, mejorar la clasificación y controlar la visualización entre dispositivos. Aunque hoy en día la metainformación ya no es uno de los criterios de clasificación más importantes para las páginas web, el HTML title y la meta description siguen desempeñando un papel importante.

Los ámbitos de aplicación más importantes de las metaetiquetas HTML

Los ámbitos de aplicación más importantes de los metaelementos HTML son los siguientes:

• Optimización para motores de búsqueda: las metaetiquetas, como la descripción y el título, proporcionan a los motores de búsqueda información sobre el contenido y el enfoque de una página. De este modo, se puede resumir claramente el contenido de la página, despertar interés y generar clics.
• Indexación: metadatos como robots dan pistas a los motores de búsqueda sobre si una página debe indexarse o no.
• Visualización y presentación: las metaetiquetas pueden contener información e instrucciones sobre codificación de caracteres, visualización en dispositivos móviles o actualizaciones y redireccionamientos automáticos.
• Redes sociales: las redes sociales utilizan metaetiquetas específicas que deben tenerse en cuenta para una correcta visualización al compartir contenidos.
• Accesibilidad: los metadatos desempeñan un papel importante en la accesibilidad, ya que ayudan a los lectores de pantalla a clasificar los contenidos o a visualizarlos correctamente en distintos dispositivos mediante el elemento viewport.

¿Qué significado tienen las metaetiquetas HTML?

Hoy en día, los motores de búsqueda como Google ofrecen una clasificación temática muy específica y precisa basada en términos y preguntas de búsqueda. Antes, los metadatos eran mucho más importantes para el posicionamiento de una página web. Como era mucho más fácil manipular el posicionamiento con metaetiquetas y palabras clave, a veces se hacía un mal uso de los metadatos, por ejemplo, mediante el relleno con palabras clave.

Sin embargo, los metadatos y su etiquetado con metaetiquetas HTML no han perdido ni un ápice de su importancia para los buscadores modernos. Al contrario: si utilizas los metadatos de forma incorrecta, corres el riesgo de que te ignoren por completo. El uso correcto de metadatos relevantes como la etiqueta <title> y la meta descripción y el mantenimiento regular de los metadatos pueden seguir siendo un criterio decisivo para un buen posicionamiento permanente.

Las etiquetas meta HTML más importantes y su sintaxis

Las funciones que cumplen las etiquetas meta y para qué se utilizan dependen de su tipo. En las siguientes secciones hemos resumido algunas de las etiquetas meta más importantes.

Optimización para motores de búsqueda (SEO)

La optimización para motores de búsqueda es una de las funciones más importantes de <meta>. En particular, destacamos las siguientes etiquetas meta relevantes para SEO:

Title

Con el elemento <title> se explica de forma breve y concisa de qué trata una página web. En sentido estricto, no se trata de una etiqueta meta, sino de una etiqueta independiente que precede a todas las demás. Sin embargo, el título se menciona a menudo como parte de las etiquetas meta más importantes, ya que también es leído por los motores de búsqueda y utilizado como uno de los factores más importantes para el posicionamiento.

Como es el elemento en el que se hace clic en los resultados de búsqueda, es importante que el título sea claro y conciso, que atraiga el interés y que tenga la longitud adecuada para un anuncio completo.

Sintaxis:

<title>Título de la página</title>

Meta description

Aunque la meta descripción no desempeña un papel directo en el posicionamiento, al igual que el título es el primer punto de contacto con los usuarios y proporciona la información inicial que genera clics. La longitud correcta y elementos como iconos o símbolos que enfaticen términos relevantes o una CTA (Call-to-Action) también son importantes.

Sintaxis:

<meta name="description" content="Aquí está la meta descripción, que idealmente debería tener unos 150 caracteres.">

robots

Con el atributo HTML robots puedes dar a los motores de búsqueda las siguientes instrucciones SEO para indexar, seguir, snippets o guardar:

• index: la página puede estar indexada
• noindex: la página no puede indexarse
• follow: los rastreadores pueden seguir los enlaces de la página
• nofollow: los rastreadores no deben seguir los enlaces en la página
• nosnippet: el contenido no puede ser utilizado como fragmento destacado (Featured Snippet)
• noarchive: la página almacenada en la caché de Google no puede ser mostrada

Si no se especifica ningún dato robots, los motores de búsqueda lo interpretan como permiso para indexar, mostrar fragmentos o seguir enlaces. La gestión de la indexación con robots es, por tanto, una función muy importante de las etiquetas meta.

Ejemplo de sintaxis para una página que puede ser indexada y cuyos enlaces pueden seguir los rastreadores:

<meta name="robots" content="index, follow">

viewport

El atributo HTML viewport tiene una importancia fundamental para el diseño adaptativo de las páginas web. Aunque esta etiqueta meta en sí no tiene una relevancia SEO directa, la optimización móvil de las páginas web, es decir, el SEO móvil, sirve como un importante factor de clasificación. Con viewport le dices a un motor de búsqueda si tu página web es compatible con una visualización adaptable en diferentes dispositivos finales y se considera apto para móviles. Al mismo tiempo, con viewport se garantiza la correcta visualización de la página web en función del dispositivo final y, por tanto, se optimiza la usabilidad.

Sintaxis:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Codificación de caracteres con charset

Con la etiqueta meta charset se indica a los navegadores la codificación de caracteres utilizada para garantizar la correcta visualización del texto. Esto es importante si no has definido el juego de caracteres en la cabecera HTTP o si el navegador recupera los archivos HTML directamente de los discos duros en lugar de utilizar HTTP(S).

Sintaxis:

<meta charset="utf-8"/>

Almacenamiento en la caché con expires

Si no quieres prohibir completamente que se guarde en la caché, puedes usar expires para especificar una hora o un período de tiempo tras el cual los datos HTML guardados deberían expirar. En las aplicaciones web modernas, sin embargo, expires se utiliza muy raramente, ya que el almacenamiento en caché se controla a través de las cabeceras HTTP en la mayoría de los casos.

Sintaxis:

<meta http-equiv="expires" content="Tiempo de expiración en segundos"/>

Datos del autor y copyright

Las etiquetas meta HTML author y copyright pueden utilizarse para almacenar información sobre autor y copyright en el código fuente. Esto facilita la gestión de la página y crea transparencia sobre los últimos cambios en una página.

Sintaxis:

<meta name="author" content="Autor"/> 
<meta name="copyright" content="Titular-Copyright"/>

Palabras clave

Las palabras clave solían ser criterios de clasificación importantes a la hora de crear páginas web. Hoy en día, las palabras clave son mucho menos importantes y son ignoradas, al menos por Google, en términos de relevancia SEO y posicionamiento. Las palabras clave describen los puntos focales más importantes de una página, que idealmente coinciden con las intenciones de búsqueda de los usuarios. Si las palabras clave se siguen utilizando en determinadas industrias y sectores empresariales, puede ofrecer ventajas conocer las palabras clave relevantes. En principio, sin embargo, las palabras clave solo desempeñan un papel secundario en la clasificación.

Sintaxis:

<meta name="keywords" content="Keyword1, Keyword2, Keyword3…">