Décrire un événement en JSON-LD

Les informations d’un événement sont déjà visibles sur la page, mais les moteurs doivent aussi pouvoir les interpréter comme des données structurées. Vous allez décrire la soirée des cultures avec JSON-LD, sans changer son contenu affiché ni ajouter de composant à l’interface.

Placer les données structurées dans la page

JSON-LD est une représentation de données au format JSON intégrée dans un élément script dont le type est application/ld+json. Le navigateur ne l’affiche pas comme du texte de la page : le bloc fournit une description structurée destinée aux outils capables de la lire. Dans votre projet, placez-le dans le head de index.html, à côté des métadonnées existantes.

Le type Event indique que l’objet décrit un événement. La propriété name en donne le nom. startDate indique la date et l’heure de début au format ISO 8601, avec un décalage horaire explicite ; endDate donne ici l’heure de fin. La propriété location contient un objet de type Place, lui-même précisé par un nom et une adresse.

<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.",
  "url": "https://exemple.fr/evenements#evenements"
}
</script>

Les valeurs de cet exemple reprennent l’événement annoncé dans le projet : la soirée commence le 20 juin 2026 à 18 h, heure de Lyon, et se déroule à la Maison des associations. La propriété url désigne la page de l’événement ; le fragment #evenements renvoie à la section correspondante du document. L’adresse de l’image est absolue afin de désigner la ressource depuis un autre service.

Décrire les informations utiles de l’événement

Les propriétés eventStatus et eventAttendanceMode précisent respectivement que l’événement est programmé et qu’il a lieu en présence des participants. L’organisateur est décrit par un objet Organization. La description et l’image complètent les informations principales ; elles ne remplacent pas les propriétés qui identifient le nom, la date et le lieu.

Adaptez ces valeurs si l’événement change : ne conservez pas une date, une adresse ou un statut qui ne correspond plus à la réalité. Remplacez également les URL du domaine d’exemple par les URL de publication avant le déploiement. Les données structurées décrivent un événement précis ; elles ne doivent pas inventer des informations absentes du projet.

À retenir

• Placez la description JSON-LD dans un élément script de type application/ld+json.
• Utilisez le type Event et renseignez le nom, les dates, le lieu et l’URL de l’événement.
• Indiquez les dates au format ISO 8601 avec le décalage horaire approprié.
• Respectez la syntaxe JSON et remplacez les URL d’exemple avant publication.

Dans la prochaine leçon, vous apprendrez à valider les données structurées et à contrôler leur cohérence avec le contenu visible de la page.