Les pubs vous déplaisent ? Aller Sans pub Auj.

Génération automatique d'images OG Créez des cartes sociales dynamiques avec une API de capture d'écran

Publié le

Arrêtez de créer manuellement des images d'aperçu pour les réseaux sociaux. Apprenez à générer de magnifiques images OG à la volée à l'aide de modèles HTML et d'une API de capture d'écran. Tutoriel axé sur le code avec des exemples concrets.

Génération automatisée d'images OG : Créez des cartes sociales dynamiques avec une API de capture d'écran
PUBLICITÉ · RETIRER?

Vous passez des heures à peaufiner un article de blog parfait, vous appuyez sur publier et vous le partagez sur Twitter. Et puis… une boîte grise ennuyeuse. Pas d'aperçu. Pas d'image. Juste un lien triste et nu que personne ne veut cliquer.

Cela vous semble familier ? Les images OG (Open Graph) sont les héros méconnus du partage sur les réseaux sociaux. Elles font littéralement la différence entre votre contenu qui est ignoré ou qui est cliqué. Et si vous créez toujours manuellement dans Figma pour chaque page, nous devons en discuter.

Que sont les images OG (et pourquoi devriez-vous vous en soucier) ?

Les images OG sont les cartes d'aperçu qui apparaissent lorsque vous partagez un lien sur les réseaux sociaux, Slack, Discord ou tout autre endroit qui déplie les URL. Elles sont définies dans la balise <meta> de votre HTML :

<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:title" content="Your Awesome Title" />
<meta property="og:description" content="A compelling description" />

Le problème ? La création manuelle de ces images n'est pas évolutive. Vous avez 100 articles de blog ? Cela fait 100 images. Vous avez des pages de produits dynamiques ? Bonne chance pour suivre.

La solution : Générer des images OG à la volée

Voici l'astuce : au lieu de pré-générer des images, nous allons restituer un modèle HTML et en faire une capture d'écran en temps réel à l'aide d'une API de capture d'écran. Le flux ressemble à ceci :

  1. Créez un modèle HTML pour votre carte OG
  2. Hébergez-le avec des paramètres dynamiques (titre, auteur, etc.)
  3. Pointez votre og:image balise meta vers l'API de capture d'écran
  4. Terminé. Chaque page obtient une carte d'aperçu unique et magnifique.

Étape 1 : Créez votre modèle OG

Tout d'abord, créez une page HTML simple qui restitue votre carte sociale. Il peut s'agir d'une route dédiée dans votre application ou d'un fichier HTML statique.

<!-- /og-template?title=Hello%20World&author=John -->
<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1200px;
      height: 630px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: system-ui, sans-serif;
      color: white;
    }
    h1 {
      font-size: 64px;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 24px;
    }
    .author {
      font-size: 28px;
      opacity: 0.9;
    }
    .logo {
      position: absolute;
      bottom: 40px;
      right: 60px;
      font-size: 24px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1 id="title">Your Title Here</h1>
  <p class="author">by <span id="author">Author Name</span></p>
  <div class="logo">yoursite.com</div>
  <script>
    const params = new URLSearchParams(window.location.search);
    document.getElementById('title').textContent = params.get('title') || 'Untitled';
    document.getElementById('author').textContent = params.get('author') || 'Anonymous';
  </script>
</body>
</html>

La clé ici : 1200 × 630 pixels. C'est la taille magique pour les images OG. Twitter, Facebook, LinkedIn, tous acceptent bien cette dimension.

Étape 2 : Capturez-la avec une API

Maintenant, passons à la partie amusante. Au lieu de démarrer Puppeteer sur votre serveur (et de gérer tout ce drame de Chrome sans tête), utilisez une API de capture d'écran pour restituer votre modèle.

Voici un exemple Node.js montrant le schéma général :

// Generate OG image URL using a screenshot API
function getOgImageUrl(title, author) {
  const templateUrl = encodeURIComponent(
    `https://yoursite.com/og-template?title=${encodeURIComponent(title)}&author=${encodeURIComponent(author)}`
  );
  
  // Most screenshot APIs follow this pattern:
  // Pass your template URL + dimensions, get back an image
  return `https://your-screenshot-api.com/capture?` +
    `url=${templateUrl}` +
    `&width=1200` +
    `&height=630` +
    `&format=png`;
}

Étape 3 : Intégrez-la dans vos balises meta

Dans le <head>de votre page, définissez dynamiquement l'image OG :

// Next.js example (pages/_app.js or layout.tsx)
import Head from 'next/head';

export default function BlogPost({ post }) {
  const ogImage = getOgImageUrl(post.title, post.author);
  
  return (
    <>
      <Head>
        <meta property="og:image" content={ogImage} />
        <meta property="og:title" content={post.title} />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:image" content={ogImage} />
      </Head>
      <article>{/* Your content */}</article>
    </>
  );
}

Étape 4 : Ajoutez la mise en cache (Important !)

Vous ne voulez pas appeler l'API à chaque fois que le robot de Twitter vérifie votre page. Mettez en place une couche de mise en cache :

// Edge function example (Vercel/Cloudflare)
export default async function handler(req) {
  const { title, author } = req.query;
  
  // Call your screenshot API
  const screenshotUrl = buildScreenshotUrl({
    url: `https://yoursite.com/og-template?title=${title}&author=${author}`,
    width: 1200,
    height: 630,
    format: 'png'
  });
  
  const response = await fetch(screenshotUrl);
  const imageBuffer = await response.arrayBuffer();
  
  return new Response(imageBuffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=86400, s-maxage=604800', // Cache for a week
    },
  });
}

