Métadonnées, référencement et partage

Une page web a deux publics. Le premier la lit : c'est l'élève qui commande un manuel. Le second ne la voit jamais s'afficher : c'est le navigateur qui choisit l'encodage et la largeur d'écran, le moteur de recherche qui décide de la montrer ou non, le réseau social qui fabrique un aperçu quand on y colle son adresse. Tout ce que ce second public lit se trouve dans l'élément <head>, que les chapitres précédents ont à peine ouvert : <meta charset> et <title>.

Quand un étudiant tape « livre java débutant paris » dans un moteur de recherche, puis partage la fiche du livre avec un camarade, il lit en réalité trois textes que la page de la Librairie du Campus a écrits pour lui : le titre et la description affichés dans les résultats, et la carte de partage (image, titre, résumé) dans sa messagerie. Ce chapitre apprend à les écrire.

9.1 La tête du document

9.1.1 Une tête complète

Voici la fiche d'un livre de la Librairie avec une tête complète. Elle est longue ; nous allons la parcourir bloc par bloc.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Programmation Java, I. Alame — La Librairie du Campus</title>
  <meta name="description" content="Apprendre Java à partir de zéro, de la première classe aux threads et au réseau. 318 pages, exercices corrigés. 32,00 €, en stock.">
  <link rel="canonical" href="https://librairie-campus.example/livre.html">
  <link rel="icon" href="images/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="images/icone-180.png">

  <meta property="og:type" content="book">
  <meta property="og:title" content="Programmation Java, I. Alame">
  <meta property="og:description" content="Apprendre Java à partir de zéro. 32,00 € à la Librairie du Campus.">
  <meta property="og:url" content="https://librairie-campus.example/livre.html">
  <meta property="og:image" content="https://librairie-campus.example/images/programmation-java-1200x630.jpg">
  <meta property="og:image:alt" content="Couverture du livre Programmation Java">
  <meta property="og:locale" content="fr_FR">
  <meta property="og:site_name" content="La Librairie du Campus">
  <meta name="twitter:card" content="summary_large_image">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Book",
    "name": "Programmation Java",
    "author": { "@type": "Person", "name": "Ibrahim Alame" },
    "numberOfPages": 318,
    "inLanguage": "fr",
    "offers": {
      "@type": "Offer",
      "price": "32.00",
      "priceCurrency": "EUR",
      "availability": "https://schema.org/InStock"
    }
  }
  </script>
</head>
<body>
  <main>
    <h1>Programmation Java</h1>
    <p>Ibrahim Alame — 32,00 €</p>
  </main>
</body>
</html>

Rien de ce qui est écrit dans <head> ne s'affiche dans la page, sauf le titre, qui apparaît dans l'onglet du navigateur. Le corps <body> est réduit ici au strict minimum.

9.1.2 L'encodage

<meta charset="utf-8"> dit au navigateur comment transformer les octets du fichier en caractères. Il doit figurer dans les 1024 premiers octets du fichier : on le place donc en tout premier dans <head>, avant le titre, qui contient souvent des caractères accentués. UTF-8 est le seul encodage à utiliser ; le fichier doit d'ailleurs être enregistré en UTF-8 par l'éditeur, sans quoi la déclaration ment, et « é » s'affiche « é ».

9.1.3 La fenêtre d'affichage sur téléphone

Sans la ligne

<meta name="viewport" content="width=device-width, initial-scale=1">

un téléphone affiche donc la Librairie en miniature, illisible sans zoomer. Avec elle, la fenêtre a la largeur réelle de l'écran (width=device-width) et l'échelle initiale est 1 (initial-scale=1) : c'est la condition de toute mise en page adaptée au mobile, qu'écrira le livre CSS.

9.1.4 Le titre

Le contenu de <title> est l'une des métadonnées les plus lues : dans l'onglet, dans l'historique, dans les favoris, comme titre du résultat dans un moteur de recherche, et c'est la première chose qu'annonce un lecteur d'écran à l'ouverture de la page.