Compétence d'agent générateur d'images de carte Twitter

Générateur d'images pour cartes Twitter

Générez des images optimisées pour les aperçus de liens X (Twitter) — les cartes qui apparaissent dans le fil d'actualité lorsqu'un utilisateur partage un lien. Les cartes Twitter ont des dimensions d'image et un comportement de rendu distincts, différents de ceux d'Open Graph standard. Cette compétence couvre l'ensemble du pipeline de génération adapté au rapport hauteur/largeur 2:1 de Twitter et à ses particularités.

Les six approches de génération et les six styles visuels de og-image-generator s'appliquent ici. Les seules différences sont : dimensions de sortie (1200x675 au lieu de 1200x630), adaptations de conception spécifiques à X, zonage sécurisé pour le fil d'actualité et prise en charge des cartes player.

Quand utiliser

• L'utilisateur a besoin d'images 1200×675px (2:1) pour les aperçus de liens X/Twitter, summary_large_image, ou les posters de cartes player
• L'utilisateur mentionne twitter:image, carte Twitter, image d'aperçu X, aperçu de tweet ou conception de carte de fil d'actualité
• L'utilisateur a besoin de mises en page adaptées au mode sombre, de zones de contenu occupant les 60% supérieurs, ou de masques de bord de 20px pour le recadrage à coins arrondis de X
• L'utilisateur utilise déjà og-image-generator et souhaite la variante adaptée à Twitter des mêmes styles et pipelines

Quand NE PAS utiliser

• Images OG génériques (1200×630, 1,91:1) pour Facebook, LinkedIn, Slack, etc. — utilisez plutôt og-image-generator
• Configuration uniquement des balises meta HTML (sans créer le fichier image) — utilisez twitter-cards de marketing-skills
• Sortie SVG — Twitter ne prend pas en charge le SVG pour les images de carte ; utilisez PNG ou JPG
• Éditeur visuel sans code ou API hébergée — utilisez Oginify au lieu d'exécuter un pipeline d'agent

Lors de l'invocation : lors de la première utilisation, commencez par 1 à 2 phrases sur ce que couvre cette compétence et pourquoi elle est importante, puis fournissez la sortie principale. Lors d'une utilisation ultérieure ou si l'utilisateur demande de passer, allez directement à la sortie principale.

1. Comment Twitter consomme les images

Twitter lit les images dans cet ordre de priorité :

1. twitter:image — si elle est explicitement définie, utilisée directement
2. og:image — se rabat sur l'image OG si aucune balise de carte Twitter n'existe
3. Pas d'image — aperçu de lien en texte brut

Information clé : Facebook et LinkedIn ne lisent PAS twitter:image. Twitter est la seule plateforme qui lit les balises de carte Twitter. Cela signifie que vous avez besoin des DEUX chemins d'image dans vos métadonnées, même si le pipeline de rendu réel peut être partagé.

2. Spécifications des images Twitter

Le type de carte détermine l'affichage de l'image :

Pour la plupart des cas d'utilisation, visez summary_large_image en 1200x675px.

3. Six approches de génération (adaptées à Twitter)

Les six approches de og-image-generator §1 fonctionnent pour les images Twitter. La seule différence réside dans les dimensions de sortie. Cette section couvre les adaptations spécifiques à Twitter — voir og-image-generator §1 pour la documentation complète du pipeline de rendu.

3.1 Génération d'image par IA (Noyau n°1)

Même stratégie d'invite en trois parties que pour OG, mais avec un cadrage spécifique à Twitter :

Partie 1 — Description visuelle : arrière-plan, composition, ambiance
Partie 2 — Spécification du texte : texte EXACT, entre guillemets, avec indications de taille
Partie 3 — Contraintes Twitter : "1200x675px, rapport d'aspect 2:1, texte clé dans
         les 60% supérieurs, arrière-plan sombre préféré pour le mode sombre"

Approche hybride (recommandée) : l'IA génère l'arrière-plan/l'ambiance ; Satori superpose le texte. Crucial pour le texte en chinois où les modèles d'IA peinent encore — et l'utilisation du mode sombre par environ 40 % des utilisateurs de Twitter rend la précision du texte encore plus visible.

Voir og-image-generator §1.1 pour le tableau comparatif complet des outils d'IA (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).

3.2 Flux de travail natif de l'agent sensible au contenu (Noyau n°2)

Même flux de travail en 6 étapes que OG (§1.2) : Lire le contenu → Faire correspondre le style → Extraire les éléments visuels → Sélectionner la génération → Générer → Valider. Ajouts spécifiques à Twitter à chaque étape :

Étape 2 (Faire correspondre le style) — Considération du mode sombre de Twitter : préférez les styles à arrière-plan sombre (Terminal/CLI, Midnight Ink Magazine, Brutalist en mode sombre) ou les styles avec des variantes sombres pour X.

Étape 3 (Extraire les éléments visuels) — Le recadrage du fil d'actualité de Twitter à ~1:1 sur mobile signifie que l'élément visuel le plus important doit fonctionner dans un carré. Un ruban de données horizontal qui fonctionne en 1200x675 peut être invisible dans le recadrage carré. Extrayez au moins un élément qui se lit bien à 1:1.

