Retour aux articles

Automatiser vos images OG avec Vercel et Supabase

Découvrez comment combiner Vercel et Supabase pour générer automatiquement des images Open Graph optimisées pour le SEO social. Une approche moderne pour booster l’engagement sur les réseaux sans travail manuel répétitif.

Publié le 19 avril 2026

Pourquoi automatiser la génération d’images OG ?

Les images Open Graph influencent directement le taux de clic et le partage de vos pages sur les réseaux sociaux. Sans visuel cohérent, vos liens passent inaperçus dans les timelines.

Automatiser leur création permet :

  • d’éviter la production manuelle d’images pour chaque article ou produit ;
  • de garantir un branding homogène (logo, couleurs, typographies) ;
  • de mettre à jour les visuels dès que le contenu change ;
  • de réduire les erreurs d’URL og:image et les aperçus cassés.

Le rôle de Vercel dans la génération d’images OG

Vercel fournit une brique clé pour la génération dynamique d’images OG via ses Edge Functions et la librairie « @vercel/og ». Le principe :

  • vous décrivez votre carte sociale en HTML/CSS ;
  • la fonction edge la transforme en image (souvent PNG) à la volée ;
  • l’image est produite à partir de paramètres d’URL ou de données récupérées en base.

Cette approche rend possible :

  • des visuels personnalisés par page (titre, auteur, date, catégorie) ;
  • des designs avancés avec typographies, fonds dégradés, avatars distants ;
  • une génération ultra‑rapide au plus près des utilisateurs grâce à l’edge.

Supabase comme orchestrateur backend

Supabase complète parfaitement ce dispositif côté backend. Avec Postgres, Auth, Storage et les Edge Functions Deno, vous disposez d’un environnement serverless complet pour :

  • stocker vos contenus (articles, fiches produits, profils utilisateurs) ;
  • déclencher des triggers à chaque création ou mise à jour d’enregistrement ;
  • appeler automatiquement une fonction qui génère ou récupère l’image OG ;
  • stocker le fichier final dans Supabase Storage et enregistrer son URL en base.

Les triggers sont particulièrement puissants : dès qu’un contenu est publié ou modifié, la fonction associée peut lancer la génération d’un nouveau visuel, sans aucune action manuelle de la part des équipes.

Architecture type d’un pipeline OG automatisé

Une architecture courante pour un système d’images OG automatisées repose sur les briques suivantes :

  1. Base de données Supabase

    • Tables pour les contenus (blog, produits, profils, événements…).
    • Colonnes dédiées aux métadonnées (titre, description, auteur, slug, image de fond…).
    • Champ « og_image_url » pour stocker l’URL finale de l’image.

  2. Triggers et Edge Functions Supabase

    • Trigger sur INSERT/UPDATE d’un contenu.
    • Edge Function qui reçoit l’ID du contenu, récupère les données nécessaires et appelle la route de génération d’image (hébergée sur Vercel ou directement dans la fonction).
    • Stockage du résultat dans Supabase Storage, puis mise à jour de og_image_url.

  3. Route OG côté Vercel

    • Route type /api/og ou /[slug]/og qui renvoie une ImageResponse.
    • Utilisation de « @vercel/og » pour transformer le template HTML/CSS en image.
    • Prise en charge de paramètres dynamiques (slug, langue, thème, etc.).

  4. Intégration SEO dans votre frontend

    • Dans votre framework (Next.js, AnalogJS, etc.), les métadonnées OG sont construites à partir de la base.
    • La balise og:image pointe vers og_image_url.
    • Une bonne configuration du domaine (par exemple via metadataBase dans Next.js) garantit des URLs absolues correctes.

Bonnes pratiques SEO et performance

Pour que ce pipeline serve réellement votre SEO social, quelques points de vigilance sont essentiels :

  • Mise en cache intelligente :

    • Utiliser le cache CDN de Vercel pour les routes OG.
    • Mettre en place une pré‑génération via tâches planifiées pour les pages à fort trafic.

  • Temps d’exécution maîtrisé :

    • Limiter la complexité du template HTML/CSS.
    • Utiliser des polices optimisées et éviter les ressources trop lourdes.
    • Gérer les timeouts et prévoir un fallback visuel en cas d’erreur.

  • Robustesse en production :

    • Surveiller les logs des Edge Functions Supabase.
    • Tester les triggers sur des scénarios réels (création massive de contenus, pics de trafic).

  • Cohérence de marque :

    • Définir un design système pour vos cartes sociales (grille, marges, hiérarchie typographique).
    • Prévoir des variantes de template (article, produit, événement) tout en gardant une identité visuelle claire.

Mettre en place votre propre système

Pour passer de la théorie à la pratique, vous pouvez suivre un tutoriel complet qui détaille la configuration de Supabase, la création des Edge Functions, la mise en place de la route OG sur Vercel et l’intégration finale dans les métadonnées de vos pages. Un guide pas à pas dédié à la génération d’images OG automatisée avec ces outils est disponible ici : voir le tutoriel détaillé.

En industrialisant ce flux, chaque nouveau contenu publié sur votre site bénéficie automatiquement d’un visuel optimisé pour les réseaux sociaux, sans charge supplémentaire pour vos équipes marketing ou éditoriales.

Sources

  1. Introducing Vercel OG Image Generation – fast, dynamic social card images at the Edge — vercel.com — 2022-11-01
  2. Open Graph (OG) Image Generation – Vercel Edge Functions documentation — vercel.com — 2025-01-15
  3. Overengineering OpenGraph image generation on Vercel — dev.to — 2025-08-01
  4. Generate Dynamic OG Images with Next.js 16 — makerkit.dev — 2024-12-01
  5. Edge Functions – Supabase Docs — supabase.com
  6. Edge Functions Architecture – Supabase Docs — supabase.com
  7. Triggering tasks from Supabase Edge Functions — trigger.dev — 2025-02-15
  8. Creating dynamic OpenGraph images using Vercel's builtin library — reddit.com — 2026-01-20

Découvrir le Spark lié : Génération d'Image OG avec Vercel et Supabase