ETIQUETAS META

DEFINICION

Las etiquetas <meta> en HTML son elementos utilizados para proporcionar metadatos, es decir, información sobre el documento HTML que no se muestra directamente en la página web pero que es útil para los navegadores web, motores de búsqueda y otros servicios que procesan el contenido web. Estos metadatos incluyen información como la codificación de caracteres, descripciones de la página, palabras clave, autoría, instrucciones para los robots de los motores de búsqueda, y más.

FUNCIONALIDAD

Las etiquetas <meta> en HTML tienen una funcionalidad importante en la optimización y estructuración de una página web. En lugar de mostrar contenido visible en la página, estas etiquetas proporcionan información adicional sobre el documento HTML mismo. Esto incluye detalles como la codificación de caracteres del documento, la descripción de la página, las palabras clave relevantes, la autoría del contenido, entre otros.

Las etiquetas <meta> pueden utilizarse para diversos propósitos, como:

  • 🔤 Definir el conjunto de caracteres.
  • 📝 Describir la página de manera concisa y relevante para motores de búsqueda.
  • 🔑 Especificar palabras clave que describan el contenido de la página.
  • 👤 Indicar el autor de la página.
  • 🤖 Controlar la indexación y seguimiento por parte de los motores de búsqueda (robots).
  • 📱 Definir la escala de la página en dispositivos móviles.
  • 🖥️ Controlar la compatibilidad del navegador.
  • 🔄 Redireccionar automáticamente a otra página después de un cierto tiempo.
  • 🛠️ Indicar la herramienta utilizada para generar la página.

LOS 10 EJEMPLOS DE IMPLEMENTACIÓN

  • 1.- TITULO (Title)

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

    Funcionalidad: Define el título de la página web. Este título se muestra en la barra de título del navegador y es crucial para la identificación y optimización de la página en los motores de búsqueda. Un título claro y descriptivo mejora la visibilidad en los resultados de búsqueda y aumenta la tasa de clics.

  • 2.- CODIFICACION DE CARACTERES

    <meta charset="UTF-8">

    Funcionalidad: Especifica la codificación de caracteres utilizada en el documento HTML. La codificación UTF-8 es ampliamente compatible y puede representar una amplia gama de caracteres de varios idiomas. Esto asegura que los caracteres especiales se muestren correctamente en el navegador del usuario.

  • 3.- DESCRIPCIÓN (Description)

    <meta name="description" content="Una breve descripción de la página web.">

    Funcionalidad: Proporciona una breve descripción del contenido de la página. Esta descripción se muestra en los resultados de búsqueda debajo del título y la URL de la página. Una descripción clara y relevante puede mejorar la visibilidad en los motores de búsqueda y aumentar la tasa de clics.

  • 4.- PALABRAS CLAVE (Keywords)

    <meta name="keywords" content="keyword1, keyword2, keyword3">

    Funcionalidad: Anteriormente se utilizaba para indicar las palabras clave relevantes para la página, pero su importancia para los motores de búsqueda ha disminuido. Actualmente, su uso se ha desaconsejado ya que los motores de búsqueda modernos no dependen de esta etiqueta para determinar la relevancia de la página.

  • 5.- AUTOR (Author) Y COPYRIGHT

    <meta name="author" content="Nombre del autor">
    <meta name="copyright" content="Copyright año">

    Funcionalidad: Indica el autor de la página y los derechos de autor del contenido. Es importante atribuir adecuadamente el contenido a su autor original y declarar los derechos de autor para proteger el contenido contra el uso no autorizado.

  • 6.- CONTROL DE CACHÉ

    <meta http-equiv="cache-control" content="no-cache">

    Funcionalidad: Controla el almacenamiento en caché del navegador para la página web. Esta etiqueta indica al navegador que no almacene en caché el contenido de la página, asegurando que los usuarios siempre vean la versión más reciente del contenido.

  • 7.- EXPIRES

    <meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">

    Funcionalidad: Indica al navegador la fecha en la que el contenido de la página web expira y debe actualizarse desde el servidor. Esto controla la duración del almacenamiento en caché del navegador y garantiza que los usuarios siempre vean la versión más reciente del contenido.

  • 8.- REFRESH

    <meta http-equiv="refresh" content="5;
    URL=https://nuevapagina.com">

    Funcionalidad: Redirige automáticamente a los usuarios a otra página después de cierto tiempo. En este ejemplo, la página se redirigirá al link proporcionado después de 5 segundos.

  • 9.- INSTRUCCIONES PARA LOS ROBOTS DE BÚSQUEDA (Index)

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

    Funcionalidad: Indica a los motores de búsqueda que la página debe ser indexada, lo que significa que se incluirá en el índice del motor de búsqueda y se mostrará en los resultados de búsqueda para consultas relevantes. Esto asegura que el contenido de la página sea descubierto y mostrado en los resultados de búsqueda.

  • 10.- INSTRUCCIONES PARA LOS ROBOTS DE BÚSQUEDA (Noindex)

    <meta name="robots" content="noindex">

    Funcionalidad: Indica a los motores de búsqueda que la página no debe ser indexada. Esto puede ser útil para páginas que no deseas que aparezcan en los resultados de búsqueda, como páginas de agradecimiento o páginas de administración.

ALUMNO

  • 👤 Nombre: Valencia Valdez Ulises Alejandro
  • 📚 Materia: PROGRAMACION WEB
  • 👨‍🏫 Profesor: Dr Jimmy Peña