Etiqueta HTML <meta>

Posted on by Rudeus Greyrat

Los metadatos significan información sobre los datos. El <meta>La etiqueta que se usa regularmente para dar consignas, representaciones, datos de autor y otros metadatos que el programa puede utilizar para entregar el documento con precisión o en palabras simples, proporciona información importante sobre un documento. Agregar la metaetiqueta mientras se crea la página web o el sitio web es una buena práctica porque los motores de búsqueda como Google buscan esta metaetiqueta para comprender la información proporcionada por el sitio web. También es útil si el usuario busca un sitio web específico, entonces la página de resultados del motor de búsqueda mostrará fragmentos en los resultados de búsqueda que proporcionarán información relacionada con ese sitio web. Estas etiquetas se utilizan básicamente para agregar pares de nombre/valor para describir las propiedades de los documentos HTML, como la fecha de caducidad, el nombre del autor, la lista de palabras clave, el autor del documento, etc., es decir, se utiliza para especificar un conjunto de caracteres, descripción de página, palabras clave , autor del documento y la configuración de la ventana gráfica. Esta etiqueta es un elemento vacío porque solo tiene una etiqueta de apertura y ninguna de cierre, pero lleva información dentro de sus atributos. Un documento web puede incluir una o más etiquetas meta según la información, pero en general, no afecta la apariencia física del documento.

Sintaxis:

<meta attribute-name="value">

Atributos: Esta etiqueta acepta cuatro atributos que se mencionan y describen a continuación.

  • name : Este atributo se utiliza para definir el nombre de la propiedad.
  • http-equiv : este atributo se usa para obtener el encabezado del mensaje de respuesta HTTP.
  • contenido : este atributo se utiliza para especificar el valor de las propiedades.
  • charset : este atributo se utiliza para especificar una codificación de caracteres para un archivo HTML.
  • esquema : determina un esquema que se utilizará para descifrar el valor del atributo de la sustancia. 

Nota: la etiqueta meta también acepta atributos globales en HTML

Puntos clave:

  • Los contenidos de la etiqueta <meta> no son visibles en su navegador, pero pueden ser analizados por la máquina.
  • Solo se utilizan para dar información adicional sobre el documento HTML.
  • Las etiquetas <meta> se agregan a nuestro documento HTML con el fin de optimizar los motores de búsqueda.
  • Se agregan dentro de la etiqueta <head> y los utilizan los navegadores, los motores de búsqueda y otros servicios web.
  • A través de la etiqueta <meta>, el diseñador puede controlar la ventana gráfica.

Ejemplo: Este sencillo ejemplo ilustra el uso de la metaetiqueta en la etiqueta principal que proporciona información.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1,
                   maximum-scale=1">
    <meta name="description"
          content="A Computer Science portal for geeks.
                   It contains well written, well thought
                   and well explained computer science and
                   programming articles, quizzes and practice/competitive
                   programming/company interview Questions.">
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
     
 
<p>This is an example of meta tag</p>
 
 
</body>
 
</html>

Producción:

Etiqueta HTML <meta>

Hay varias otras formas de implementar la etiqueta <meta> que pueden usar los siguientes valores de atributo:

Resaltar palabras clave importantes: la etiqueta meta contiene palabras clave importantes que están presentes en la página web y el navegador web las utiliza para clasificar la página según las búsquedas. La optimización de motores de búsqueda es otro término para esta optimización del rango SEO del contenido.

Ejemplo: este ejemplo describe la etiqueta <meta> con los atributos de nombre y contenido y su valor se establece como palabras clave y algún contenido.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- meta tag starts -->
    <meta name="keywords"
          content="Meta Tags, Metadata" />
    <!-- meta tag ends -->
</head>
 
<body>
     
 
<p>Hello GeeksforGeeks!</p>
 
 
</body>
 
</html>

Producción:

Hello GeeksforGeeks!

Proporcionar una descripción de la página web : se puede incluir una breve descripción de la página web en la etiqueta Meta, lo que ayudará a que la página web se clasifique en Internet.

Ejemplo: este ejemplo describe el uso de la etiqueta <meta> para proporcionar la descripción del sitio web. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- meta tag starts -->
    <meta name="keywords"
          content="Meta Tags, Metadata" />
    <meta name="description"
          content="Geeksforgeeks is a computer science portal." />
    <!-- meta tag ends -->
</head>
 
<body>
     
 
<p>GeeksforGeeks!</p>
 
 
</body>
 
</html>

Salida :

GeeksforGeeks!

Fecha de revisión del documento: la metaetiqueta se utiliza para brindar información sobre el último documento actualizado. Esta información es utilizada por varios navegadores web al actualizar la página web.

Ejemplo: este ejemplo describe el uso de la etiqueta <meta> para proporcionar la última información actualizada del documento.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- meta tag starts -->
    <meta name="keywords" content="Meta Tags, Metadata" />
    <meta name="description" content="Learn about Meta Tags." />
    <meta name="revised detail" content="last updated time" />
    <!-- meta tag ends -->
</head>
 
<body>
     
 
<p>GeeksforGeeks!</p>
 
 
</body>
 
</html>

Producción:

GeeksforGeeks!

Actualización automática: se mencionará un tiempo específico en la metaetiqueta después del cual la página web se actualizará automáticamente, es decir, esta metaetiqueta se usa para especificar una duración después de la cual la página web seguirá actualizándose automáticamente después de la duración dada.

Ejemplo: el siguiente código actualizará la página web después de 8 segundos.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- meta tag starts -->
    <meta name="keywords about"
          content="Meta Tags, Metadata" />
    <meta name="description"
          content="Learning about Meta Tags." />
    <meta name="revised about"
          content="GeeksforGeeks" />
    <meta http-equiv="refresh"
          content="8" />
    <!-- meta tag ends -->
</head>
 
<body>
     
 
<p>GeeksforGeeks!</p>
 
 
</body>
 
</html>

Producción:

Configuración del valor del atributo de la etiqueta <meta> para actualizar automáticamente la página web durante el tiempo especificado

Especificación del autor de la página web: MetaTag nos permite mencionar el nombre del autor de la página web de la siguiente manera.

Ejemplo: este ejemplo describe el uso de la etiqueta <meta> para proporcionar los detalles del autor.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- meta tag starts -->
    <meta name="keywords used "
          content="Meta Tags, Metadata" />
    <meta name="description about"
          content="Meta tags learning." />
    <meta name="author"
          content="Akash Kumar17" />
    <!-- meta tag ends -->
</head>
 
<body>
     
 
<p>GeeksforGeeks!</p>
 
 
</body>
 
</html>

Producción:

GeeksforGeeks!

Soportes del navegador:

  • Google Chrome 
  • explorador de Internet 
  • Microsoft Edge 12 y superior
  • Mozilla Firefox 1 y superior
  • Ópera 
  • Safari

Publicación traducida automáticamente

Artículo escrito por Akashkumar17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *