fbpx

HTML Meta

Descripción

La etiqueta HTML <meta>, también conocida como elementos meta, las metaetiquetas o etiquetas meta (en inglés, metatags o meta tags), son un tipo de etiquetas incorporadas en la cabecera de una página web, que permiten a los navegadores u otros programas que puedan valerse de la información suministrada por la web.

El propósito de este tipo de elementos es el de incluir información de referencia sobe la página, como puede ser: autor, fecha, descripción, palabras claves, entre otros.

La información dada por las etiquetas meta puede ser empleada por los robots de búsqueda para incluirla en las bases de datos de los buscadores y mostrarla en el resultado de la búsqueda o tenerla presentes.

Las etiquetas meta también suelen especificar cierta información técnica útil para que el navegador pueda mostrar la página correctamente, como el grupo de caracteres a emplear, tiempo de expiración del contenido o calificar el contenido del sitio.

Este tipo de etiquetas, al igual que todas las presentes en las cabeceras de los documentos HTML, no son visibles para los usuarios de la página, por lo que, para observar su contenido, es necesario emplear las herramientas de desarrollador y ver el código fuente.

Ejemplo de uso

En el siguiente ejemplo vamos a ver el uso correcto de la etiqueta <meta> dentro del encabezado de una página web.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Aquí el título del documento</title>
    <meta name="Author" lang="es" content="Nivardo Ch" />
    <meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
    <meta name="description" content="Aprende Nuevas Tecnologías como: HTML5, CSS3 y JavaScript." />
    <meta name="copyright" content="Copyright © Oregoom.com" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="index, follow" />
  </head>
  <body>
  </body>
</html>

Atributos

En HTML5 hay un total de seis atributos válidos que están disponibles para la etiqueta meta, de los cueles un atributo es genérico y 5 atributos específicos.

Atributos genéricos

  • Lang. – Este atributo proporciona información importante sobre el idioma del contenido del elemento, además del valor de su código de idioma. Por defecto, su valor es fijado por el navegador.

Atributos específicos

  • Charset. – Especifica la codificación de caracteres para el documento HTML.
  • Name. – Es el nombre al que se asocia la metainformación, puede ser usado con el valor de autor, description, keywords, copyright, entre otros.
  • Content. – Son los datos que se asocian con el valor del atributo name.
  • Http-equiv. – Sirve para brindar información sobre los encabezados de respuesta HTTP, puede ser utilizada para remplazar la función del atributo name.
  • Schemel. – Este atributo indica un esquema de interpretación para los metadatos, su valor es definido por defecto por parte del navegador.

Más ejemplos

Atributo Lang

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

<meta name="Author" lang="fr" content="Pierre" />

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

<meta name="Author" lang="en" content="Peter" />

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

<meta name="Author" lang="es" content="Pedro" />

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.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Aquí el título del documento</title>
  </dead>
  <body>
  </body>
</html>

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

<meta charset="ISO-8859-1">

Atributo Name y Content

  • Keywords.- Definir palabras clave para motores de búsqueda. Pero hoy es ignorado por Google, Bing y otros buscadores.
<meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
  • Description.- Defina una descripción de su página web. Con esta meta description podemos describir brevemente el contenido de su página web.
<meta name="description" content="Aprende Nuevas Tecnologías como: HTML5, CSS3 y JavaScript." />
  • Author y Copyright.- Definir el Autor (author) y Copyright de una página.
<meta name="author" content="Nivardo Ch" />

<meta name="copyright" content="Copyright © Oregoom.com" />
  • Viewport.- Configurar con esta meta viewport la ventana gráfica para que su sitio web se vea bien en todos los dispositivos.
    1. width=device-width establece el ancho de la página 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 por primera vez.
<meta name="viewport" content="width=device-width, initial-scale=1" />
  • 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" />

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" />

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

<meta name="robots" content="follow" />

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" />

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" />

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" />

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" />

Referencias



Share This