Configurer l’aperçu Open Graph
Objectif : Définir les propriétés Open Graph nécessaires au partage d’une page sur les réseaux sociaux.
Quand une personne partage la page de votre association, le réseau social peut afficher un titre, une description et une image. Si ces informations sont absentes, incohérentes ou inaccessibles, l’aperçu risque de présenter un contenu générique ou une mauvaise affiche. Vous allez vérifier et renseigner ces informations dans l’en-tête HTML de la page d’événements.
La leçon précédente a défini le titre du document, sa description et son URL canonique. Open Graph complète ces informations pour les aperçus de partage : il ne remplace ni le contenu visible de la page ni les métadonnées essentielles déjà en place. Chaque propriété est déclarée avec une balise meta dans head, au moyen des attributs property et content.
Les quatre informations de l’aperçu
og:title donne le titre affiché dans l’aperçu, og:description en fournit le résumé et og:url désigne l’adresse de la page partagée. og:image indique l’image associée à cet aperçu. Pour cette page, utilisez les mêmes formulations que pour le titre et la description déjà définis, et l’URL canonique comme adresse de référence : les informations doivent décrire une seule page de façon cohérente.
Deux autres propriétés donnent un contexte utile. og:type précise le type de contenu général ; website convient à la page d’ensemble des événements de l’association. og:locale indique la langue et la région du contenu ; fr_FR correspond ici à un contenu en français destiné au public français. Elles ne remplacent pas les quatre propriétés principales.
En-tête de la page d’événements
L’extrait ci-dessous montre l’en-tête complet du fichier index.html à cet état du projet. Les balises Open Graph reprennent le contenu de la page et l’image de l’événement. L’URL de l’image est absolue : les services qui génèrent les aperçus peuvent ainsi la demander sans dépendre de la manière dont le chemin relatif serait interprété.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Association culturelle — événements</title>
<meta name="description" content="Découvrez les événements et les activités de notre association culturelle.">
<link rel="canonical" href="https://exemple.fr/evenements">
<meta property="og:type" content="website">
<meta property="og:locale" content="fr_FR">
<meta property="og:title" content="Association culturelle — événements">
<meta property="og:description" content="Découvrez les événements et les activités de notre association culturelle.">
<meta property="og:url" content="https://exemple.fr/evenements">
<meta property="og:image" content="https://exemple.fr/assets/affiche-evenement.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" as="image" href="assets/affiche-evenement.jpg">
<link rel="stylesheet" href="style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "Soirée des cultures",
"startDate": "2026-06-20T18:00:00+02:00",
"endDate": "2026-06-20T22:00:00+02:00",
"eventStatus": "https://schema.org/EventScheduled",
"eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
"location": {
"@type": "Place",
"name": "Maison des associations",
"address": {
"@type": "PostalAddress",
"streetAddress": "10 rue des Arts",
"addressLocality": "Lyon",
"postalCode": "69001",
"addressCountry": "FR"
}
},
"organizer": {
"@type": "Organization",
"name": "Association culturelle",
"url": "https://exemple.fr/"
},
"image": "https://exemple.fr/assets/affiche-evenement.jpg",
"description": "Une soirée de rencontres, de musique et de découvertes culturelles."
}
</script>
</head>
<body class="culture-page">
<a class="culture-lien-evitement" href="#contenu">Aller au contenu principal</a>
<header class="culture-entete">
<a href="/" aria-label="Association culturelle, accueil">Association culturelle</a>
<nav class="culture-navigation" aria-label="Navigation principale">
<ul>
<li><a href="#evenements">Événements</a></li>
<li><a href="#association">L’association</a></li>
</ul>
</nav>
<button class="culture-bouton" type="button" command="show-modal" commandfor="newsletter">S’inscrire à la newsletter</button>
</header>
<main class="culture-contenu" id="contenu">
<h1>Nos événements</h1>
<section class="culture-evenements" id="evenements" aria-labelledby="titre-evenements">
<h2 id="titre-evenements">À venir</h2>
<article class="culture-evenement">
<h3>Soirée des cultures</h3>
<img class="culture-image" src="assets/affiche-evenement.jpg" alt="Affiche illustrée de la soirée des cultures" width="1200" height="800" fetchpriority="high">
<p><time datetime="2026-06-20T18:00:00+02:00">20 juin 2026, à 18 h</time></p>
<p>Une soirée de rencontres, de musique et de découvertes culturelles.</p>
<details class="culture-details">
<summary>Informations pratiques</summary>
<p>Rendez-vous à la Maison des associations, 10 rue des Arts, Lyon.</p>
</details>
</article>
</section>
<section id="association" aria-labelledby="titre-association">
<h2 id="titre-association">Notre association</h2>
<p>Nous créons des occasions de partager et de découvrir les cultures.</p>
</section>
</main>
<dialog class="culture-dialogue" id="newsletter" aria-labelledby="titre-newsletter">
<h2 id="titre-newsletter">Recevoir la newsletter</h2>
<form action="/inscription" method="post">
<label for="courriel">Adresse courriel</label>
<input id="courriel" name="courriel" type="email" autocomplete="email" required>
<button class="culture-bouton" type="submit">S’inscrire</button>
<button class="culture-bouton" type="button" command="close" commandfor="newsletter">Fermer</button>
</form>
</dialog>
<footer class="culture-pied">
<p>Association culturelle — <a href="/mentions-legales">Mentions légales</a></p>
</footer>
</body>
</html>Vérifier l’aperçu obtenu
Contrôlez les valeurs dans le code source livré au navigateur, puis utilisez un outil de prévisualisation ou de débogage fourni par le réseau social visé. Une modification locale ne garantit pas qu’un service affiche immédiatement le nouvel aperçu : celui-ci peut conserver temporairement des informations déjà récupérées. Après publication, demandez une nouvelle récupération si l’outil le permet et vérifiez le titre, le résumé, l’adresse et l’image affichés.
L’image de partage doit représenter la page et être disponible publiquement à l’adresse déclarée. Ici, l’affiche de la soirée sert à illustrer la page des événements ; si la page change de sujet ou si le fichier est remplacé, mettez à jour la métadonnée. N’ajoutez pas plusieurs valeurs concurrentes pour une même propriété : gardez une déclaration claire par information afin d’éviter les interprétations divergentes.
La ligne twitter:card présente dans l’en-tête indique un format d’aperçu riche pour les services qui interprètent cette métadonnée. Elle ne remplace pas les propriétés Open Graph travaillées ici. Les métadonnées doivent rester cohérentes avec le contenu réel : une image attractive mais sans rapport avec la page, ou un titre qui promet un autre événement, induit les personnes en erreur.
À retenir
- Déclarez og:title, og:description, og:url et og:image dans head pour décrire l’aperçu de partage.
- Gardez le titre, la description et l’URL Open Graph cohérents avec la page et ses métadonnées essentielles.
- Fournissez pour og:image une URL absolue, publique et correspondant au contenu partagé.
- Vérifiez l’aperçu avec un outil de prévisualisation après publication ; les réseaux peuvent conserver temporairement des données en cache.
Dans la prochaine leçon, vous décrirez l’événement de l’association à l’aide de données structurées JSON-LD.