Étape 4 (Sélectionner la génération) — Même arbre de décision. Pour la génération d'IA, ajoutez : "Le texte survivra-t-il à la largeur d'affichage mobile de ~260px de Twitter ?"

Étape 6 (Valider) — Exécutez à la fois les vérifications OG ET les vérifications spécifiques à Twitter (§8).

3.3 Satori + resvg (basé sur le code)

Même pipeline que OG. Changez la hauteur de 630 à 675. Voir og-image-generator §1.3 pour l'implémentation complète.

// Un point de terminaison partagé sert à la fois pour OG et Twitter :
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  const platform = searchParams.get('platform') ?? 'og'; // 'og' | 'twitter'

  const width = 1200;
  const height = platform === 'twitter' ? 675 : 630;

  return new ImageResponse(
    <OgTemplate title={title} height={height} />,
    { width, height },
  );
}

Ensuite dans les métadonnées de la page :

const ogUrl = `/og?title=${encodeURIComponent(title)}`;
const twitterUrl = `/og?title=${encodeURIComponent(title)}&platform=twitter`;

export const metadata: Metadata = {
  openGraph: {
    images: [{ url: ogUrl, width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    images: [twitterUrl],  // Spécifique à Twitter 1200x675
  },
};

3.4 Puppeteer, services gérés, configuration JSON

Identique à OG — définissez la fenêtre d'affichage/hauteur sur 675 au lieu de 630. Voir og-image-generator §1.4–1.6. Pour le système de priorité des pages v3 (S/A/B/C) et la sélection du pipeline, voir content-strategy.md et pipeline-guide.md.

4. Considérations de conception spécifiques à X

Twitter restitue les images différemment de Facebook/LinkedIn. Concevez en gardant ces éléments à l'esprit :

Mode sombre (~40 % des utilisateurs) : Les images apparaissent en ligne dans le fil, entourées de tweets. Les arrière-plans sombres se fondent naturellement ; les arrière-plans clairs ressortent mais peuvent paraître criards en mode sombre. Chaque modèle doit avoir une variante sombre ou une valeur par défaut adaptée au mode sombre. Parmi les 6 styles, Terminal/CLI, Midnight Ink Magazine et Brutalist (fond noir) sont naturellement adaptés au mode sombre. Swiss Minimal et Newspaper devraient être livrés avec une alternative en mode sombre.

Recadrage du fil d'actualité (mobile) : Sur mobile, les images summary_large_image sont recadrées à ~1:1 dans le fil jusqu'à ce que le tweet soit développé. L'image complète en 2:1 n'est visible qu'en appuyant dessus. Placez le contenu le plus important (titre, visuel principal) dans les 60 % supérieurs de l'image — le carré central qui survit au recadrage. Ne mettez jamais de texte critique dans les 20 % inférieurs.

Lisibilité du texte à petites tailles : Les images du fil s'affichent à une largeur d'environ 260px sur les flux mobiles. Testez votre modèle à l'échelle 1/4 (~300px de large) pour vous assurer que le texte reste lisible. C'est plus strict que la taille d'affichage de bureau de ~500px d'OG.

Masque de bord : Twitter applique un subtil masque à coins arrondis aux images de carte. Les logos et les éléments critiques placés à moins de 20px de n'importe quel bord risquent d'être partiellement rognés.

Adaptations de modèles recommandées pour Twitter (par style) :

5. Posters de cartes player

Pour le contenu vidéo/audio, le type de carte player nécessite une image d'affiche :

<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/player.html">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:image" content="https://example.com/poster.jpg">

L'image d'affiche est affichée avant que l'utilisateur appuie sur lecture. Concevez-la comme une vignette attrayante — incluez une superposition de bouton de lecture (triangle centré dans un cercle), le titre de la vidéo et une image du contenu. La même recommandation de rapport 2:1 s'applique. Le bouton de lecture doit être le plus grand élément dans la zone carrée centrale.

Pour les affiches générées par IA : invite pour "miniature vidéo avec bouton de lecture centré, texte du titre dans le tiers supérieur, arrière-plan sombre, 1200x675px."

6. Système de styles (partagé avec OG — 16 styles)

Les images Twitter utilisent les mêmes 16 styles visuels de og-image-generator §3 et de references/style-system-v3.md. Tous les modèles fonctionnent pour Twitter — changez simplement la hauteur du canevas à 675px.

Performants sur X : Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — un contraste élevé + un arrière-plan sombre sont optimaux pour le fil X. À éviter sur X : styles trop corporatifs et de marque sans variante sombre ; arrière-plans blanc pur dans le fil en mode sombre.

7. Police et typographie

Mêmes règles que pour OG. Voir og-image-generator references/typography.md.

Ajout spécifique à Twitter : étant donné que les images du fil s'affichent à une largeur d'environ 260px (contre ~500px pour le flux de bureau OG), augmentez la taille de police minimale de 4px — utilisez un minimum de 28px au lieu de 24px.

8. Vérifications YAML de l'agent

checks:
  # P0 — doit passer
  - id: dimensions-twitter
    description: twitter:image fait 1200x675px (2:1) ou 1200x628px (interplateforme)
  - id: card-type-match
    description: twitter:card est summary_large_image lors de l'utilisation d'une grande image
  - id: absolute-url
    description: L'URL de twitter:image est absolue (https://) et accessible publiquement
  - id: format
    description: Le format de l'image est PNG, JPG ou WebP (pas SVG)

  # P1 — devrait passer
  - id: og-fallback
    description: og:image est également défini (comme solution de repli pour les plateformes qui ne lisent pas twitter:image)
  - id: timeline-safe-zone
    description: Le texte critique et l'ancrage visuel principal se trouvent dans les 60 % supérieurs ; rien de critique dans les 20 % inférieurs
  - id: square-crop-survival
    description: L'élément visuel le plus important se lit correctement dans un recadrage central 1:1 (fil mobile)
  - id: dark-mode
    description: Le modèle inclut une variante à arrière-plan sombre ou utilise un style par défaut adapté au mode sombre
  - id: edge-mask-clearance
    description: Les logos et les éléments critiques sont à ≥20px de tous les bords (masque à coins arrondis de Twitter)

  # P2 — souhaitable
  - id: cross-platform-compatible
    description: La même image en 1200x628px fonctionne à la fois pour OG et Twitter sans génération séparée
  - id: ai-text-validated
    description: Si l'image est générée par IA, tout le texte a été validé par rapport à la source — aucun texte halluciné ou mal orthographié
  - id: player-poster
    description: Les pages de carte player ont une image d'affiche dédiée avec bouton de lecture
  - id: content-aware-twitter
    description: L'image reflète le contenu spécifique de la page, pas seulement un titre dans un modèle de taille Twitter

9. Erreurs courantes

1. Mauvais rapport d'aspect : Utilisation du 1200x630 d'OG (1,91:1) sans ajustement. Bien que Twitter le tolère, le 1200x675 (2:1) remplit mieux la carte et évite le letterboxing.
2. Balise twitter:image manquante : Se fier uniquement au fallback OG — sans twitter:image explicite, vous perdez le contrôle sur l'image que Twitter choisit.
3. Texte dans les 20 % inférieurs : Twitter recadre les images à ~1:1 sur mobile. Le texte critique près du bas est coupé dans le fil.
4. Aucune prise en compte du mode sombre : Les images à arrière-plan clair paraissent dures dans le fil en mode sombre de Twitter, que ~40 % des utilisateurs ont activé.
5. Utiliser SVG : Twitter ne prend pas en charge le SVG pour les images de carte. Générez toujours du PNG ou du JPG.
6. GIF sans première image statique : Twitter n'affiche que la première image des GIF. Assurez-vous que l'image 1 est une image fixe significative.
7. Hallucination de texte d'IA dans la vue 260px : Le texte généré par IA qui semble correct en taille réelle peut afficher des caractères brouillés au rendu petit. Validez à l'échelle 1/4.
8. Logos touchant les bords : Le masque à coins arrondis de Twitter rogne ~10px des bords. Gardez les logos à ≥20px des bords.

10. Tests

• Validateur de carte : https://cards-dev.twitter.com/validator — montre exactement comment la carte sera rendue. Collez n'importe quelle URL pour prévisualiser.
• Test manuel : Tweetez un lien depuis un compte de test, puis vérifiez le fil + les vues développées.
• Test mode sombre : Vérifiez la carte dans les clients Twitter en mode clair et sombre.
• Cache busting : Twitter met en cache les données de carte de manière agressive (jusqu'à 7 jours). Après des modifications, utilisez le Validateur de carte pour forcer un nouveau scraping.
• Test de recadrage mobile : Faites une capture d'écran de la carte au rapport 1:1 (recadrez à 675x675 au centre) pour vérifier que le recadrage carré communique toujours le contenu de la page.

11. Compétences connexes

Ces compétences sont optionnelles — cette compétence fonctionne de manière autonome. Installez-les si vous avez besoin de capacités supplémentaires :

Même dépôt (toujours installées ensemble) :

• og-image-generator : Génération d'images OG (1200x630, 1,91:1) — le pipeline de rendu complet, les 6 styles, les modèles de départ, le guide de typographie, les contraintes de Satori. Ce générateur de cartes Twitter réutilise toute son infrastructure.

Dépôts séparés (peuvent être installés ou non) :

• twitter-cards (marketing-skills) : Configuration des balises meta HTML pour twitter:card, twitter:site, twitter:creator, validation. Gère comment DÉFINIR la balise ; cette compétence gère comment CRÉER l'image.
• open-graph (marketing-skills) : Configuration des balises meta HTML pour og:title, og:image, og:url, outils de test de plateforme
• social-share-generator (marketing-skills) : Interface utilisateur du bouton de partage qui consomme les données de la carte Twitter lorsque les utilisateurs partagent des liens vers X