Carte de partage éditoriale

Carte OG Éditoriale

Une image de prévisualisation de lien cohérente par article. Chaque carte comporte :

• une règle en haut avec un accroche (la série ou la section), le sujet et une ligne de méta (temps de lecture ou date),
• le titre dans une grande police serif, rendu en texte réel pour garantir l'orthographe, réduit seulement si nécessaire, avec un ou deux mots dans la couleur d'accent,
• une signature avec les initiales ou une photo, et l'URL de l'article,
• un visuel sur la droite : l'une des quatre compositions de blocs choisies à partir du slug de l'article (pour qu'un article garde sa carte), une image que vous choisissez, ou rien, le titre s'étendant plus largement.

Un script lit vos articles dans cards.json, vous le révisez, et un second script rend chaque carte avec le navigateur Chrome déjà installé sur la machine. Rien à installer.

Ce dont vous avez besoin

• Node.js 18 ou plus récent.
• Chrome, Chromium ou Edge. Le script le trouve dans les emplacements habituels ; définissez CHROME_PATH s'il ne le trouve pas.
• Un accès Internet pendant le rendu, pour la feuille de style Google Fonts (Instrument Serif, Inter, IBM Plex Mono). Voir la section Dépannage pour rendre hors ligne.

Le dossier de cette compétence est <skill> ci-dessous : le dossier dans lequel se trouve ce SKILL.md.

Étapes

1. Créer cards.json

À partir d'articles Markdown (Astro, Hugo, Jekyll, Eleventy, Next.js MDX, tout ce qui a des métadonnées) :

node <skill>/scripts/from-posts.mjs content/blog --site=votresite.example --path=/blog/ --out-dir=public/og

Il lit tous les fichiers .md, .mdx et .markdown dans le dossier et crée une carte par article, du plus récent au plus ancien. Les articles avec draft: true sont ignorés. À partir des métadonnées, il prend :

Champ de la carte	Provenance
slug	slug, sinon permalink, sinon le nom du fichier (ou dossier pour index.md), sans la date en début
title	og_title, sinon title
kicker	kicker, sinon series, sinon --kicker=..., sinon "Article"
topic	topic, sinon la première category, sinon le premier tag
meta	reading_time, sinon le nombre de mots à 230 mots par minute : "8 min de lecture"
author	author (texte, ou name en dessous), sinon --author=...
url	--site + --path + slug, affiché sous l'auteur
out	<out-dir>/<slug>.png ; sans --out-dir, à côté de l'article comme <nom>.og.png (ou og.png à côté d'un index.md)

Exécutez-le à nouveau lorsque des articles sont ajoutés : les cartes déjà dans cards.json conservent vos modifications, les nouveaux articles sont ajoutés et les articles supprimés sont retirés.

