ETIQUETA META

Moises David Sierra Canche

DEFINICION

La etiqueta <meta> en HTML proporciona información adicional, conocida como metadatos, sobre una página web. Estos datos, como la descripción del sitio y las palabras clave, son útiles para navegadores y motores de búsqueda. La etiqueta <meta> es un elemento vacío que se coloca dentro del <head> de un documento HTML y no tiene etiqueta de cierre. Su propósito es influir en la estructura y el procesamiento de la página, en lugar de mostrar contenido visible.

EJEMPLOS DE IMPLEMENTACION

  1. Charset o codificación de caracteres:

    El atributo “charset” se utiliza para especificar la codificación de caracteres utilizada en el documento HTML. Definir correctamente el conjunto de caracteres es fundamental para garantizar que los navegadores muestren el texto correctamente, especialmente cuando se utilizan caracteres especiales o no latinos.

    <meta charset="UTF-8">
  2. Name: El atributo “name” se utiliza en conjunto con el atributo “content” para proporcionar información sobre el documento, como la descripción, las palabras clave o el autor. El valor del atributo “name” indica el tipo de información proporcionada, mientras que el atributo “content” contiene la información en sí.
    <meta name="description" content="Una breve descripción de la página">
  3. Content: El atributo “content” es un componente esencial en una etiqueta , ya que proporciona el valor asociado con el atributo “name”, “http-equiv” o “property”. En otras palabras, el atributo “content” contiene la información que deseas comunicar a los navegadores, motores de búsqueda y otras aplicaciones que procesan la página web. El valor de este atributo varía según el tipo de metadato que se esté proporcionando.
    <meta name="description" content="Aprende a utilizar la etiqueta <meta> de HTML5 en tus proyectos web.">
  4. Palabras clave (keywords): La etiqueta 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.
    <meta name="keywords" content="HTML5, meta, etiqueta, SEO, accesibilidad, redes sociales, tutorial">
  5. Indexación y seguimiento: La etiqueta con el atributo “name” y el valor ‘robots’ permite indicar a los motores de búsqueda cómo deben rastrear e indexar una página en particular. Puedes utilizar este valor para controlar si deseas que los motores de búsqueda muestren o no una página en sus resultados de búsqueda.
    <meta name="robots" content="index, follow">
    <meta name="robots" content="noindex, nofollow">
  6. Autor y fecha de publicación: 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.
    <meta name="author" content="Maria González">
    <meta name="date" content="2023-03-26">
  7. Etiquetas de caché: Otros ejemplos clásicos de etiquetas son las que tienen que ver con el caché de la página. Nuevamente, mencionar que estos detalles hoy en día suelen definirse en el lado del servidor, en lugar de mediante estas etiquetas.
    <meta http-equiv="expires" content="Fri, 29 Apr 2016 12:56:00 GMT">
    <meta http-equiv="cache-control" content="no-cache">
  8. Redirección Javascript: La etiqueta nos permite establecer redirecciones desde el lado del cliente. Hay que tener mucho cuidado, ya que las redirecciones que queremos hacer por motivos SEO o similares, deben hacerse desde servidor y establecer un código de error concreto, como 301 o 302. Además, desde cliente la web se carga y luego hace redirección, al contrario que en servidor, donde no se carga, sino que hace primero la redirección.
    <meta http-equiv="refresh" content="30;url=https://manz.dev/">
  9. Viewport del navegador: Otro metadato muy utilizado hoy en día es el que se puede indicar con la etiqueta . Para entenderlo, hay que tener muy claro primero que significa exactamente viewport: la región visible del navegador, esto es, la parte que se ve a simple vista de la página en nuestro navegador. Y es que esta etiqueta permite establecer como se va a comportar el responsive en nuestra página.
    <meta name="viewport" content="width=device-width,initial-scale=1">
  10. Tema de color del navegador: En los navegadores que lo soporten, una etiqueta 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:
    <meta name="theme-color" content="#1e7bbf">