Leçon 9 / 20

Rédiger les métadonnées essentielles d’une page

15 min HTML5 — accessibilité, composants natifs et métadonnées Gratuit

Objectif : Renseigner un titre, une description et une URL canonique adaptés à une page de l’association.

Quand une page d’événements est publiée, son contenu ne suffit pas à la décrire dans un onglet de navigateur ou dans un résultat de recherche. Un titre vague et une description absente rendent la page difficile à identifier avant même son ouverture. Vous allez régler ces informations dans l’en-tête du document, sans modifier le contenu visible ni les interactions déjà en place.

La page fil rouge possède déjà un élément title, une meta description et un lien canonical dans son head. Vous allez les examiner et les ajuster uniquement si leur valeur ne correspond pas à l’URL réellement publiée et au contenu de la page. Les métadonnées ne remplacent ni le titre visible de la page ni ses informations d’événement.

Décrire la page avec title

L’élément title donne le titre du document. Le navigateur l’affiche notamment dans l’onglet, et les moteurs de recherche peuvent s’en servir pour présenter la page. Il doit identifier la page avec des mots précis, sans se limiter à un intitulé générique comme « Accueil » ou « Événements ».

Pour le projet, le titre existant « Association culturelle — événements » indique l’organisation et le sujet de la page. Gardez cette formulation tant que la page présente bien les événements de l’association. Si vous créez ensuite une page consacrée à un événement précis, donnez-lui un titre distinctif correspondant à ce contenu plutôt que de réutiliser automatiquement celui de la liste.

Rédiger la meta description

La meta description résume le contenu de la page pour aider à en comprendre le sujet. Elle ne s’affiche pas comme un paragraphe dans le document : elle se place dans le head avec l’attribut name="description" et une valeur dans content. Rédigez une phrase concrète, fidèle à ce que la personne trouvera après avoir suivi le lien.

La description du projet annonce les événements et les activités de l’association culturelle. Elle constitue une base cohérente avec le contenu visible, notamment la soirée des cultures et la présentation de l’association. Évitez d’y annoncer des informations absentes de la page ou de répéter une liste de mots-clés sans phrase compréhensible.

Définir l’URL canonique

Une URL canonique indique l’adresse de référence que vous associez à cette page. Elle se déclare avec un lien rel="canonical" dans le head. Elle doit être une URL absolue, stable et correspondant à la page publiée, et non une adresse de test ou une URL d’une autre page.

Le contrat du projet fournit https://exemple.fr/evenements comme adresse canonique de la page. Dans votre site réel, remplacez le domaine d’exemple par celui qui sert effectivement la page, en conservant le chemin approprié. Ne choisissez pas une URL canonique uniquement parce qu’elle semble plus courte : elle doit désigner le contenu équivalent que vous souhaitez faire reconnaître comme référence.

Vérifier les métadonnées dans le projet

Aucun changement n’est nécessaire si les valeurs déjà présentes sont celles qui conviennent à la publication. Voici l’extrait de métadonnées à conserver dans le head d’index.html ; il ne remplace pas le reste de la page, notamment le script du projet et les références de ressources déjà présentes.

HTML
<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">
Aperçu du rendu
Chargement de l'aperçu…

Gardez un seul élément title, une meta description pertinente et une canonical pour cette page. Avant publication, comparez l’adresse canonique au chemin réellement servi et relisez la description en regard du contenu visible. Les prochaines leçons ajouteront des informations de partage et des données structurées ; elles devront rester cohérentes avec ces informations de base.

À retenir

  • Le title identifie clairement le document dans l’onglet et peut contribuer à son intitulé dans les résultats de recherche.
  • La meta description résume fidèlement le contenu réel de la page, sans promesse absente ni accumulation de mots-clés.
  • La canonical fournit une URL absolue, stable et correspondant à la page publiée.
  • Vérifiez l’accord entre le titre, la description, l’URL canonique et le contenu visible avant publication.

Dans la leçon suivante, vous compléterez ces informations pour contrôler l’aperçu de la page lors de son partage sur les réseaux sociaux.

Envie d'aller plus loin ?

Les cours Enovatic sont gratuits et le resteront. Si vous cherchez un accompagnement encadré, nos formations professionnelles sont animées par les mêmes formateurs.