En la sección de estructura del documento, aprendiste sobre los componentes que (casi) siempre encuentras en el <head> de un documento HTML. Si bien todo el contenido de <head>, incluidos <title>, <link>, <script>, <style> y el <base> menos usado, en realidad es "metadatos", hay una etiqueta <meta> para los metadatos que no pueden representarse con estos otros elementos.
La especificación incluye varios metatipos, y hay muchos otros metadatos compatibles con la aplicación que no se encuentran en ninguna especificación oficial. En esta sección, analizaremos los atributos y valores que se incluyen en las especificaciones, algunos metanombres y valores de contenido comunes, y algunos metatipos que son muy útiles para la optimización por motores de búsqueda, la publicación en redes sociales y la experiencia del usuario que no están definidos oficialmente en WhatWG o W3C.
Se revisaron las etiquetas <meta> obligatorias
Repasemos las dos etiquetas <meta> necesarias que ya se trataron (la declaración del conjunto de caracteres y la metaetiqueta de la vista del puerto) para comprender mejor la etiqueta <meta> en el proceso.
El atributo charset del elemento <meta> se creó de una manera única. Originalmente, los metadatos del grupo de caracteres se escribieron como <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, pero muchos desarrolladores ingresaron el atributo content de forma incorrecta como content="text/html" charset="<characterset>" que los navegadores comenzaron a admitir charset como atributo. Ahora está estandarizado en el estándar HTML actual como <meta charset="<charset>" />, donde, para HTML,<charset> es la cadena que no distingue mayúsculas de minúsculas "utf-8" .
Es posible que hayas notado la metadeclaración del grupo de caracteres original que se usó para incluir el atributo http-equiv. Esta es la sigla en inglés de "http-equivalente" (equivalente a http), ya que la metaetiqueta está replicando lo que se podría configurar en un encabezado HTTP. Aparte de la excepción charset, todas las demás metaetiquetas definidas en la especificación HTML de WHG contienen el atributo http-equiv o name.
Metaetiquetas definidas oficialmente
Existen dos tipos principales de metaetiquetas: directivas pragma, con el atributo http-equiv (como la metaetiqueta charset que tenía) y metatipos con nombre, como la metaetiqueta de viewport con el atributo name que explicamos en la sección estructura del documento. Los metadatos name y http-equiv deben incluir el atributo content, que define el contenido del tipo de metadatos de la lista.
Directivas de Pragma
El atributo http-equiv tiene como valor una directiva pragma. Estas directivas describen cómo se debe analizar la página. Los valores http-equiv admitidos habilitan directivas de configuración cuando no puedes establecer encabezados HTTP directamente.
La especificación define siete directivas pragma, la mayoría de las cuales tienen otros métodos de configuración. Por ejemplo, si bien puedes incluir una directiva de idioma con <meta http-equiv="content-language" content="en-us" />, ya hablamos sobre el uso del atributo lang en el elemento HTML, que es lo que se debe usar en su lugar.
La directiva pragma más común es la directiva refresh.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
Si bien puedes establecer una directiva para que se actualice en un intervalo de la cantidad de segundos que se establece en el atributo content y que incluso se redireccione a una URL diferente, esto no es recomendable. Actualizar y redireccionar contenido sin una solicitud explícita del usuario para hacerlo tiene una usabilidad deficiente y afecta negativamente la accesibilidad. ¿No te gusta cuando estás en medio de un párrafo y la página se restablece? Imagina tener problemas cognitivos o de visión y eso sucede. Si vas a configurar una actualización con un redireccionamiento, asegúrate de que el usuario tenga tiempo suficiente para leer la página, un vínculo para acelerar el proceso y, si corresponde, un botón para "detener el tiempo" y evitar que se produzca el redireccionamiento.
No incluiremos esto en nuestro sitio porque no hay razón para agotar el tiempo de espera de una sesión de usuario más que molestar a nuestros visitantes.
La directiva pragma más útil es content-security-policy, que permite definir una política de contenido para el documento actual. En general, las políticas de contenido especifican los orígenes permitidos del servidor y los endpoints de secuencias de comandos, que ayudan a protegerte contra ataques de secuencias de comandos entre sitios.
<meta http-equiv="content-security-policy" content="default-src https:" />
Si no tienes acceso para cambiar los encabezados HTTP (o si lo tienes), esta es una lista de valores de contenido separados por espacios para directivas content-security-policy.
Metaetiquetas con nombre
La mayoría de las veces, incluirás metadatos con nombre. Incluye el atributo name, con el valor del atributo como el nombre de los metadatos. Al igual que con las directivas pragma, el atributo content es obligatorio.
El atributo name es el nombre de los metadatos. Además de viewport, es probable que quieras incluir description y theme-color, pero no keywords.
Palabras clave
Los vendedores de optimización para motores de búsqueda abusaban de la metaetiqueta de palabras clave a través de listas de palabras de spam separadas por comas en lugar de listas de términos clave relevantes, por lo que los motores de búsqueda ya no consideran que estos metadatos sean útiles. No es necesario que pierdas tiempo, esfuerzo ni bytes agregándolos.
Descripción
Sin embargo, el valor description es útil para SEO, ya que el valor del contenido de la descripción suele ser lo que los motores de búsqueda muestran debajo del título de la página en los resultados de la búsqueda. Varios navegadores, como Firefox y Opera, la utilizan como descripción predeterminada de las páginas agregadas a favoritos. La descripción debe ser un resumen breve y preciso del contenido de la página.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
Si la segunda parte de la descripción no tiene sentido para ti, es probable que no hayas visto la película Zoolander.
Robots
Si no quieres que los motores de búsqueda indexen tu sitio, puedes informarlos. <meta name="robots" content="noindex, nofollow" /> les indica a los bots que no indexen el sitio y que no sigan ningún vínculo. Los bots deben escuchar la solicitud, pero no hay ninguna ley que exija que lo haga. No es necesario que incluyas <meta name="robots" content="index, follow" /> para solicitar que se indexe el sitio y sigas los vínculos, ya que ese es el valor predeterminado, a menos que los encabezados HTTP indiquen lo contrario.
<meta name="robots" content="index, follow" />
Color del tema
El valor theme-color te permite definir un color para personalizar la interfaz del navegador. El valor de color del atributo de contenido se utilizará en los navegadores y sistemas operativos compatibles, lo que te permitirá proporcionar un color sugerido para los usuarios-agentes que admiten colorear la barra de título, la barra de pestañas y otros componentes de Chrome. Esta metaetiqueta es especialmente útil para las apps web progresivas. Sin embargo, si incluyes un archivo de manifiesto, que requiere una AWP, puedes incluir el color de tema allí. Sin embargo, definirlo en el código HTML garantiza que el color se encontrará inmediatamente antes del procesamiento, lo que puede ser más rápido en la primera carga que si se esperara el manifiesto.
Para establecer el color del tema en el tono azul del color de fondo de nuestro sitio, incluye lo siguiente:
<meta name="theme-color" content="#226DAA" />
La metaetiqueta de color del tema puede incluir un atributo media que habilite la configuración de diferentes colores de tema según las consultas de medios. El atributo media solo se puede incluir en esta metaetiqueta y se ignora en las demás metaetiquetas.
Hay muchos otros metavalores name, pero los que analizamos son los más comunes. A excepción de declarar diferentes valores de theme-color para diferentes consultas de medios, incluye solo una de cada metaetiqueta. Si necesitas incluir más de un tipo de metaetiqueta para admitir navegadores heredados, los valores heredados deben aparecer después de los valores más nuevos, ya que los usuarios-agentes leen las reglas sucesivas hasta que encuentran una coincidencia.
Abrir gráfico
Open Graph y otros protocolos de metaetiquetas similares se pueden usar para controlar la manera en que los sitios de redes sociales, como Twitter, LinkedIn y Facebook, muestran los vínculos a tu contenido. Si no se incluyen, los sitios de redes sociales captarán correctamente el título de tu página y la descripción de la metaetiqueta de descripción, la misma información que presentarán los motores de búsqueda, pero puedes configurar intencionalmente lo que quieres que vean los usuarios cuando se publique un vínculo en tu sitio.
Cuando publicas un vínculo a MachineLearningWorkshop.com o web.dev en Facebook o Twitter, aparece una tarjeta con una imagen, un título y una descripción. La tarjeta completa es un hipervínculo a la URL que proporcionaste.
Las metaetiquetas de Open Graph tienen dos atributos cada una: el atributo property en lugar del atributo name, y el contenido o el valor de esa propiedad. El atributo property no está definido en las especificaciones oficiales, pero es ampliamente compatible con las aplicaciones que admiten el protocolo Open Graph. La creación de atributos "nuevos" como property garantiza que los valores de atributos creados para el atributo del protocolo no entren en conflicto con los valores futuros de los atributos name o http-equiv.
Crea una tarjeta multimedia de Facebook:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
Incluye un título de la publicación para mostrar. Por lo general, el título se muestra debajo de la imagen y arriba de la descripción. La descripción debe tener hasta tres oraciones que resuman tu publicación. Aparecerá después del título definido en og:title. Proporciona la URL absoluta a la imagen del banner que quieras que se muestre, incluido el protocolo https://. Cuando incluyas una imagen en HTML, incluye siempre una descripción de texto alternativa para la imagen, incluso cuando aparezca en otro lugar. Para las tarjetas de redes sociales de Open Graph, define alt como el valor de contenido de la propiedad og:image:alt. También puedes incluir una URL canónica con og:url.
Todas estas metaetiquetas se definen en el protocolo Open Graph. Los valores deben ser el contenido que deseas que muestre la aplicación web de terceros.
Otras redes sociales tienen sus propias sintaxis similares, como el lenguaje de marcado de tarjetas de Twitter. Esto permite proporcionar una experiencia diferente según el lugar donde aparece el vínculo, o bien habilitar el seguimiento de vínculos agregando un parámetro al final de la URL.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
En el caso de Twitter, para garantizar que el valor del atributo name no entre en conflicto con especificaciones futuras, en lugar de usar un atributo nuevo como el atributo property en Open Graph, todos los valores de nombre tienen el prefijo twitter: en los datos de la tarjeta de Twitter.
Puedes consultar cómo se verá tu tarjeta de redes sociales en Twitter y Facebook
Puedes tener diferentes imágenes, títulos y descripciones de tarjetas para distintos sitios de redes sociales o para diferentes parámetros de vínculos. Por ejemplo, https://perfmattersconf.com establece valores diferentes para og:image, og:title y og:description según el parámetro de la URL.
Si ingresas https://perfmattersconf.com?name=erica y https://perfmattersconf.com?name=melanie en el validador de tarjetas de Twitter, verás estas dos tarjetas diferentes. Proporcionamos contenido diferente, aunque ambas vinculan a la misma página principal de la conferencia.
Otros metadatos útiles
Si alguien agrega tu sitio a favoritos o a su pantalla principal, o si es una aplicación web progresiva o funciona sin conexión o sin mostrar las funciones de Chrome en el navegador, puedes proporcionar íconos de aplicaciones para la pantalla principal del dispositivo móvil.
Puedes usar la etiqueta <link> para vincular las imágenes de inicio que deseas usar. A continuación, te mostramos un ejemplo de cómo incluir algunas imágenes con consultas de medios:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
Si tu sitio o aplicación es compatible con apps web (es decir, si el sitio puede funcionar por sí solo con una IU mínima, como sin un botón Atrás), también puedes usar metaetiquetas para indicarle al navegador lo siguiente:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
Inclúyelas solo si tu app es compatible con ellas. De lo contrario, tus seguidores más fervientes, es decir, aquellos que agregaron tu sitio a la pantalla de inicio, te ayudarán a ofrecer una experiencia del usuario realmente deficiente. ¡Perderás su amor!
Si alguien va a guardar tu ícono en la pantalla principal de su pequeño dispositivo, debes proporcionarle al sistema operativo un nombre corto que no ocupe mucho espacio en la pantalla principal de un dispositivo pequeño. Para ello, puedes incluir una metaetiqueta o utilizar un archivo de manifiesto web. A continuación, se muestra el método de metaetiquetas:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
Ya abordaste varias metaetiquetas que harán que el encabezado sea más extenso. Si realmente estás creando una aplicación web progresiva compatible con apps web que es compatible con el uso sin conexión, en lugar de incluir estas dos metaetiquetas adicionales, puedes incluir short_name: MLW de manera más simple y concisa en un archivo webmanifest.
El archivo de manifiesto puede evitar que haya un encabezado difícil de manejar lleno de etiquetas <link> y <meta>. Podemos crear un archivo de manifiesto, generalmente llamado manifest.webmanifest o manifest.json. Luego, usamos la práctica etiqueta <link> con un atributo rel establecido en manifest y el atributo href establecido en la URL del archivo de manifiesto:
<link rel="manifest" href="/mlw.webmanifest" />
Esta serie se enfoca en HTML, pero puedes consultar el curso web.dev sobre aplicaciones web progresivas o la documentación del manifiesto de aplicaciones web de MDN.
Ahora, tu código HTML tendrá el siguiente aspecto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Es bastante largo, pero está terminado.
Ahora que tu <head> está casi completo, puedes analizar en profundidad un poco de HTML semántico.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre metadatos
La directiva pragma de refresh.
Abrir metaetiquetas de Graph.