Métadonnées XML OpenGraph dans les pages du site

Afin de permettre une meilleur intégration sur les plate-formes de réseaux sociaux, il serait sympa d’implémenter les métadonnées OpenGraph. Ça s’implémenter uniquement au rendu de la page (pas de protocole de négociation avec les plate-formes).

Par exemple avec ma dernière dépêche: https://linuxfr.org/news/la-pile-graphique-d-amd-sous-linux-est-desormais-completement-libre

Voici un exemple de balises meta qui pourraient être automatiquement générées :

<meta property="og:type" content="article"/>
<meta property="og:article:author" content="https://linuxfr.org/users/illwieckz"/>
<meta property="og:article:published_time" content="2025-07-03T14:25:34+02:00"/>
<meta property="og:article:modified_time" content="2025-07-03T14:25:34+02:00"/>
<meta property="og:article:section" content="linux"/>
<meta property="og:article:tag" content="amd"/>
<meta property="og:article:tag" content="carte_graphique"/>
<meta property="og:article:tag" content="pilote_libre"/>
<meta property="og:article:tag" content="radeon"/>
<meta property="og:article:tag" content="radeon"/>
<meta property="og:site_name" content="LinuxFr.org"/>
<meta property="og:url" content="https://linuxfr.org/news/la-pile-graphique-d-amd-sous-linux-est-desormais-completement-libre"/>
<meta property="og:title" content="La pile graphique d’AMD sous Linux est désormais complètement libre - LinuxFr.org"/>
<meta property="og:description" content="À l’occasion de la sortie de la version 25.10.1 de la suite Radeon Software for Linux du 21 mai 2025, AMD a annoncé que la série 25.10 est la dernière à livrer des composants logiciels propriétaires."/>
<meta property="og:image" content="https://img.linuxfr.org/img/68747470733a2f2f646c2e696c6c776965636b7a2e6e65742f622f6c696e757866722e6f72672f70696c6f7465732d616d642d6c69627265732f32303235303730322d3233353230372d3030302e6175746f636f6c6c616e742d6c696e757866726f72672d6361727465732d616d642e74686f6d61732d646562657373652e3732302e6a7067/20250702-235207-000.autocollant-linuxfrorg-cartes-amd.thomas-debesse.720.jpg"/>
<meta property="og:locale" content="fr_FR"/>

Il existe aussi le format Twitter Card, ce sont quasiment les mêmes données avec un balisage différent, ça ne coûte pas cher à rajouter :

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@linuxfrog"/>
<meta name="twitter:creator" content="@linuxfrorg"/>
<meta name="twitter:domain" content="linuxfr.org"/>
<meta name="twitter:url" content="https://linuxfr.org/news/la-pile-graphique-d-amd-sous-linux-est-desormais-completement-libre"/>
<meta name="twitter:title" content="La pile graphique d’AMD sous Linux est désormais complètement libre - LinuxFr.org"/>
<meta name="twitter:description" content="À l’occasion de la sortie de la version 25.10.1 de la suite Radeon Software for Linux du 21 mai 2025, AMD a annoncé que la série 25.10 est la dernière à livrer des composants logiciels propriétaires."/>
<meta name="twitter:image" content="https://img.linuxfr.org/img/68747470733a2f2f646c2e696c6c776965636b7a2e6e65742f622f6c696e757866722e6f72672f70696c6f7465732d616d642d6c69627265732f32303235303730322d3233353230372d3030302e6175746f636f6c6c616e742d6c696e757866726f72672d6361727465732d616d642e74686f6d61732d646562657373652e3732302e6a7067/20250702-235207-000.autocollant-linuxfrorg-cartes-amd.thomas-debesse.720.jpg"/>

Bon en fait, ici la valeur de twitter:creator devrait être @illwieckz mais on n’a pas cette info. Ce serait sympa d’avoir cette information pour Mastodon (puisqu’on peut renseigner son compte Mastodon sur LinuxFr), mais je ne sais pas s’il existe une balise meta HTML de ce type pour Mastodon.

Pour l’image, il suffit de rechercher et d’utiliser la première image de la dépêche, celle du chapo en priorité Il y a déjà comme usage de mettre une image dans le chapeau comme illustration, donc la plupart du temps c’est la bonne. Autant réutiliser l’url du cache. S’il n’y a aucune image, utiliser le logo du site.

Pour la description, il suffit de prendre les premières lignes du chapo, quitte à tronquer à X caractères et rajouter un … à la fin.

Tout le reste peut être extrait directement de la base de donnée sans aucun traitement.

Cela peut s’appliquer aux dépêches et journaux. Pour les entrées de forum, wiki, suivi, etc. peut-être est-il plus prudent de ne pas chercher l’image et de mettre le logo de LinuxFr par défaut.

Un des bénéfices collatéraux est que l’intégration de la publication à un réseau social pourrait se limiter à coller une url dans le message (si quelqu’un répare Twitter/X, par exemple), éventuellement le titre + l’url dans le message envoyé, rien d’autre, et le réseau social construit la prévisualisation du message tout seul, en retrouvant l’image et le résumé depuis la page sur linuxfr.org.

Quant aux pages utilisateur comme https://linuxfr.org/users/illwieckz elles pourraient présenter ce type de métadonnées :

<meta property="og:type" content="profile"/>
<meta property="og:title" content="Thomas Debesse sur LinuxFr.org"/>
<meta property="og:profile:username" content="illwieckz"/>
<meta property="og:profile:last_name" content="Thomas Debesse"/>
<meta property="og:description" content="Contributions de Thomas Debesse sur LinuxFr.org"/>
<meta property="og:url" content="https://linuxfr.org/users/illwieckz"/>
<meta property="og:image" content="https://img.linuxfr.org/avatars/621/033/000/avatar.png"/>

LinuxFr.org ne distingue pas first_name et last_name donc on pourrait mettre tout le nom public dans last_name.

On pourrait aussi adapter quelques de métadonnées simplifiées pour les pages d’accueil (listes des dépêches, journaux, etc.) et autres pages d’aide (titre…) et peut-être un autre type de format que summary_large_image pour les profiles et quand il n’y a pas d’image d’illustration (et que ça utilise le logo du site par défaut).

Le code de génération du flux Atom doit certainement pouvoir servir d’inspiration parce qu’il extrait déjà les mêmes métadonnées pour les formater dans un balisage XML similaire.

Voici quelque documentation:

Open Graph : https://ogp.me/
Twitter Card : https://developer.x.com/en/docs/x-for-websites/cards/overview/summary-card-with-large-image