Générez des images Open Graph avec un seul appel API, aucun Next.js requis

Intégration Astro : générer des images OG au moment de la construction

La génération de sites statiques d'Astro rend cela particulièrement propre. Créez une route API dynamique qui récupère Images OG pendant la construction et les sert de statique .png fichiers.

// src/pages/og/[slug].png.ts
import type { APIRoute, GetStaticPaths } from 'astro';

// Your posts data source (markdown, CMS, database, etc.)
import { getAllPosts } from '@/lib/posts';

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { title: post.title, description: post.description },
  }));
};

export const GET: APIRoute = async ({ props }) => {
  const res = await fetch('https://api.botoi.com/v1/og/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      title: props.title,
      description: props.description,
      theme: 'dark',
    }),
  });

  const imageBuffer = await res.arrayBuffer();

  return new Response(imageBuffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=31536000, immutable',
    },
  });
};

Pendant astro build, cette route génère un PNG pour chaque publication. Les fichiers de sortie atterrissent dans votre dist/og/ répertoire en tant qu’actifs statiques. Pas de génération d'images d'exécution, pas de serveur sans serveur fonction, pas de démarrage à froid.

Référencez les images dans l'en-tête de votre page :

<!-- In your BaseLayout.astro or page head -->
<meta property="og:image" content={\`https://yoursite.com/og/\${slug}.png\`} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={\`https://yoursite.com/og/\${slug}.png\`} />

Chaque page reçoit une carte sociale unique, générée une fois lors de la construction et mise en cache pour toujours par les CDN.

Intégration Django et Rails

Les frameworks rendus par le serveur peuvent générer des images OG à la demande et mettre le résultat en cache.

Django

# views.py
import requests
from django.http import HttpResponse
from django.views.decorators.cache import cache_page


@cache_page(60 * 60 * 24)  # Cache for 24 hours
def og_image(request, slug):
    post = get_object_or_404(Post, slug=slug)

    response = requests.post(
        'https://api.botoi.com/v1/og/generate',
        json={
            'title': post.title,
            'description': post.description,
            'theme': 'dark',
        },
        timeout=5,
    )

    return HttpResponse(
        response.content,
        content_type='image/png',
    )

# urls.py
urlpatterns = [
    path('og/<slug:slug>.png', views.og_image, name='og_image'),
]

La @cache_page le décorateur stocke l’image générée pendant 24 heures. Après le premier demande, Django sert directement le PNG mis en cache sans avoir à nouveau recours à l'API.

Rails

# app/controllers/og_images_controller.rb
class OgImagesController < ApplicationController
  def show
    post = Post.find_by!(slug: params[:slug])

    response = HTTP.post(
      'https://api.botoi.com/v1/og/generate',
      json: {
        title: post.title,
        description: post.description,
        theme: 'dark'
      }
    )

    expires_in 24.hours, public: true
    send_data response.body.to_s, type: 'image/png', disposition: 'inline'
  end
end

# config/routes.rb
get 'og/:slug.png', to: 'og_images#show'

Les deux exemples suivent le même schéma : recherchez le message par slug, POSTez le titre et la description. à l'API et renvoie le PNG avec les en-têtes de mise en cache. Le framework gère la mise en cache ; l'API gère génération d'images.

Intégration CMS Headless : générer lors de la publication

Si votre contenu réside dans un CMS sans tête comme Strapi, Contentful ou Sanity, vous pouvez générer OG images chaque fois qu’un éditeur publie ou met à jour un article. Connectez un webhook qui se déclenche sur le contenu changements.

Gestionnaire de webhook générique

// Webhook handler (any Node.js server or serverless function)
import { writeFileSync } from 'fs';

export async function handleCmsPublish(payload) {
  const { title, description, slug } = payload.entry;

  const res = await fetch('https://api.botoi.com/v1/og/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title, description, theme: 'light' }),
  });

  const buffer = Buffer.from(await res.arrayBuffer());

  // Save to your public/static directory or upload to S3/R2
  writeFileSync(\`./public/og/\${slug}.png\`, buffer);

  console.log(\`Generated OG image for: \${slug}\`);
}

Crochet de cycle de vie Strapi

// Strapi lifecycle hook: src/api/post/content-types/post/lifecycles.js
module.exports = {
  async afterUpdate(event) {
    const { result } = event;

    const res = await fetch('https://api.botoi.com/v1/og/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: result.title,
        description: result.description,
        theme: 'dark',
      }),
    });

    // Upload to your CDN or save locally
    const buffer = Buffer.from(await res.arrayBuffer());
    await strapi.plugins.upload.services.upload.upload({
      data: { path: \`og/\${result.slug}.png\` },
      files: { buffer, name: \`\${result.slug}.png\`, type: 'image/png' },
    });
  },
};

Cette approche est utile pour les équipes où les éditeurs de contenu publient via un CMS et où les développeurs ne le font pas. souhaitez exécuter un pipeline de construction pour chaque modification de texte. L'image OG se régénère automatiquement lorsque le modifier le titre ou la description du message.

Bonus : extrayez les métadonnées OG de n'importe quelle URL

L'API botoi fournit également /v1/url-metadata, ce qui fait l'inverse : étant donné une URL, il récupère la page et extrait ses balises Open Graph. Ceci est utile pour créer des aperçus de liens, des cartes sociales validateurs ou outils d’audit SEO.

curl -X POST https://api.botoi.com/v1/url-metadata \\
  -H "Content-Type: application/json" \\
  -d '{"url": "https://github.com/astro-community/astro-embed"}'

Réponse:

{
  "success": true,
  "data": {
    "url": "https://github.com/astro-community/astro-embed",
    "status": 200,
    "title": "GitHub - astro-community/astro-embed",
    "description": "Components to embed third-party media in Astro projects",
    "og": {
      "title": "astro-embed",
      "description": "Components to embed third-party media in Astro projects",
      "image": "https://opengraph.githubassets.com/...",
      "type": "object",
      "url": "https://github.com/astro-community/astro-embed",
      "site_name": "GitHub"
    }
  }
}

Utilisez-le pour créer des composants d'aperçu de lien dans votre application :

async function getLinkPreview(url: string) {
  const res = await fetch('https://api.botoi.com/v1/url-metadata', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ url }),
  });

  const { data } = await res.json();

  return {
    title: data.og?.title ?? data.title,
    description: data.og?.description ?? data.description,
    image: data.og?.image,
    siteName: data.og?.site_name,
  };
}

Combinez les deux points de terminaison : utilisez /v1/url-metadata pour vérifier comment vos pages apparaissent sur les réseaux sociaux plates-formes, et /v1/og/generate pour créer les images qui leur donnent une belle apparence.

Pourquoi ne pas diriger Satori vous-même ?

Tu peux. Satori est open source et produit un résultat de qualité. Mais l’exécuter vous-même signifie :

• Installation et regroupement de polices personnalisées (Satori n'utilise pas de polices système)
• Configuration d'un runtime Node.js ou d'une fonction Edge pour le rendu d'image
• Écriture de modèles JSX vers SVG et conversion de SVG en PNG avec resvg
• Gestion des limites de mémoire sur les plates-formes sans serveur lors du rendu d'images volumineuses
• Maintenir le pipeline à mesure que l'API de Satori évolue

Un appel API remplace tout cela par une seule requête HTTP. Si vos besoins en matière d'image OG sont simple (titre + description + branding), l'approche API permet d'économiser des heures de configuration et entretien continu.