5 cosas que puedes hacer con el tag meta de HTML

El tag meta se utiliza para almacenar una información en la página web. En esencia, trata de la información de los datos. Su propósito es que los navegadores y motores de búsqueda entiendan y conozcan mejor nuestra página. Como desarrolladores web, estamos acostumbrados a establecer la descripción de página, el autor o las palabras clave a través de la etiqueta meta. Sin embargo, el tag meta puede hacer otras funciones que seguramente desconozcas. En este artículo he compilado 5 características del tag meta de las que es posible que no hayas oído hablar de ellas antes.

Controlar la caché del navegador

Cuando visitas una página, esta se almacena en la caché para que se cargue mucho más rápido en futuras visitas. Es posible que te hayas topado con el caso en el que tras recargar y recargar una página, no es posible ver los cambios que has implementado. Esto es debido a que el navegador solamente está mostrando la página en caché, en lugar de la que está en producción. Puedes impedir esto si desactivas la caché del navegador utilizando la etiqueta meta. Para desactivar la caché del navegador puedes utilizar:

<meta http-equiv="Cache-Control" content="no-store" /> 

Este tag está soportado en Firefox, Chrome y Microsoft Edge. De hecho en Internet Explorer se le puede sacar más jugo, deshabilitando más características utilizando valores y especificaciones.

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />

Puedes establecer la fecha de expiración para definir cuando el navegador debe mostrar la página en producción, la que se aloja en el servidor, en vez de mostrar la que está almacenada en caché.

<meta http-equiv="expires" content="Fri, 18 Jul 2014 1:00:00 GMT" />

El ejemplo anterior indica que el documento se considera expirado después de la fecha y la hora especificadas. Si lo ajustas a "0", el navegador buscará un nuevo documento fresco en cada visita.

Establecer cookies

Al igual que la memoria caché, las cookies son una pequeña pieza de información de los sitios que has visitado que se almacena en el navegador. Las distintas páginas web utilizan las cookies almacenadas para adaptar las funcionalidades que utilizan. Un ejemplo de lo más común es cuando haces una compra en una tienda online. Si has añadido un par de artículos al carrito, aunque abandones la web, cierres el navegador, o lo que sea; los artículos permanecerán en el carrito. Para establecer las cookies con el tag meta puedes utilizar:

<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Day, DD-MMM-YY HH:MM:SS ZONE">

name=data es el nombre de las cookies que determinan los valores establecidas en las mismas. path es la ruta del documento. El valor de expired indica el tiempo y la fecha en el que las cookies se eliminarán de tu equipo. Si dejas el expired en blanco, las cookies se eliminarán una vez cierres el navegador.

<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Thursday, 01-Jan-2015 00:00:00 GMT">

Refrescar la web

Puedes configurar una página para que se refresque después de cierto periodo de tiempo. meta http-equiv="refresh" especifica un retraso en segundos para que el navegador actualice una página automáticamente. La especificación del meta-tag que puedes ver a continuación, hará que el navegador refresque la página cada 5 segundos.

<meta http-equiv="refresh" content="5">

Redirección

También podemos utilizar el meta tag refresh para redireccionar una página a un destino específico. El siguiente ejemplo nos llevará a example.com cuando permanezcas en la página 5 segundos.

<meta http-equiv="refresh" content="5; url=http://example.com/">

Transiciones en las páginas

También puede aplicar transiciones a tus páginas web con el tag meta de una manera similar a PowerPoint. Si quieres implementra transiciones en tu web puedes implementar el código que aparece a continuación:

<meta http-equiv="page-enter" content="revealtrans(duration=seconds,transition=num)" />
<meta http-equiv="page-exit" content="revealtrans(duration=seconds,transition=num)" />
<meta http-equiv="page-enter" content="blendTrans(duration=sec)" />

Ten en cuenta que esto sólo funciona en el antiguo Internet Explorer, ya que page-enter y page-exit son propiedad de Microsoft. Puedes especificar el tiempo que tardará la transición en ejecutarse mediante el parámetro duration. La transition debe ser establecida por un número/entero entre 0 a 23 haciendo referencia a la transición prevista por Microsoft. Considerando que,es otro valor que viene sin ningún tipo de transición.

Y este ha sido el artículo en el que trataba explicaros 5 cosas que puedes hacer con el tag meta de HTML, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP