Dans la section "Structure du document", vous avez découvert les composants que vous trouvez (presque) toujours dans l'élément <head> d'un document HTML. Bien que tout ce qui se trouve dans <head>, y compris <title>, <link>, <script>, <style> et le <base> moins utilisé, soit en réalité des "métadonnées", il existe une balise <meta> pour les métadonnées qui ne peuvent pas être représentées par ces autres éléments.
La spécification comprend plusieurs métatypes, et il en existe de nombreux autres qui sont compatibles avec les applications et qui ne figurent dans aucune spécification officielle. Dans cette section, nous allons évoquer les attributs et les valeurs inclus dans les spécifications, les valeurs de contenu et les noms de métanoms courants, ainsi que quelques métatypes extrêmement utiles pour le référencement naturel, les publications sur les réseaux sociaux et l'expérience utilisateur qui ne sont pas officiellement définis par le whatWG ou le W3C.
Les balises <meta> obligatoires ont été revisitées
Récapitulons les deux balises <meta> nécessaires déjà abordées (la déclaration d'ensemble de caractères et la balise Meta de la fenêtre d'affichage) afin de mieux comprendre la balise <meta> au cours du processus.
L'attribut charset de l'élément <meta> se présente de manière unique. À l'origine, les métadonnées du jeu de caractères étaient écrites sous la forme <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, mais de nombreux développeurs ont mal saisi l'attribut content en content="text/html" charset="<characterset>" que les navigateurs ont commencé à accepter le charset en tant qu'attribut. Elle est désormais standardisée dans le standard de vie HTML sous la forme <meta charset="<charset>" />, où, pour le langage HTML,<charset> correspond à la chaîne non sensible à la casse "utf-8" .
Vous avez peut-être remarqué la métadéclaration du jeu de caractères d'origine utilisée pour inclure l'attribut http-equiv. Elle est l'abréviation de "http-équivalent", car la balise Meta reproduit essentiellement ce qui pourrait être défini dans un en-tête HTTP. Hormis l'exception charset, toutes les autres balises Meta définies dans la spécification HTML WHATWG contiennent l'attribut http-equiv ou name.
Balises Meta officiellement définies
Il existe deux principaux types de balises Meta: les directives pragma, avec l'attribut http-equiv (comme la balise Meta charset), et les métatypes nommés, comme la balise Meta window (avec l'attribut name) dont nous avons parlé dans la section sur la structure du document. Les métatypes name et http-equiv doivent tous deux inclure l'attribut content, qui définit le contenu pour le type de métadonnées répertorié.
Directives Pragma
La valeur de l'attribut http-equiv correspond à une directive pragma. Ces directives décrivent comment la page doit être analysée. Les valeurs http-equiv acceptées permettent de définir des instructions lorsque vous ne pouvez pas définir directement des en-têtes HTTP.
Elle définit sept directives pragma, dont la plupart ont d'autres méthodes de définition. Par exemple, même si vous pouvez inclure une instruction de langue avec <meta http-equiv="content-language" content="en-us" />, nous avons déjà vu comment utiliser l'attribut lang dans l'élément HTML, qui est l'attribut à utiliser à la place.
La directive pragma la plus courante est refresh.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
Bien que vous puissiez définir une directive pour qu'elle s'actualise selon l'intervalle défini en secondes dans l'attribut content, et même rediriger vers une autre URL, cela n'est pas recommandé. L'actualisation et la redirection du contenu sans demande explicite de l'utilisateur nuit à la facilité d'utilisation et ont un impact négatif sur l'accessibilité. Cela ne vous dérange pas que la page se réinitialise au milieu d'un paragraphe ? Imaginez que vous ayez des problèmes cognitifs ou visuels et que cela se produise. Si vous comptez actualiser la page à l'aide d'une redirection, assurez-vous que l'internaute a suffisamment de temps pour lire la page. Ajoutez également un lien permettant d'accélérer le processus et, le cas échéant, un bouton permettant d'arrêter le temps et d'empêcher la redirection.
Nous ne l'inclurons pas dans notre site, car il n'y a aucune raison d'interrompre une session utilisateur autrement que pour gêner nos visiteurs.
La directive pragma la plus utile est content-security-policy. Elle permet de définir une règle de contenu pour le document actuel. Les règles de contenu spécifient principalement les origines de serveur et les points de terminaison de script autorisés, ce qui permet de se prémunir contre les attaques par script intersites.
<meta http-equiv="content-security-policy" content="default-src https:" />
Si vous n'êtes pas autorisé à modifier les en-têtes HTTP (ou si vous le faites), voici une liste de valeurs de contenu séparées par un espace pour les instructions content-security-policy.
Balises Meta nommées
La plupart du temps, vous incluez des métadonnées nommées. Incluez l'attribut name, dont la valeur correspond au nom des métadonnées. Comme pour les directives pragma, l'attribut content est obligatoire.
L'attribut name est le nom des métadonnées. En plus de viewport, vous souhaiterez probablement inclure description et theme-color, mais pas keywords.
Mots clés
Les commerciaux du référencement naturel (snake-oil) ont utilisé la balise Meta des mots clés en les truffant de listes de spam séparées par une virgule au lieu de listes de termes clés pertinents. Les moteurs de recherche ne considèrent donc plus ces métadonnées comme utiles. Inutile de perdre du temps, de l'énergie et de la quantité d'octets en les ajoutant.
Description
La valeur description, en revanche, est utile pour le SEO: la valeur du contenu de la description correspond souvent à ce que les moteurs de recherche affichent sous le titre de la page dans les résultats de recherche. Certains navigateurs, tels que Firefox et Opera, l'utilisent comme description par défaut des pages ajoutées aux favoris. La description doit être un résumé court et précis du contenu de la page.
<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 deuxième partie de notre description n'a aucun sens pour vous, vous n'avez probablement pas vu le film Zoolander.
Robots
Si vous ne souhaitez pas que votre site soit indexé par les moteurs de recherche, vous pouvez les en informer. <meta name="robots" content="noindex, nofollow" /> indique aux robots de ne pas indexer le site et de ne suivre aucun lien. Les bots doivent écouter la demande, mais aucune loi ne les oblige à tenir compte de la demande. Vous n'avez pas besoin d'inclure <meta name="robots" content="index, follow" /> pour demander l'indexation du site et le suivi des liens, car il s'agit du paramètre par défaut, sauf indication contraire des en-têtes HTTP.
<meta name="robots" content="index, follow" />
Couleur du thème
La valeur theme-color vous permet de définir une couleur pour personnaliser l'interface du navigateur. La valeur de la couleur de l'attribut content sera utilisée par les navigateurs et systèmes d'exploitation compatibles. Vous pourrez ainsi suggérer aux user-agents une couleur suggérée pour la barre de titre, la barre d'onglets ou d'autres composants Chrome. Cette balise Meta est particulièrement utile pour les applications Web progressives. Toutefois, si vous incluez un fichier manifeste, comme requis par une PWA, vous pouvez y inclure la couleur du thème. Toutefois, la définition dans le code HTML garantit que la couleur sera détectée immédiatement, avant l'affichage, ce qui peut être plus rapide lors du premier chargement qu'en attendant le fichier manifeste.
Pour définir la couleur du thème sur la tonalité bleue de l'arrière-plan de notre site, incluez:
<meta name="theme-color" content="#226DAA" />
La balise Meta de couleur du thème peut inclure un attribut media permettant de définir différentes couleurs de thème en fonction des requêtes média. L'attribut media ne peut être inclus que dans cette balise Meta et est ignoré dans toutes les autres balises Meta.
Il existe plusieurs autres méta-valeurs name, mais celles dont nous avons parlé sont les plus courantes. Vous ne devez pas déclarer des valeurs theme-color différentes pour différentes requêtes média, n'incluez qu'une balise Meta de chaque type. Si vous devez inclure plusieurs types de balises Meta pour prendre en charge les anciens navigateurs, les anciennes valeurs doivent être placées après les nouvelles, car les user-agents lisent les règles successives jusqu'à ce qu'ils trouvent une correspondance.
Ouvrir le graphique
Vous pouvez utiliser Open Graph et des protocoles de balises Meta similaires pour contrôler la façon dont les sites de réseaux sociaux, tels que Twitter, LinkedIn et Facebook, affichent les liens vers votre contenu. S'ils ne sont pas inclus, les sites de réseaux sociaux récupèrent correctement le titre de votre page et la description dans la balise Meta "description". Il s'agit des mêmes informations que celles fournies par les moteurs de recherche. Toutefois, vous pouvez définir de façon intentionnelle ce que vous voulez que les utilisateurs voient lorsqu'un lien est publié sur votre site.
Lorsque vous publiez un lien vers MachineLearningWorkshop.com ou web.dev sur Facebook ou Twitter, une fiche contenant une image, le titre et la description du site s'affiche. La fiche complète est un lien hypertexte vers l'URL que vous avez fournie.
Les balises Meta Open Graph comportent chacune deux attributs: l'attribut property au lieu de l'attribut name, et le contenu ou la valeur de cette propriété. L'attribut property n'est pas défini dans les spécifications officielles, mais il est largement pris en charge par les applications compatibles avec le protocole Open Graph. La création d'attributs "nouveaux" tels que property garantit que les valeurs créées pour l'attribut du protocole n'entreront pas en conflit avec les valeurs futures des attributs name ou http-equiv.
Créer une fiche multimédia 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" />
Indiquez le titre de votre post pour l'afficher. Ce titre s'affiche généralement sous l'image et au-dessus de la description. La description doit résumer votre message en trois phrases maximum. Il s'affichera après le titre défini dans og:title. Indiquez l'URL absolue de l'image de bannière que vous souhaitez afficher, y compris le protocole https://. Lorsque vous incluez une image dans le code HTML, incluez toujours une autre description pour l'image, même si elle apparaîtra ailleurs. Pour les fiches de réseaux sociaux Open Graph, définissez alt comme valeur de contenu de la propriété og:image:alt. Vous pouvez également inclure une URL canonique avec og:url.
Ces balises Meta sont toutes définies dans le protocole Open Graph. Ces valeurs doivent correspondre au contenu que l'application Web tierce doit afficher.
Les autres réseaux sociaux possèdent leurs propres syntaxes, comme le balisage de carte Twitter. Vous pouvez ainsi offrir une expérience différente en fonction de l'emplacement du lien ou activer le suivi des liens en ajoutant un paramètre à la fin de l'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" />
Dans le cas de Twitter, pour s'assurer que la valeur de l'attribut name n'entre pas en conflit avec les spécifications futures, au lieu d'utiliser un nouvel attribut tel que l'attribut property dans Open Graph, toutes les valeurs de nom sont précédées de twitter: pour les données de carte Twitter.
Vous pouvez voir à quoi ressemblera votre fiche de réseaux sociaux sur Twitter et Facebook.
Vous pouvez utiliser des images, des titres et des descriptions différents pour les sites de réseaux sociaux ou pour différents paramètres de lien. Par exemple, https://perfmattersconf.com définit différentes valeurs pour og:image, og:title et og:description en fonction du paramètre de l'URL.
Si vous saisissez https://perfmattersconf.com?name=erica et https://perfmattersconf.com?name=melanie dans l'outil de validation des cartes de Twitter, vous verrez ces deux fiches différentes. Leur contenu est différent, même si elles redirigent toutes les deux vers la même page d'accueil de la conférence.
Autres méta-informations utiles
Si un utilisateur ajoute votre site à ses favoris, l'ajoute à son écran d'accueil, ou s'il s'agit d'une progressive web app, ou s'il fonctionne hors connexion ou sans les fonctionnalités Chrome du navigateur, vous pouvez fournir des icônes d'application pour l'écran d'accueil de l'appareil mobile.
Vous pouvez utiliser la balise <link> pour créer un lien vers les images de démarrage que vous souhaitez utiliser. Voici un exemple d'inclusion de quelques images avec des requêtes média:
<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 votre site ou votre application est compatible avec les applications Web, c'est-à-dire qu'il peut fonctionner de manière autonome avec une interface utilisateur minimale (pas de bouton "Retour", par exemple), vous pouvez utiliser des balises Meta pour indiquer au navigateur que:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
Ne les incluez que si votre application est compatible avec celle-ci. Si votre site ne l'est pas, vous allez configurer vos plus fervents supporters, c'est-à-dire ceux qui l'ont ajouté à leur écran d'accueil, pour une très mauvaise expérience utilisateur. Tu vas perdre leur amour !
Si un utilisateur souhaite enregistrer votre icône sur l'écran d'accueil de son petit appareil, vous devez fournir au système d'exploitation un nom court qui n'occupe pas beaucoup de place sur l'écran d'accueil d'un petit appareil. Pour ce faire, ajoutez une balise Meta ou utilisez un fichier manifeste Web. L'exemple suivant illustre la méthode de la balise Meta:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
Vous avez couvert plusieurs balises Meta, qui allongent toutes votre en-tête. Si vous créez effectivement une progressive web app compatible avec les applications Web et hors connexion, au lieu d'inclure ces deux balises Meta supplémentaires, vous pouvez inclure short_name: MLW de manière plus simple et succincte dans un fichier manifeste Web.
Le fichier manifeste permet d'éviter la présence d'un en-tête difficile à gérer rempli de balises <link> et <meta>. Nous pouvons créer un fichier manifeste, généralement appelé manifest.webmanifest ou manifest.json. Nous utilisons ensuite la balise pratique <link> avec un attribut rel défini sur manifest et l'attribut href défini sur l'URL du fichier manifeste:
<link rel="manifest" href="/mlw.webmanifest" />
Cette série est axée sur le langage HTML, mais vous pouvez consulter le cours web.dev sur les progressive web apps ou la documentation sur les fichiers manifestes d'applications Web de MN.
Votre code HTML ressemble maintenant à ceci:
<!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>
C'est assez long, mais c'est fait.
Maintenant que votre <head> est presque terminé, vous pouvez vous familiariser avec le HTML sémantique.
Testez vos connaissances
Tester vos connaissances sur les métadonnées
La directive pragma d'actualisation.
Balises Meta Open Graph.