Favicon et Open Graph - Le visage de la pyramide

Tu as quinze onglets ouverts dans ton navigateur et tu cherches celui du musée, mais ils ont tous la même petite icône grise, et leurs titres sont tronqués. Ou alors tu envoies à un ami le lien de ta page, et la messagerie n'affiche que l'adresse nue, sans image ni description. Deux petits détails dans la section <head> règlent ces deux situations. Chaque pyramide d'Égypte avait son symbole unique - le cartouche du pharaon. Dans le monde des sites web, ce symbole, c'est le favicon (l'icône dans l'onglet du navigateur) et ce sont les balises meta Open Graph (l'aperçu de la page sur les réseaux sociaux).

Favicon - l'icône de la page

Le favicon est une petite icône affichée à côté du titre de la page dans l'onglet du navigateur, mais aussi dans les favoris et dans l'historique. Tu l'ajoutes avec un élément <link> dans la section <head> :

1<head>
2  <!-- Favicon de base (16x16 ou 32x32 pixels) -->
3  <link rel="icon" type="image/x-icon" href="/favicon.ico">
4
5  <!-- Favicons modernes au format PNG -->
6  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
7  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
8
9  <!-- Icône pour les appareils Apple -->
10  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
11</head>

Le plus important est l'attribut rel="icon" - il indique au navigateur que le fichier désigné par href est l'icône de la page. type et sizes l'aident à choisir le meilleur fichier, et apple-touch-icon apparaît sur l'écran d'un iPhone une fois la page ajoutée à l'écran d'accueil. Même sans aucun lien, beaucoup de navigateurs essaieront de toute façon de récupérer le fichier /favicon.ico à la racine du serveur.

Les formats de favicons :

• .ico - format traditionnel, pris en charge par tous les navigateurs
• .png - format moderne avec transparence
• .svg - s'adapte à toutes les tailles, idéal pour les navigateurs modernes

Je te recommande un ensemble : un fichier .ico comme solution de secours et une icône SVG ou PNG pour les navigateurs plus récents. Conçois-la pour qu'elle reste lisible à 16 pixels - un cartouche avec un seul signe bien net fonctionne mieux qu'une scène entière avec des pyramides.

Open Graph - l'aperçu sur les réseaux sociaux

Quand tu partages un lien sur Facebook, X (anciennement Twitter) ou LinkedIn, un aperçu apparaît avec un titre, une description et une image. Cela fonctionne grâce aux balises meta Open Graph - un protocole créé par Facebook, que la plupart des services et des messageries lisent aujourd'hui. Tu les ajoutes à côté des balises meta ordinaires, avec l'attribut property :

1<head>
2  <!-- Balises meta de base -->
3  <meta charset="UTF-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5  <meta name="description" content="Une page sur les pyramides d'Égypte">
6
7  <!-- Open Graph -->
8  <meta property="og:title" content="Musée de l'Égypte antique">
9  <meta property="og:description" content="Découvre les secrets des pyramides et des pharaons">
10  <meta property="og:image" content="https://example.com/pyramid.jpg">
11  <meta property="og:url" content="https://example.com">
12  <meta property="og:type" content="website">
13</head>

Chaque balise forme une paire : le nom dans property et la valeur dans content. Le protocole en exige quatre sur chaque page : og:title, og:type, og:image et og:url. L'adresse de l'image doit être complète, avec https://, car le service la récupère depuis l'extérieur, et non depuis ton dossier.

X possède aussi son propre ensemble de balises, assez semblable : la Twitter Card. Remarque qu'ici, nous utilisons l'attribut name, et non property :

1<head>
2  <!-- Twitter Card -->
3  <meta name="twitter:card" content="summary_large_image">
4  <meta name="twitter:title" content="Musée de l'Égypte antique">
5  <meta name="twitter:description" content="Découvre les secrets des pyramides">
6  <meta name="twitter:image" content="https://example.com/pyramid.jpg">
7</head>

summary_large_image choisit un grand aperçu, avec une image sur toute la largeur. Quand il manque twitter:title ou twitter:image, X se rabat sur leurs équivalents Open Graph : tu ne peux donc pas te passer de twitter:card, mais tu peux omettre le reste.

Les balises meta Open Graph importantes :

• og:title - titre de la page (recommandé : jusqu'à environ 60 caractères)
• og:description - description de la page (recommandé : jusqu'à environ 160 caractères)
• og:image - image d'aperçu (recommandé : 1200x630 pixels)
• og:url - URL canonique de la page
• og:type - type de contenu (website, article, product)

Les limites de caractères sont des indications, et non des exigences du protocole - un service coupera généralement un texte plus long. Tu peux vérifier l'aperçu avant publication dans le Sharing Debugger de Facebook ou dans le Post Inspector de LinkedIn.

La balise meta description

N'oublie pas la balise meta classique description - Google l'affiche souvent comme description de la page dans les résultats de recherche, même s'il lui préfère parfois un extrait du contenu lui-même :

1<meta name="description" content="Musée de l'Égypte antique - visite les expositions, découvre l'histoire des pharaons. Billets en ligne.">

Écris-la pour un humain, pas pour un robot : une ou deux phrases qui donnent envie de cliquer. Chaque sous-page doit avoir sa propre description, différente des autres.

L'ordre dans le head

Reste la question de l'ordre. Celui que je te recommande commence par l'encodage des caractères, car le navigateur doit le connaître dans les 1024 premiers octets du document :

1<head>
2  <meta charset="UTF-8">
3  <meta name="viewport" content="width=device-width, initial-scale=1.0">
4  <title>Musée de l'Égypte antique</title>
5  <meta name="description" content="Expositions, billets et histoire des pharaons.">
6  <link rel="stylesheet" href="style.css">
7</head>

Après charset vient viewport, puis le titre et la description, et ensuite les liens vers les icônes et les feuilles de style, ainsi que les balises Open Graph. L'ordre des autres balises ne change rien au fonctionnement de la page, mais un rangement fixe te permet de savoir, dans chaque projet, où chercher quoi. Dans le projet final du module, le favicon et Open Graph seront obligatoires.

Pratique

Dans l'éditeur ci-dessous, tu trouveras une page avec un ensemble complet de balises meta et une maquette de carte Open Graph. Compare les balises de <head> avec la maquette et indique quelle balise est responsable de chaque élément de l'aperçu :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Musée d'Égypte | Page d'accueil</title>
7
8    <!-- Meta description -->
9    <meta name="description" content="Musée de l'Égypte ancienne - découvre les secrets des pyramides et des pharaons. Billets en ligne.">
10
11    <!-- Favicon -->
12    <link rel="icon" type="image/png" sizes="32x32" href="https://placehold.co/32x32/d4af37/1a1a2e?text=E">
13
14    <!-- Open Graph -->
15    <meta property="og:title" content="Musée de l'Égypte ancienne">
16    <meta property="og:description" content="Découvre les secrets des pyramides et des pharaons. Billets en ligne.">
17    <meta property="og:image" content="https://placehold.co/1200x630/d4af37/1a1a2e?text=Egypt+Museum">
18    <meta property="og:url" content="https://egypt-museum.com">
19    <meta property="og:type" content="website">
20
21    <!-- Twitter Card -->
22    <meta name="twitter:card" content="summary_large_image">
23    <meta name="twitter:title" content="Musée de l'Égypte ancienne">
24    <meta name="twitter:description" content="Découvre les secrets des pyramides et des pharaons">
25
26    <link rel="stylesheet" href="style.css">
27</head>
28<body>
29    <h1>Favicon et Open Graph en pratique</h1>
30
31    <section>
32        <h2>Balises meta de cette page</h2>
33        <p>Regarde le code source de la page (Ctrl+U) pour voir
34           toutes les balises meta dans la section &lt;head&gt;.</p>
35
36        <div class="meta-preview">
37            <h3>Aperçu Open Graph :</h3>
38            <div class="og-card">
39                <img src="https://placehold.co/600x315/d4af37/1a1a2e?text=Egypt+Museum"
40                     alt="Aperçu Open Graph" width="600" height="315">
41                <div class="og-info">
42                    <p class="og-url">egypt-museum.com</p>
43                    <h4>Musée de l'Égypte ancienne</h4>
44                    <p>Découvre les secrets des pyramides et des pharaons. Billets en ligne.</p>
45                </div>
46            </div>
47        </div>
48    </section>
49
50    <section>
51        <h2>Favicon</h2>
52        <p>Regarde l'onglet du navigateur - tu verras l'icône « E »
53           à côté du titre de la page. C'est le favicon !</p>
54        <p>On ajoute un favicon dans la section <code>&lt;head&gt;</code>
55           à l'aide de la balise <code>&lt;link&gt;</code>.</p>
56    </section>
57</body>
58</html>

Souviens-toi : le favicon est le cartouche du pharaon sur la porte de ta pyramide, et Open Graph est le panneau à l'entrée qui invite les visiteurs avant même qu'ils ne franchissent le seuil.