À la main, pour les pages qui ne sont pas en Markdown (une newsletter, des pages d'atterrissage, des sections de documentation), écrivez vous-même la même structure :

{
  "theme": { "paper": "#131313", "ink": "#f2ede4", "accent": "#ff7a45" },
  "defaults": { "kicker": "Night Desk", "author": "Ines Varga" },
  "cards": [
    {
      "slug": "issue-41",
      "title": "Why every newsroom is quietly *rebuilding its CMS*",
      "topic": "Issue 41",
      "meta": "Oct 2026",
      "url": "nightdesk.example/41",
      "tags": ["#media", "№ 41"]
    }
  ]
}

defaults remplit tout champ qu'une carte omet.

2. Modifier les cartes

Ouvrez cards.json et parcourez les titres :

• Entourez d' *astérisques* le ou les deux mots qui portent le sens ; ils sont rendus en italique dans la couleur d'accent. "Shipping a design system *in a week*".
• Les titres sont plus lisibles en dessous de 70 caractères ; la limite est de 110. Au-delà de 80 environ, la police devient plus petite. Raccourcissez avec og_title dans les métadonnées de l'article, ou directement dans cards.json.

Tous les champs qu'une carte peut avoir :

Champ	Ce que c'est	Limite
title	Le titre (obligatoire)	110
slug	Nomme le fichier et choisit la mise en page (obligatoire sauf si out est défini)	–
out	Où va le PNG, relatif à cards.json (par défaut og/<slug>.png)	–
kicker	Étiquette en haut à gauche, dans la couleur d'accent	24
topic	Après l'accroche ; également le hashtag par défaut sur le visuel	28
meta	En haut à droite : temps de lecture, date, numéro	20
author	Nom de la signature ; les initiales vont dans le cercle	32
avatar	Une photo pour le cercle à la place des initiales (chemin ou URL)	–
url	Affiché sous le nom	48
art	blocks (par défaut), image ou none	–
image	L'image pour "art": "image" (chemin ou URL) ; elle est recadrée en 390×430	–
layout	De 1 à 4, pour choisir vous-même la composition des blocs	–
tags	Jusqu'à deux petites étiquettes sur le visuel, ex. ["#css", "Partie 2"]	16 chacun

Le thème définit l'apparence de chaque carte : paper (fond), ink (texte) et accent, en hexadécimal, plus serif, sans et mono pour d'autres familles de polices Google Fonts. L'accent est utilisé tel quel pour les blocs ; pour le texte, la carte le fonce ou l'éclaircit jusqu'à ce qu'il soit lisible. Deux thèmes de départ : le bleu encre par défaut (#fafaf7, #17181c, #2433e8) et le nuit (#131313, #f2ede4, #ff7a45).

3. Rendre

node <skill>/scripts/render.mjs cards.json

Il vérifie d'abord chaque carte et liste tous les problèmes en une fois, puis rend les cartes quatre par quatre (environ une seconde chacune) et vérifie que chaque PNG fait bien 1200×630. Ajoutez --scale=2 pour des images 2400×1260 (plus nettes sur les écrans haute densité, environ deux fois la taille du fichier), ou --only=slug,slug pour refaire quelques cartes.

4. Vérifier

Ouvrez og-preview.html, écrit à côté de cards.json : toutes les cartes côte à côte. Vérifiez les titres qui ont beaucoup rétréci (raccourcissez-les), les mots d'accent qui ont atterri sur la mauvaise phrase, et que les cartes voisines sont suffisamment différentes. Modifiez layout sur une carte pour choisir une autre composition.

5. Intégrer dans le site

Les cartes n'apparaissent dans les prévisualisations que lorsque chaque page pointe vers son image avec une URL absolue. Dans le <head> de la page :

<meta
  property="og:image"
  content="https://votresite.example/og/design-system-in-a-week.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Shipping a design system in a week" />
<meta name="twitter:card" content="summary_large_image" />

Faites-le une fois dans la mise en page ou le modèle d'article, construit à partir du slug, pas par article :

• Next.js (App Router) : dans generateMetadata de la route de l'article, renvoyez openGraph: { images: [{ url: /og/${slug}.png, width: 1200, height: 630 }] } et twitter: { card: 'summary_large_image' }, avec metadataBase défini dans la mise en page racine pour que l'URL devienne absolue.
• Astro, Eleventy, Jekyll, Hugo : ajoutez les balises dans la mise en page de base, en utilisant l'URL du site plus /og/ plus le slug de la page.
• Images à côté de l'article (sans --out-dir) : utilisez le chemin que votre framework sert pour les fichiers colocalisés.

Après le déploiement, collez l'URL d'un article dans un vérificateur de prévisualisation de lien, ou dans un brouillon sur X, LinkedIn ou Slack, pour voir la carte. Les plateformes mettent en cache les prévisualisations ; une image modifiée peut mettre du temps à apparaître.

6. Automatiser (optionnel)

Pour créer des cartes pour les nouveaux articles à chaque build, copiez les dossiers scripts/ et template/ de cette compétence dans le dépôt (par exemple tools/og/) et exécutez les deux scripts avant le build, par exemple comme un script prebuild dans package.json :

"prebuild": "node tools/og/scripts/from-posts.mjs content/blog --site=votresite.example --path=/blog/ --out-dir=public/og && node tools/og/scripts/render.mjs cards.json"

La machine de build a besoin de Chrome ; la plupart des images CI l'ont, ou définissez CHROME_PATH.

Dépannage

• render: fix cards.json first : chaque ligne nomme la carte, le champ et la limite.
• Chrome introuvable : installez Chrome ou Chromium, ou définissez CHROME_PATH sur l'exécutable.
• Le titre est dans une police serif simple ou les étiquettes dans une police système : la feuille de style Google Fonts ne s'est pas chargée. Pour rendre hors ligne, installez Instrument Serif, Inter et IBM Plex Mono (tous gratuits sur Google Fonts) et définissez "fonts": "" dans le thème. "fonts" peut également être votre propre URL de feuille de style pour d'autres polices.
• La prévisualisation sur une plateforme montre l'ancienne image ou aucune : vérifiez que l'URL og:image s'ouvre dans un navigateur et est absolue (avec https:// et votre domaine), puis demandez à la plateforme de re-scanner la page ou attendez l'expiration de son cache.

Fichiers

• scripts/from-posts.mjs : métadonnées vers cards.json, en conservant vos modifications lors des exécutions ultérieures. Aucune dépendance.
• scripts/render.mjs : vérifie cards.json, rend les PNG et écrit og-preview.html. Aucune dépendance.
• scripts/chrome.mjs : trouve Chrome et prend les captures d'écran.
• template/ : la carte elle-même. card.html et card.css sont la mise en page, card.js remplit le texte, choisit des couleurs lisibles, dessine le visuel et ajuste le titre.
• examples/field-notes/ : un petit blog (posts/) et le cards.json créé à partir de celui-ci avec from-posts.mjs, mots d'accent ajoutés. examples/night-desk/ : un cards.json écrit à la main pour une newsletter, en sombre. Les aperçus sur Lookbk sont rendus à partir de ceux-ci.
• NOTICE.md : les polices et logiciels utilisés par cette compétence.