Autor: Ángeles Marilú May Domínguez
Quizás, una de las etiquetas HTML más populares que se colocan en el <head> de un documento HTML es la etiqueta <meta> . Se trata de una etiqueta que nos permite indicar metadatos o información interna del documento HTML. Estos datos no se suelen mostrar visualmente en la página, sino que el navegador los lee para conocer información relevante y utilizarlos en situaciones específicas.
La etiqueta <meta> puede tener diferentes atributos según el tipo de información que se quiera indicar. La etiqueta <meta> es muy importante para mejorar el aspecto y el rendimiento de tu sitio web, ya que puede ayudarte a:
Existen varios tipos de etiquetas meta. Veamos algunas que podemos decir que son las más importantes:
La etiqueta meta título o meta title es una de las más involucradas en un tema de discusión, debido a que muchos no la consideran realmente una meta etiqueta por su naturaleza de título. Esta etiqueta es súper sencilla, en realidad solo almacena la información del título de la web.
La meta descripción es quizás la más importante de todas las etiquetas meta, debido a que es esta la que informa al explorador qué es lo que se puede encontrar en tu página web. Además, el contenido de esta sí que va de cara al lector, por lo que es importante optimizarla al máximo y evitar cualquier tipo de garabatos.
La finalidad real de esta etiqueta es decirle al usuario de qué va la página y qué les ofreces antes de ingresar a ella. Además, también le permite entender al buscador qué es lo que ofreces y si realmente debería mostrarte ante los usuarios.
La etiqueta meta clave (keywords) con el atributo 'name' y el valor "keywords" de palabras clave solía ser importante para el SEO, su relevancia ha disminuido a lo largo de los años debido al abuso en la optimización de palabras clave. La mayoría de los motores de búsqueda modernos, como Google, ya no utilizan este valor del atributo 'name' para el ranking. Sin embargo, algunos motores de búsqueda menos conocidos pueden seguir utilizándola.
Controla cómo se escala tu página en diferentes dispositivos. Sin esta etiqueta, tu página podría aparecer pequeña y requerir zoom para leer el contenido en un móvil. Con ella, el diseño se adapta al ancho del dispositivo, mejorando la experiencia del usuario.
Una etiqueta tan importante como poderosa es la etiqueta meta robots, ya que esta es capaz de brindar instrucciones a los buscadores relacionadas con la indexación o rastreo de una web, así que mucho ojo con cómo la utilizas.
Los valores que le podemos brindar a la etiqueta son 4:
Esta etiqueta puede usarse para refrescar tu página automáticamente después de un tiempo determinado (en este caso, 30 segundos).
Es necesario usando HTML. Así se evita, por ejemplo, que la ñ o las tildes no se muestren correctamente.
Estos tags se usan en redes sociales para controlar cómo se muestra tu página cuando se comparte. Te permiten especificar un título, una descripción y una imagen para la vista previa del link.
Proporcionar información sobre el autor y la fecha de publicación de la página puede mejorar la credibilidad y la autenticidad del contenido, lo que puede influir positivamente en el SEO.
En su momento llegó a ser utilizada en bastantes sitios webs para evitar que Google insertara una barra de búsqueda en los resultados de sus páginas webs.
En los navegadores que lo soporten, una etiqueta <meta> muy curiosa es la que proporciona la posibilidad de establecer un tema de color para personalizar los colores de la interfaz del navegador que estemos utilizando. Para ello, tenemos que utilizar el atributo name="theme-color" y asociarle un color en hexadecimal:
