Etiqueta meta en HTML

¿Qué es la etiqueta meta en HTML?

La etiqueta <meta> en HTML5 es un elemento clave que se coloca en el <head> de una página web y es utilizado para proporcionar información adicional sobre la página web a los motores de búsqueda, los navegadores y otros sistemas que interactúan con la página web.

Esta información incluye aspectos como la descripción de la página web, las palabras clave, la codificación de caracteres, la vista en pantalla, el modo de ajuste de contenido, la configuración de la vista móvil, entre otros.

Además, la etiqueta <meta> es invisible para los usuarios finales, pero es crucial para el correcto funcionamiento y optimización de la página web. Por lo tanto, es importante que los desarrolladores web conozcan cómo usar esta etiqueta para mejorar la experiencia de los usuarios y el rendimiento de la página en línea.

Ejemplo de uso

Aquí hay un ejemplo simple de cómo utilizar la etiqueta <meta> en HTML5:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ejemplo de uso de la etiqueta meta en HTML5</title> <meta name="description" content="Una página de ejemplo sobre el uso de la etiqueta meta en HTML5"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Bienvenido a mi sitio web</h1> <p>Esta es una página de ejemplo que muestra el uso básico de la etiqueta meta en HTML5</p> </body> </html>
Lenguaje del código: HTML, XML (xml)

Atributos

La etiqueta <meta> en HTML5 tiene los siguientes atributos:

  • charset: Especifica la codificación de caracteres utilizada en la página. Por ejemplo: <meta charset="UTF-8">
  • name: Especifica el nombre de la meta-información. Por ejemplo: <meta name="description" content="...">
  • content: Contiene el valor de la meta-información. Por ejemplo: <meta name="description" content="...">
  • http-equiv: Especifica el tipo de información que se está proporcionando. Por ejemplo: <meta http-equiv="refresh" content="...">
  • viewport: Controla cómo se renderiza la página en dispositivos móviles. Por ejemplo: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • property: Especifica el tipo de información que se está proporcionando para las plataformas de medios sociales. Por ejemplo: <meta property="og:title" content="...">

Hay otros atributos que se utilizan menos frecuentemente, como scheme, lang, dir, itemprop, etc. Sin embargo, estos son los atributos más comunes que se utilizan para describir la información sobre la página y mejorar la experiencia de navegación de los usuarios.

Ejemplo

A continuación, te muestro un ejemplo completo de cómo utilizar los atributos de la etiqueta <meta> en HTML5:

<!DOCTYPE html> <html> <head> <!-- Especifica la codificación de caracteres utilizada en la página --> <meta charset="UTF-8"> <!-- Título de la página, mostrado en la pestaña del navegador --> <title>Ejemplo de uso de etiquetas meta en HTML5</title> <!-- Proporciona una descripción breve de la página --> <meta name="description" content="Este es un ejemplo de cómo utilizar la etiqueta meta en HTML5"> <!-- Proporciona información sobre las palabras clave de la página --> <meta name="keywords" content="HTML5, meta, atributos, descripción, palabras clave"> <!-- Proporciona información sobre el autor de la página --> <meta name="author" content="John Doe"> <!-- Controla cómo se renderiza la página en dispositivos móviles --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Redirección automática a otra página --> <meta http-equiv="refresh" content="5; URL=https://www.example.com/nueva-pagina"> <!-- Especifica el tipo de información que se está proporcionando para las plataformas de medios sociales --> <meta property="og:title" content="Ejemplo de uso de la etiqueta meta en HTML5"> <meta property="og:type" content="website"> <meta property="og:url" content="https://ejemplo.com"> <meta property="og:image" content="https://ejemplo.com/imagen.jpg"> <meta property="og:description" content="Aprende cómo utilizar la etiqueta meta en HTML5 para mejorar la experiencia de los usuarios"> <meta name="copyright" content="Copyright © Oregoom.com" /> <meta name="robots" content="index, follow" /> </head> <body> <!-- Contenido de la página --> <h1>Bienvenido a mi sitio web</h1> <p>Esta es una página de ejemplo que muestra cómo utilizar las etiquetas meta en HTML5</p> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utilizan diferentes atributos de la etiqueta <meta> para proporcionar información importante sobre la página y mejorar la experiencia de los usuarios.

La meta charset especifica la codificación de caracteres utilizada en la página, mientras que las meta name proporcionan información sobre la descripción, palabras clave y autor de la página.

