{
 "url": "https://11d.im/journal/2026/20260909130109-eleventy-pixelfed-opengraph/",
 "published": "Wed Sep 09 2026 15:01:09 GMT+0200 (Central European Summer Time)",
 "updated": "Wed Sep 09 2026 16:56:47 GMT+0200 (Central European Summer Time)",
 "author": {
  "name": "tk",
  "url": "https://11d.im"
 },
 "content": "<section>\n<p><a href=\"https://ogp.me/\">Open Graph</a> est un microformat qui fait officiel de protocole pour indiquer quelques informations affich\u00e9es quand une page d'un site est partag\u00e9e sur un autre site, plus sp\u00e9cifiquement un r\u00e9seau social comme Mastodon ou un r\u00e9seau publicitaire comme Facebook ou Twitter.</p>\n<p>Cela demande d'avoir acc\u00e8s au code source de l'ent\u00eate HTML du site, ce qu'il y a dans la balise <code>&lt;head /&gt;</code>, pour y ajouter quatre balises <code>&lt;meta /&gt;</code> pour le titre, l'url, le type de contenu et une image pour faire jolie.</p>\n<p>Ce site ne fournissait qu'une partie des informations.\nIl manquait une image par ind\u00e9cision de savoir laquelle et si \u00e9ventuellement il fallait faire un peu de graphisme.</p>\n<p>En attendant, j'avais dans l'id\u00e9e d'utiliser les photos post\u00e9es sur <a href=\"https://pix.diaspodon.fr/users/tk\">mon compte pixelfed</a>, la version fedivers d'Instagram.\nPour faire cela bien, je voulais aussi prendre le temps d'utiliser un syst\u00e8me de cache afin de ne pas surcharger inutilement l'instance qui h\u00e9berge gracieusement mes quelques clich\u00e9s.\nEleventy propose tout cela.\n<a href=\"https://www.11ty.dev/docs/plugins/fetch/\"><code>11ty/eleventy-fetch</code></a> me permet de r\u00e9cup\u00e9rer la liste de mes photos sous la forme d'un flux <code>json</code> et <a href=\"https://www.11ty.dev/docs/plugins/image-js/\"><code>11ty/eleventy-img</code></a> fait la m\u00eame chose avec la premi\u00e8re photo indiqu\u00e9e dans le flux.\n<em>Simple as that</em>.</p>\n<p>Pour les d\u00e9tails, le code source est dans <a href=\"https://codeberg.org/taniki/11d.im/commit/e4734e5bae513cca3fcf931da87ecd37bc67538c\">ce commit sur codeberg</a>.</p>\n<p>Il est un tout petit plus compliqu\u00e9 que n\u00e9cessaire.\nLes fichiers <code>_11ty/opengraph.js</code> et <code>data/opengraph.js</code> pourraient \u00eatre r\u00e9unis.</p>\n</section>",
 "content-plain": "Open Graph est un microformat qui fait officiel de protocole pour indiquer quelques informations affich\u00e9es quand une page d'un site est partag\u00e9e sur un autre site, plus sp\u00e9cifiquement un r\u00e9seau social comme Mastodon ou un r\u00e9seau publicitaire comme Facebook ou Twitter.\n\nCela demande d'avoir acc\u00e8s au code source de l'ent\u00eate HTML du site, ce qu'il y a dans la balise <head />, pour y ajouter quatre balises <meta /> pour le titre, l'url, le type de contenu et une image pour faire jolie.\n\nCe site ne fournissait qu'une partie des informations. Il manquait une image par ind\u00e9cision de savoir laquelle et si \u00e9ventuellement il fallait faire un peu de graphisme.\n\nEn attendant, j'avais dans l'id\u00e9e d'utiliser les photos post\u00e9es sur mon compte pixelfed, la version fedivers d'Instagram. Pour faire cela bien, je voulais aussi prendre le temps d'utiliser un syst\u00e8me de cache afin de ne pas surcharger inutilement l'instance qui h\u00e9berge gracieusement mes quelques clich\u00e9s. Eleventy propose tout cela. 11ty/eleventy-fetch me permet de r\u00e9cup\u00e9rer la liste de mes photos sous la forme d'un flux json et 11ty/eleventy-img fait la m\u00eame chose avec la premi\u00e8re photo indiqu\u00e9e dans le flux. Simple as that.\n\nPour les d\u00e9tails, le code source est dans ce commit sur codeberg.\n\nIl est un tout petit plus compliqu\u00e9 que n\u00e9cessaire. Les fichiers _11ty/opengraph.js et data/opengraph.js pourraient \u00eatre r\u00e9unis.",
 "syndication": [
  "https://social.apreslanu.it/@tk/117241257608959719"
 ],
 "type": "entry",
 "name": "utiliser la derni\u00e8re photo provenant de pixelfed comme image opengraph"
}