En la sección de estructura del documento, aprendiste sobre los componentes que (casi) encuentras siempre en el <head> de un documento HTML. Si bien todo lo que contiene <head>, incluidos <title>, <link>, <script>, <style> y el <base> menos usado, es en realidad "metadatos", hay una etiqueta <meta> para los metadatos que no pueden representarse con estos otros elementos.
La especificación incluye varios metatipos, y existen muchos otros metatipos compatibles con aplicaciones que no se encuentran en ninguna especificación oficial. En esta sección, analizaremos los atributos y los valores que se incluyen en las especificaciones, algunos metadatos comunes y valores de contenido, y algunos metatipos que son increíblemente útiles para la optimización para motores de búsqueda, la publicación en redes sociales y la experiencia del usuario que no están definidos oficialmente por WHATWG o W3C.
Se revisaron las etiquetas <meta> obligatorias
Revisemos las dos etiquetas <meta> necesarias que ya se abordaron (la declaración de conjunto de caracteres y la metaetiqueta de viewport) y comprendamos mejor la etiqueta <meta> en el proceso.
El atributo charset del elemento <meta> surgió de una manera única. Originalmente, los metadatos del grupo de caracteres se escribían como <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, pero muchos desarrolladores escribieron mal el atributo content como content="text/html" charset="<characterset>" que los navegadores comenzaron a admitir charset como atributo. Ahora se estandariza en el estándar dinámico HTML como <meta charset="<charset>" />, donde, para HTML,<charset> es la cadena "utf-8" que no distingue mayúsculas de minúsculas. de Google Cloud.
Es posible que hayas notado la metadeclaración del grupo de caracteres original que se usaba para incluir el atributo http-equiv. Es la forma abreviada de "http-equivalent", ya que la metaetiqueta es básicamente replicando lo que podría configurarse en un encabezado HTTP. Además de la excepción charset, todas las demás metaetiquetas definidas en la especificación HTML de WHATWG 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 solía tener, y metatipos con nombre, como la metaetiqueta de viewport con el atributo name, que ya analizamos en la sección de estructura del documento. Los metatipos name y http-equiv deben incluir el atributo content, que define el contenido del tipo de metadatos enumerados.
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 la configuración de directivas 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 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 establecida en el atributo content, o incluso redireccionar a una URL diferente, esto no es recomendable. Actualizar y redireccionar el contenido sin una solicitud explícita del usuario para hacerlo es una usabilidad deficiente y afecta negativamente la accesibilidad. ¿No te agrada que esté en medio de un párrafo y la página se restablezca? Imagina que tienes 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 reloj". y evitar que se produzca
el redireccionamiento.
No la incluiremos en nuestro sitio porque no hay motivo para agotar el tiempo de espera de una sesión de usuario que no sea para 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 de servidores y los extremos de secuencias de comandos permitidos, lo que ayuda a proteger 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 las directivas content-security-policy.
Metaetiquetas con nombre
La mayoría de las veces, incluirás metadatos con nombre. Incluye el atributo name, cuyo valor del atributo es 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 snake-oil de optimización para motores de búsqueda abusaron de la metaetiqueta de palabras clave y las llenaron con listas de palabras spam separadas por comas en lugar de listas de términos clave relevantes, de manera que los motores de búsqueda ya no consideran que estos metadatos sean útiles. No es necesario que desperdicies tiempo, esfuerzo ni bytes en el agregado.
Descripción
Sin embargo, el valor description es útil para la SEO: 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, utilizan esta etiqueta 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 mitad de nuestra 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 informárselo. <meta name="robots" content="noindex, nofollow" /> indica a los bots que no indexen el sitio ni sigan ningún vínculo. Los bots deberían escuchar la solicitud, pero no hay ninguna ley que exija que la presten. No es necesario que incluyas <meta name="robots" content="index, follow" /> para solicitar que se indexe el sitio y se sigan los vínculos, ya que es la opción predeterminada, 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 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 es un archivo de manifiesto requerido por una AWP, puedes incluir el color del tema allí. Sin embargo, definirlo en el HTML garantiza que se encuentre el color inmediatamente, antes de la renderización, lo que puede ser más rápido en la primera carga que cuando se espera el manifiesto.
Para establecer el color del tema en el tono azul del color de fondo de nuestro sitio, incluye:
<meta name="theme-color" content="#226DAA" />
La metaetiqueta de color de tema puede incluir un atributo media que habilita 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 todas las demás.
Existen otros metavalores name, pero los que analizamos son los más comunes. A excepción de la declaración de diferentes valores de theme-color para distintas consultas de medios, incluye solo una de cada metaetiqueta. Si necesitas incluir más de un tipo de metaetiqueta para admitir los navegadores heredados, los valores heredados deben aparecer después de los valores más nuevos, ya que los usuarios-agentes leen reglas sucesivas hasta que encuentran una coincidencia.
Abrir gráfico
Open Graph y 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 tomarán correctamente el título de tu página y la descripción de la metaetiqueta de descripción, y se presentará la misma información que los motores de búsqueda, pero puedes configurar intencionalmente lo que deseas que vean los usuarios cuando se publique un vínculo a 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 del sitio. 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 valor de esa propiedad. El atributo property no está definido en las especificaciones oficiales, pero es ampliamente compatible con aplicaciones que admiten el protocolo Open Graph. Creando "nuevo" atributos como property garantizan que los valores 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 que se muestre. Por lo general, este 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. Esto aparecerá después del título definido en og:title. Proporciona la URL absoluta de la imagen del banner que quieres que se muestre, incluido el protocolo https://. Cuando incluyas una imagen en HTML, incluye siempre una descripción de texto alternativo para la imagen, incluso si esta aparecerá 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 aparezca el vínculo o habilitar el seguimiento del vínculo 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 las especificaciones futuras, en lugar de usar un atributo nuevo, como el atributo property en Open Graph, para los datos de tarjetas de Twitter, todos los valores de nombre incluyen el prefijo 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, a pesar de que ambos tienen vínculos a la misma página principal de la conferencia.
Otra metainformación útil
Si alguien agrega tu sitio a favoritos, lo agrega a su pantalla de inicio, si tu sitio es una aplicación web progresiva o si funciona sin conexión o si no se muestran las funciones de Chrome del 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. Este es 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 son compatibles con las aplicaciones web, es decir que el sitio puede funcionar por sí solo con una IU mínima, como sin botón Atrás, 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úyelos únicamente si la app es realmente capaz de hacerlo. De lo contrario, estarás estableciendo tus seguidores más fervientes, aquellos que agregaron tu sitio a su pantalla de inicio, para una experiencia del usuario realmente mala. Perderás su amor.
Si alguien va a guardar tu ícono en la pantalla principal de un dispositivo pequeño, debes proporcionarle al sistema operativo un nombre corto que no ocupe mucho espacio en la pantalla principal de un dispositivo pequeño. Puedes hacerlo incluyendo una metaetiqueta o usando un archivo de manifiesto web. A continuación, se muestra el método de metaetiqueta:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
Viste varias metaetiquetas, que alargarán el título. Si realmente estás creando una aplicación web progresiva compatible con una app web y compatible con el uso sin conexión, en lugar de incluir estas dos metaetiquetas adicionales, puedes incluir short_name: MLW de forma más simple y concisa en un archivo webmanifest.
El archivo de manifiesto puede impedir que un encabezado difícil de manejar esté lleno de etiquetas <link> y <meta>. Podemos crear un archivo de manifiesto, generalmente llamado manifest.webmanifest o manifest.json. Luego, usamos la etiqueta <link> práctica 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 apps web de MDN.
Tu HTML ahora se ve más o menos así:
<!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á listo.
Ahora que tu <head> está casi completa, puedes profundizar en HTML semántico.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre metadatos
La directiva refresh pragma.
Abre las metaetiquetas del gráfico.