Publier les métadonnées et optimiser les médias
Objectif : Compléter index.html avec les métadonnées de partage, les données Event et les réglages d’image cohérents avec l’événement publié.
Une page d’événement peut être correctement structurée tout en présentant un aperçu de partage incomplet ou des données qui ne correspondent plus à son contenu. Une image mal réglée peut aussi retarder l’affichage de l’élément principal. Vous allez contrôler ces éléments ensemble dans index.html, sans modifier style.css ni ajouter de fichier au projet.
Les leçons précédentes vous ont appris à rédiger les métadonnées essentielles, à construire un aperçu Open Graph et à décrire un événement en JSON-LD. Ici, l’enjeu est de vérifier leur concordance dans la page assemblée : le titre, la description, l’adresse, les dates, le lieu et l’image doivent désigner le même événement que celui présenté aux visiteurs.
Contrôler l’ensemble du document
Le code ci-dessous reprend l’état du projet à la fin de la leçon précédente et constitue le fichier complet index.html. La canonical et l’URL Open Graph désignent la page publiée sur exemple.fr ; remplacez ce domaine de démonstration par l’adresse réelle au moment de la publication. L’image Open Graph utilise une URL absolue, tandis que l’image affichée dans la page conserve le chemin relatif du fichier livré avec le projet.
<!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/"
},
"url": "https://exemple.fr/evenements",
"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>Comparer les données aux informations publiées
Dans le document, le titre du navigateur décrit la page d’événements et la description résume les activités de l’association. Les propriétés Open Graph reprennent ces informations et indiquent la même URL canonique ; l’image de partage correspond à l’affiche de la soirée. Le bloc JSON-LD décrit spécifiquement l’événement : son nom, ses horaires avec fuseau, son lieu, son organisateur, son adresse et son descriptif doivent rester conformes à ce que la page présente.
La propriété url du JSON-LD pointe ici vers la page d’événements, dont le contenu visible présente la soirée. Si vous publiez plus tard une page dédiée, utilisez son URL réelle et maintenez la cohérence avec la canonical et les métadonnées de partage. Ne conservez pas une date, une adresse ou une image de démonstration si les informations effectivement publiées changent.
Vérifier les ressources image
L’affiche est l’image principale de la page : elle porte les dimensions width="1200" et height="800", conformément au fichier du projet, et reçoit fetchpriority="high". Le lien de préchargement cible cette même ressource. Ne lui ajoutez pas loading="lazy" : cela contredirait son statut d’image prioritaire et pourrait retarder son affichage.
La page ne contient pas d’autre image située hors écran à différer ; n’ajoutez donc pas un attribut de chargement différé sans ressource concernée. Contrôlez que le chemin assets/affiche-evenement.jpg mène bien au fichier attendu et que ses dimensions intrinsèques correspondent aux valeurs déclarées. La feuille style.css reste inchangée, conformément à l’état du projet.
À retenir
- Faites correspondre canonical, URL Open Graph, image de partage et contenu réellement publié.
- Gardez les dates, le lieu et la description JSON-LD alignés sur les informations visibles de l’événement.
- Conservez les dimensions de l’affiche et son statut prioritaire ; ne lui appliquez pas le chargement différé.
- Vérifiez que les URL d’image sont accessibles publiquement après publication.
Vous pourrez ensuite effectuer la recette finale au clavier et dans Lighthouse pour vérifier le parcours complet et relever les dernières corrections utiles.