Me­tae­ti­que­tas HTML

Las me­tae­ti­que­tas HTML son in­fo­r­ma­ción invisible de la página en su cabecera que pro­po­r­cio­nan in­fo­r­ma­ción im­po­r­ta­n­te sobre la misma. Al pro­po­r­cio­nar in­fo­r­ma­ción sobre la es­tru­c­tu­ra de la página, el tipo, la función y el idioma, las me­tae­ti­que­tas no solo se incluyen en la vi­sua­li­za­ción y la in­de­xa­ción, sino que también sirven como he­rra­mie­n­ta SEO para mejorar el po­si­cio­na­mie­n­to en los motores de búsqueda.

¿Qué son las HTML meta tags?

Las me­tae­ti­que­tas son etiquetas HTML es­pe­cia­les para la vi­sua­li­za­ción, in­te­r­pre­ta­ción e in­de­xa­ción de páginas web por parte de na­ve­ga­do­res 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 de­sa­rro­lla­do­res pueden pro­po­r­cio­nar pro­pie­da­des a la página para mejorar su le­gi­bi­li­dad por los motores de búsqueda y definir in­fo­r­ma­ción como el idioma, el contenido, la es­tru­c­tu­ra o la co­di­fi­ca­ción de ca­ra­c­te­res.

Las me­tae­ti­que­tas son, por tanto, una he­rra­mie­n­ta esencial en HTML para optimizar los motores de búsqueda, mejorar la cla­si­fi­ca­ción y controlar la vi­sua­li­za­ción entre di­s­po­si­ti­vos. Aunque hoy en día la me­tai­n­fo­r­ma­ción ya no es uno de los criterios de cla­si­fi­ca­ción más im­po­r­ta­n­tes para las páginas web, el HTML title y la meta de­s­cri­p­tion siguen de­sem­pe­ña­n­do un papel im­po­r­ta­n­te.

Los ámbitos de apli­ca­ción más im­po­r­ta­n­tes de las me­tae­ti­que­tas HTML

Los ámbitos de apli­ca­ción más im­po­r­ta­n­tes de los me­tae­le­me­n­tos HTML son los si­guie­n­tes:

• Op­ti­mi­za­ción para motores de búsqueda: las me­tae­ti­que­tas, como la de­s­cri­p­ción y el título, pro­po­r­cio­nan a los motores de búsqueda in­fo­r­ma­ción sobre el contenido y el enfoque de una página. De este modo, se puede resumir cla­ra­me­n­te el contenido de la página, despertar interés y generar clics.
• In­de­xa­ción: metadatos como robots dan pistas a los motores de búsqueda sobre si una página debe indexarse o no.
• Vi­sua­li­za­ción y pre­se­n­ta­ción: las me­tae­ti­que­tas pueden contener in­fo­r­ma­ción e in­s­tru­c­cio­nes sobre co­di­fi­ca­ción de ca­ra­c­te­res, vi­sua­li­za­ción en di­s­po­si­ti­vos móviles o ac­tua­li­za­cio­nes y re­di­re­c­cio­na­mie­n­tos au­to­má­ti­cos.
• Redes sociales: las redes sociales utilizan me­tae­ti­que­tas es­pe­cí­fi­cas que deben tenerse en cuenta para una correcta vi­sua­li­za­ción al compartir co­n­te­ni­dos.
• Ac­ce­si­bi­li­dad: los metadatos de­sem­pe­ñan un papel im­po­r­ta­n­te en la ac­ce­si­bi­li­dad, ya que ayudan a los lectores de pantalla a cla­si­fi­car los co­n­te­ni­dos o a vi­sua­li­zar­los co­rre­c­ta­me­n­te en distintos di­s­po­si­ti­vos mediante el elemento viewport.

¿Qué si­g­ni­fi­ca­do tienen las me­tae­ti­que­tas HTML?

Hoy en día, los motores de búsqueda como Google ofrecen una cla­si­fi­ca­ción temática muy es­pe­cí­fi­ca y precisa basada en términos y preguntas de búsqueda. Antes, los metadatos eran mucho más im­po­r­ta­n­tes para el po­si­cio­na­mie­n­to de una página web. Como era mucho más fácil manipular el po­si­cio­na­mie­n­to con me­tae­ti­que­tas 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 eti­que­ta­do con me­tae­ti­que­tas HTML no han perdido ni un ápice de su im­po­r­ta­n­cia para los bu­s­ca­do­res modernos. Al contrario: si utilizas los metadatos de forma in­co­rre­c­ta, corres el riesgo de que te ignoren por completo. El uso correcto de metadatos re­le­va­n­tes como la etiqueta <title> y la meta de­s­cri­p­ción y el ma­n­te­ni­mie­n­to regular de los metadatos pueden seguir siendo un criterio decisivo para un buen po­si­cio­na­mie­n­to pe­r­ma­ne­n­te.

Las etiquetas meta HTML más im­po­r­ta­n­tes y su sintaxis

Las funciones que cumplen las etiquetas meta y para qué se utilizan dependen de su tipo. En las si­guie­n­tes secciones hemos resumido algunas de las etiquetas meta más im­po­r­ta­n­tes.