Maintenant, votre balise meta pointe vers votre propre point de terminaison, qui met en cache le résultat :

<meta property="og:image" content="https://yoursite.com/api/og?title=My%20Post&author=John" />

Conseils Pro 🔥

  • Utilisez des polices web : Google Fonts fonctionne très bien. Assurez-vous simplement qu'elles sont chargées avant le déclenchement de la capture d'écran.
  • Ajoutez votre image de marque : Logos, dégradés, motifs, rendez-la reconnaissable dans un flux.
  • Gardez le texte grand : Les cartes sociales sont souvent vues comme des miniatures. 48px+ pour les titres.
  • Testez avec des validateurs : Utilisez le validateur de cartes de Twitter et le débogueur de Facebook pour prévisualiser.

Exemples concrets

Ce schéma est utilisé par certains des meilleurs blogs de développement :

  • Vercel/Next.js : Leurs images OG incluent le titre de l'article, la date et le temps de lecture.
  • GitHub : Les cartes de dépôt affichent les étoiles, les forks et la description.
  • Dev.to : Cartes d'articles avec avatar de l'auteur et nombre de réactions.

Vous pouvez faire la même chose en 20 minutes avec une API de capture d'écran. Aucune infrastructure à maintenir, aucun binaire Chromium à gérer.

Le flux complet

// Full working example with error handling
async function generateOgImage(title, author, category) {
  const templateParams = new URLSearchParams({
    title: title.slice(0, 60), // Truncate long titles
    author,
    category: category || 'Blog'
  });
  
  const templateUrl = `https://yoursite.com/og-template?${templateParams}`;
  
  try {
    // Adapt this to your screenshot API of choice
    const response = await fetch(SCREENSHOT_API_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`
      },
      body: JSON.stringify({
        url: templateUrl,
        viewport: { width: 1200, height: 630 },
        format: 'png',
        waitUntil: 'networkidle' // Wait for fonts/images to load
      })
    });
    
    if (!response.ok) throw new Error('Screenshot failed');
    
    return await response.arrayBuffer();
  } catch (error) {
    console.error('OG generation failed:', error);
    // Return a fallback image
    return fetch('https://yoursite.com/default-og.png').then(r => r.arrayBuffer());
  }
}

Pourquoi utiliser une API de capture d'écran au lieu d'un auto-hébergement ?

Vous pourriez exécuter vous-même Puppeteer. Mais voici à quoi cela ressemble :

  • Images Docker de plus de 600 Mo avec Chromium
  • Pics de mémoire qui font planter votre serveur
  • Processus zombies hantant vos conteneurs
  • Problèmes de rendu des polices dans différents environnements

Ou vous pourriez simplement… ne pas le faire. Une API de capture d'écran gère tout cela, et vous payez par capture d'écran au lieu que par heure de serveur. Pour la plupart des sites, c'est considérablement moins cher.

Commencer

Prêt à rendre vos partages sur les réseaux sociaux plus professionnels ? Découvrez Snapopa pour une API de capture d'écran spécialement conçue pour ce cas d'utilisation. Vous aurez des images OG dynamiques opérationnelles en moins de 30 minutes.

Votre jeu Twitter est sur le point de passer au niveau supérieur. 📈

Vous aimerez peut-être aussi

Envie d'une expérience sans pub ? Passez à la version sans pub

Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur Extension Chrome Sur Extension de bord Sur Extension Firefox Sur Extension de l'opéra

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

PUBLICITÉ · RETIRER?

Outils essentiels

Tout voir
Suppression d'arrière-plan
Éditeur d'images AI
Générateur d'images IA
ImageKit
Compresseur PDF
Convertisseur d'images
Lien à usage unique
PUBLICITÉ · RETIRER?

Nouveautés

Tout voir
Encodeur/Décodeur d'URL
Traducteur de code Morse
Chiffre de César
Encodeur/Décodeur ROT13
Suppresseur de lignes en double
Générateur de Bézier Cubique CSS
Générateur de hashtag

Mise à jour: Notre dernier outil a été ajouté le 5 fév. 2026

PUBLICITÉ · RETIRER?

Coin des nouvelles avec points forts techniques

Impliquez-vous

Aidez-nous à continuer à fournir des outils gratuits et précieux

Offre-moi un café
PUBLICITÉ · RETIRER?