Rendre ta page facile à trouver et agréable à partager

1. À la fin de cette leçon, tu sauras

Écrire un titre de page et une description qui disent clairement ce qu’on va trouver.
Comprendre et faire ajouter les balises Open Graph, pour un bel aperçu au partage.
Choisir une adresse facile à dire et à retenir.
Créer un QR code vers ta page et vérifier l’aperçu avant de diffuser.

2. Pourquoi ça t’intéresse

Laurent a créé la page de son groupe de jazz amateur. Il envoie le lien dans la conversation familiale : l’aperçu affiche « index.html », aucune image, aucune phrase. Personne ne clique. Sur l’affiche du concert, il a écrit l’adresse en entier, trente caractères que personne ne recopie. Pourtant, la page est belle. Ce qui manque, ce sont les quelques lignes invisibles qui disent aux moteurs de recherche et aux messageries comment présenter la page, et un QR code qu’on scanne en deux secondes.

3. Avant de commencer


Il te faut	Ta page publiée (leçon 2), une image représentative (photo ou logo dont tu as les droits), un téléphone
Coût	Rien de plus
Durée	45 à 60 min

4. Comprendre en 3 minutes

Ta page a une vitrine invisible : un titre, une description et un aperçu de partage. C’est ce que les gens voient avant de cliquer.

Image mentale : la couverture et la quatrième de couverture d’un livre. On ne lit pas le livre en librairie ; on regarde le titre, l’image et le petit résumé au dos. Ta page, c’est pareil, dans un moteur de recherche ou une messagerie.

Élément	Où il s’affiche	Conseil
Titre de la page (balise `title`)	Onglet du navigateur, résultats de recherche	Ce que c’est et pour qui, en quelques mots : « Atelier couture solidaire, Lille »
Description (balise `meta description`)	Sous le titre dans les résultats de recherche	Une ou deux phrases qui donnent envie et disent l’essentiel
Balises Open Graph	Aperçu dans les messageries et réseaux sociaux	Titre, description, image et adresse de la page

Les balises Open Graph sont un standard (décrit sur ogp.me) : des lignes placées dans l’en-tête de la page, que les applications lisent au moment du partage. Les quatre de base s’appellent og:title, og:description, og:image et og:url. Point clé : l’image et l’adresse doivent être des adresses complètes, commençant par https://, car l’application ne voit que ce qui est en ligne.

Pour l’adresse, fais court et prononçable. Avec un hébergeur gratuit, choisis un nom de projet simple (il apparaît souvent dans l’adresse). Un nom de domaine à toi reste facultatif (leçon 2).

Le QR code est un pont entre le papier et ta page. Beaucoup de navigateurs proposent, dans leur menu de partage, de créer le QR code de la page ouverte ; sinon, un générateur en ligne réputé fait l’affaire. Préfère un générateur qui produit un code pointant directement vers ton adresse, sans adresse intermédiaire qui pourrait expirer.

5. Faire ensemble

Étape 1 · Écrire le titre et la description

Lance claude dans le dossier de ta page :

Lis index.html et fiche-projet.md. Propose-moi trois titres de page de moins de 60 caractères et trois descriptions d'une ou deux phrases.
Mon public : [qui doit trouver la page]. Ce qu'ils cherchent : [ce qu'ils taperaient dans un moteur de recherche].
Ne modifie rien.

Choisis, retouche, puis demande à l’agent de les placer dans la page, sans rien changer d’autre.

Étape 2 · Ajouter les balises Open Graph

Place ton image dans le dossier a-publier (leçon 2), puis :

Ajoute dans l'en-tête de index.html les balises Open Graph og:title, og:description, og:image et og:url.
L'adresse publique de ma page est : [ton adresse complète]. L'image s'appelle : [nom du fichier image].
Utilise des adresses complètes. Explique-moi chaque ligne ajoutée en une phrase.

Fais un point de sauvegarde, republie la page, puis ajoute une ligne à CHANGELOG.md.

Étape 3 · Vérifier l’aperçu

Envoie le lien de ta page à toi-même dans une messagerie que tu utilises.
Regarde l’aperçu : titre, résumé, image.
Si l’ancien aperçu persiste, c’est souvent une mémoire temporaire de l’application : attends un peu, ou essaie une autre messagerie, avant de chercher une erreur.

Étape 4 · Créer et tester le QR code

Ouvre ta page publiée dans ton navigateur et crée son QR code (menu de partage ou générateur réputé).
Enregistre-le en image, nommée par exemple qr-ma-page.png.
Scanne-le avec deux téléphones différents, dont un qui n’est pas le tien.
Imprime-le en petit sur une feuille et scanne-le encore : un QR code trop petit ou trop pâle se lit mal.

6. Faire toi-même

Prépare ta propre page à être partagée pour de vrai.

Consigne : un titre et une description choisis pour ton public, les quatre balises Open Graph avec une image dont tu as les droits, un aperçu vérifié dans au moins une messagerie, un QR code testé sur deux téléphones. Puis diffuse : envoie le lien à trois personnes concernées, ou affiche le QR code là où ton public passe (local de l’association, salle d’attente, tableau d’affichage).

Résultat attendu : un lien qui s’affiche avec titre, résumé et image, et un QR code imprimé qui mène à ta page.

Piège fréquent : imprimer le QR code avant d’avoir vérifié l’adresse définitive. Si tu changes ensuite d’hébergeur ou de nom de projet, tous tes flyers mènent à une page vide. Fixe ton adresse d’abord, imprime ensuite.

7. Vérifier

L’onglet du navigateur affiche mon titre, et non « index.html ».
La description dit en une ou deux phrases ce que propose la page.
Les quatre balises Open Graph sont présentes, avec des adresses complètes en https://.
L’aperçu dans une messagerie montre le bon titre, le bon résumé et l’image.
Le QR code, scanné par deux téléphones, ouvre bien ma page publiée.
CHANGELOG.md contient une ligne pour ces ajouts.

8. Ce que tu gardes

Dans ton carnet de bord : « Titre, description, aperçu, adresse, QR code : je vérifie avant de diffuser. » Garde l’image du QR code dans tes livrables, avec l’adresse exacte vers laquelle il pointe.

9. Pour aller plus loin

Le site ogp.me décrit les autres balises Open Graph possibles, si tu veux affiner l’aperçu.
La documentation MDN (developer.mozilla.org/fr) explique le rôle des balises de l’en-tête d’une page, pour comprendre ce que l’agent a écrit.