La meta viewport controla cómo se renderiza la página en dispositivos móviles.

Finalmente, las meta property proporcionan información sobre el título, tipo, URL, imagen y descripción de la página para las plataformas de medios sociales.

Atributos globales

  • Lang: El atributo “lang” es un atributo global en HTML5 que se utiliza para especificar el idioma del contenido de una página web.
    • Este atributo es útil para mejorar la accesibilidad y para ayudar a los motores de búsqueda a determinar la relevancia de una página en función de la ubicación geográfica del usuario.

La sintaxis básica para utilizar el atributo “lang” en la etiqueta <meta> es la siguiente:

<meta http-equiv="Content-Language" content="es">
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se está especificando que el idioma del contenido de la página es español (es). Puedes especificar cualquier código de idioma que esté registrado en la norma ISO 639.

Ejemplos:

En este ejemplo, se declara que el nombre del autor está en idioma francés:

<meta name="Author" lang="fr" content="Pierre" />
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se declara que el nombre del autor está en idioma inglés:

<meta name="Author" lang="en" content="Peter" />
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se declara que el nombre del autor está en idioma español:

<meta name="Author" lang="es" content="Pedro" />
Lenguaje del código: HTML, XML (xml)

Más ejemplos

Atributo Charset

El atributo Charset especifica la codificación de caracteres para el documento HTML.

UFT-8: Codificación de caracteres para Unicode. Así se evita, por ejemplo, que la ñ o las tildes no se muestren correctamente.

<meta charset="UTF-8">
Lenguaje del código: HTML, XML (xml)

ISO-8859-1: Codificación de caracteres para el alfabeto latino.

<meta charset="ISO-8859-1">
Lenguaje del código: HTML, XML (xml)

Atributo Name y Content

El atributo “name” es utilizado para especificar el tipo de información que se está proporcionando en la etiqueta <meta>.

El atributo “content” es utilizado para especificar el valor o contenido relacionado con el atributo “name”.

Ejemplo:

  • viewport: Controla cómo se renderiza la página en dispositivos móviles.
    1. width=device-width establece el ancho de la página web para seguir el ancho de la pantalla del dispositivo (que variará según el dispositivo).
    2. initial-scale=1 establece el nivel de zoom inicial cuando el navegador carga la página web por primera vez.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Lenguaje del código: HTML, XML (xml)
  • robots: La metaetiqueta “robots” permite la indexación de una página web. Es decir, la metaetiqueta “robots” les dice a las arañas (crawlers) de los motores de búsqueda qué información debe y qué información no debe ser tomada en cuenta para la indexación.

index permite al robot de búsqueda la indexación de una página.

<meta name="robots" content="index" />
Lenguaje del código: HTML, XML (xml)

noindex prohíbe al buscador transferir contenidos de una página HTML a su base de datos (No se muestra la página en los resultados de búsqueda).

<meta name="robots" content="noindex" />
Lenguaje del código: HTML, XML (xml)

follow indica a los crawlers del motor de búsqueda que sigan los enlaces de la página.

<meta name="robots" content="follow" />
Lenguaje del código: HTML, XML (xml)

nofollow impide que un robot (crawlers) de un motor de búsqueda rastree los enlaces de esta página web.

<meta name="robots" content="nofollow" />
Lenguaje del código: HTML, XML (xml)

Nota: Los meta tags index/noindex y follow/nofollow se pueden usar solos o combinados. Por ejemplo, determinar que una página sea indexada, pero que los enlaces (links) sean ignorados, así como permitir o impedir ambas acciones a los robots.

<meta name="robots" content="index, nofollow" /> <meta name="robots" content="index, follow" /> <meta name="robots" content="noindex, nofollow" />
Lenguaje del código: HTML, XML (xml)

Atributo Http-equiv

  • refresh: Es un meta tags para indicar a un navegador que actualice automáticamente la página web actual después de un intervalo de tiempo determinado.
    • El Consorcio World Wide Web (W3C) no recomienda el uso de meta refresh, ya que una actualización inesperada puede desorientar a los usuarios.

Actualizar el documento cada 30 segundos.

<meta http-equiv="refresh" content="10" />
Lenguaje del código: HTML, XML (xml)

En este ejemplo, en 10 segundos se produce el reenvío a la página principal de Oregoom.

<meta http-equiv="refresh" content="10;url=https://oregoom.com" />
Lenguaje del código: HTML, XML (xml)

Referencias