Op­ti­mi­za­ción para motores de búsqueda (SEO)

La op­ti­mi­za­ción para motores de búsqueda es una de las funciones más im­po­r­ta­n­tes de <meta>. En pa­r­ti­cu­lar, de­s­ta­ca­mos las si­guie­n­tes etiquetas meta re­le­va­n­tes 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 in­de­pe­n­die­n­te que precede a todas las demás. Sin embargo, el título se menciona a menudo como parte de las etiquetas meta más im­po­r­ta­n­tes, ya que también es leído por los motores de búsqueda y utilizado como uno de los factores más im­po­r­ta­n­tes para el po­si­cio­na­mie­n­to.

Como es el elemento en el que se hace clic en los re­su­l­ta­dos de búsqueda, es im­po­r­ta­n­te 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 de­s­cri­p­tion

Aunque la meta de­s­cri­p­ción no desempeña un papel directo en el po­si­cio­na­mie­n­to, al igual que el título es el primer punto de contacto con los usuarios y pro­po­r­cio­na la in­fo­r­ma­ción inicial que genera clics. La longitud correcta y elementos como iconos o símbolos que enfaticen términos re­le­va­n­tes o una CTA (Call-to-Action) también son im­po­r­ta­n­tes.

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 si­guie­n­tes in­s­tru­c­cio­nes SEO para indexar, seguir, snippets o guardar:

• index: la página puede estar indexada
• noindex: la página no puede indexarse
• follow: los ra­s­trea­do­res pueden seguir los enlaces de la página
• nofollow: los ra­s­trea­do­res 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 al­ma­ce­na­da en la caché de Google no puede ser mostrada

Si no se es­pe­ci­fi­ca ningún dato robots, los motores de búsqueda lo in­te­r­pre­tan como permiso para indexar, mostrar fra­g­me­n­tos o seguir enlaces. La gestión de la in­de­xa­ción con robots es, por tanto, una función muy im­po­r­ta­n­te de las etiquetas meta.

Ejemplo de sintaxis para una página que puede ser indexada y cuyos enlaces pueden seguir los ra­s­trea­do­res:

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

viewport

El atributo HTML viewport tiene una im­po­r­ta­n­cia fu­n­da­me­n­tal para el diseño ada­p­ta­ti­vo de las páginas web. Aunque esta etiqueta meta en sí no tiene una re­le­va­n­cia SEO directa, la op­ti­mi­za­ción móvil de las páginas web, es decir, el SEO móvil, sirve como un im­po­r­ta­n­te factor de cla­si­fi­ca­ción. Con viewport le dices a un motor de búsqueda si tu página web es co­m­pa­ti­ble con una vi­sua­li­za­ción adaptable en di­fe­re­n­tes di­s­po­si­ti­vos finales y se considera apto para móviles. Al mismo tiempo, con viewport se garantiza la correcta vi­sua­li­za­ción de la página web en función del di­s­po­si­ti­vo final y, por tanto, se optimiza la usa­bi­li­dad.

Sintaxis:

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

Co­di­fi­ca­ción de ca­ra­c­te­res con charset

Con la etiqueta meta charset se indica a los na­ve­ga­do­res la co­di­fi­ca­ción de ca­ra­c­te­res utilizada para ga­ra­n­ti­zar la correcta vi­sua­li­za­ción del texto. Esto es im­po­r­ta­n­te si no has definido el juego de ca­ra­c­te­res en la cabecera HTTP o si el navegador recupera los archivos HTML di­re­c­ta­me­n­te de los discos duros en lugar de utilizar HTTP(S).

Sintaxis:

<meta charset="utf-8"/>

Al­ma­ce­na­mie­n­to en la caché con expires

Si no quieres prohibir co­m­ple­ta­me­n­te que se guarde en la caché, puedes usar expires para es­pe­ci­fi­car una hora o un período de tiempo tras el cual los datos HTML guardados deberían expirar. En las apli­ca­cio­nes web modernas, sin embargo, expires se utiliza muy raramente, ya que el al­ma­ce­na­mie­n­to 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 uti­li­zar­se para almacenar in­fo­r­ma­ción sobre autor y copyright en el código fuente. Esto facilita la gestión de la página y crea tra­n­s­pa­re­n­cia 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 cla­si­fi­ca­ción im­po­r­ta­n­tes a la hora de crear páginas web. Hoy en día, las palabras clave son mucho menos im­po­r­ta­n­tes y son ignoradas, al menos por Google, en términos de re­le­va­n­cia SEO y po­si­cio­na­mie­n­to. Las palabras clave describen los puntos focales más im­po­r­ta­n­tes de una página, que idea­l­me­n­te coinciden con las in­te­n­cio­nes de búsqueda de los usuarios. Si las palabras clave se siguen uti­li­za­n­do en de­te­r­mi­na­das in­du­s­trias y sectores em­pre­sa­ria­les, puede ofrecer ventajas conocer las palabras clave re­le­va­n­tes. En principio, sin embargo, las palabras clave solo de­sem­pe­ñan un papel se­cu­n­da­rio en la cla­si­fi­ca­ción.

Sintaxis:

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