Comment générer des OG images différentes pour son site web ?

Générer automatiquement des OG images qui diffèrent pour chaque page

L'Open Graph Image (OG Image ) correspond à l’image qui s’affiche lorsque vous partagez une page ou un article sur les réseaux sociaux. Celle-ci ne vous convient peut-être pas et vous aimeriez avoir une distinction entre chaque page ou article.

Sachez qu’il existe un moyen de modifier cette image. Nous allons vous expliquer comment le faire sans trahir votre charte graphique. Vos lecteurs vous reconnaîtront en un coup d’œil et comprendront rapidement le sujet de l’article.

Ce tutoriel va vous expliquer pas à pas comment automatiser cette tâche sans y passer des heures. Pour cela, nous scénariserons la création visuelle depuis Abyssale à l’aide de Make.

Commencez par créer votre template

Avant toute chose, rendez-vous sur votre tableau de bord et cliquez sur "Create New template" puis sur "Create from scratch". Sélectionnez le type "Static Image" et le format Facebook Feed 1200 x 628 px (1.91:1).

Sur votre template, ajoutez d’abord les éléments qui ne varieront pas d’une OG image à l’autre. Cela peut être un logo ou votre slogan.

Ensuite, ajoutez les éléments variables que vous souhaitez modifier à chaque nouvelle génération et renommez-les selon l'usage.

Dans notre exemple, on aura :

  • Une image d'une ville qu'on appelera "image_ville".
  • Le nom d'une ville qu'on appelera "location".

Vous pouvez ajouter les variables que vous souhaitez puis cliquer sur “save & exit”.

Créez un Google Sheets pour recueillir les informations

Créez un tableau Google Sheets dans lequel vous créerez une colonne par variable.

Dans notre exemple, colonne A pour les images et colonne B pour les noms des villes.

Dans la colonne C, ajoutez l'URL de la page ou de l'article que vous souhaitez rattacher à l'OG image . Dans notre exemple, on prendra cet article : https://www.comptoirdesvoyages.fr/voyage-tag/rome/820

Vous pouvez aussi prévoir les colonnes D et E pour le Meta Titre et la Meta description.

exemple de feuilles de calcul google

Titrez chaque colonne comme vous le souhaitez sur la première ligne.

Connectez le Google Sheets à votre template

Rendez-vous sur Make.com et créez un nouveau scénario.

Recherchez le module Google Sheets et sélectionnez "Watch Rows". Connectez le document sur lequel se trouvent vos variables.

watch rows module make

Ensuite, cliquez sur le “+” pour ajouter un nouveau module. Recherchez Abyssale et sélectionnez "Generate a Single Image".

générer une image unique faire un module abyssale

Remplissez les variables (dans notre cas “image_fond” * et “location”) en y insérant les colonnes correspondantes (respectivement A et B)

(*) ⚠️ Attention, pour les images, pensez à rentrer l’URL de l’image sur le Google Sheets. Pas d’importation.

La connexion entre votre template et Google Sheets est prête. Voilà déjà une bonne chose de faite.

Générer une image Open Graph

Maintenant que vous pouvez générer des visuels en un claquement de doigt, l’objectif est de l’associer à une url.

Ajouter un nouveau module Abyssale "Generate Open Graph Link".

abyssale module générer open graph lien

Dans la ligne target URL, sélectionnez la variable correspondant à l'URL concernée par l'image Open Graph . Dans notre cas, on sélectionnera la colonne C du Google Sheets.

Faites la même chose pour le Meta Title et la Meta description. Dans notre cas, on sélectionnera respectivement les colonnes D et E.

Vous venez d’automatiser la génération de votre OG Image ! Félicitations ! 🥳

Vous pouvez vous arrêter là et récupérer le lien contenant l’OG Image.

Pour ce faire, cliquez sur le chiffre en haut à droite du module Abyssale “Generate Open Graph Link” et récupérez le lien dans l'OUTPUT du Bundle correspondant.

Si vous copiez ce lien sur les réseaux sociaux, vous verrez apparaître votre OG Image.

Néanmoins, nous n’allons pas nous arrêter là. L’idée est de faire apparaître ce lien directement sur votre Google Sheets pour le récupérer plus facilement.

Tant que nous y sommes, faisons les choses jusqu’au bout !

Insérez le lien de l’OG Image sur votre Google Sheets

Pour une meilleure organisation, nous allons insérer le lien OG image à la fin de la ligne correspondante sur le Google Sheets.

Ajoutez un module HTTP "Resolve a target URL" à la suite du scénario Make. Dans la ligne URL, sélectionnez la variable "Link" du module Abyssale "Generate Open Graph Link".

Ensuite, ajoutez un module Google Sheets "Update a Row". Connectez le document Google Sheets que nous utilisons depuis le début.

module de surveillance des rangs de google sheets

Dans la ligne Row number, sélectionnez la variable "Row number" issue du module "Watch Rows" de Google Sheets.

Puis, dans la dernière colonne, ajoutez la variable "Resolved URL" du module HTTP. Dans notre cas, on ajoutera cette variable à la colonne F. D’ailleurs, vous pouvez renommer la première ligne de cette colonne “Lien avec OG Image”, par exemple.

C’est terminé. Il ne vous reste plus qu’à partager vos liens sur les réseaux et pour voir vos créations inonder les réseaux.

N'hésitez pas à nous envoyer vos questions et commentaires. Vous pouvez également nous suivre sur LinkedIn pour rester au courant des dernières nouvelles et mises à jour concernant Abyssale!

Commencez gratuitement

Découvrez comment Abyssale aide les équipes à créer, automatiser et développer leur production de contenu visuel.
Passez à l'échelle dès aujourd'hui
Génération rapide
Générez et téléchargez des variations instantanément. Aucune compétence design ou accès à un éditeur n'est nécessaire.

En savoir plus sur la génération rapide

PARTAGER CET ARTICLE
REJOIGNEZ-NOUS NEWSLETTER

Maître Abyssale's spreadsheet

Explorez nos guides et tutoriels pour exploiter tout le potentiel de la fonction Abyssale's spreadsheet pour la production de contenu à grande échelle.

Voir toutes les ressources

Comment automatiser les nouvelles épingles Pinterest de ma boutique en ligne ?

Créez le meilleur système d'affichage automatique de Pinterest pour Shopify. Exploitez la puissance de l'automatisation de Pinterest pour poster automatiquement des épingles Pinterest lorsqu'un nouveau produit Shopify est mis en ligne.
En savoir plus

Comment créer une vidéo slideshow à partir d’images avec FFmpeg

Créez et automatisez la création de vos vidéos slideshow à partir d’image avec FFmpeg. Abyssale vous explique comment le faire en 3 étapes.
En savoir plus

Comment modifier l’aspect des sous-titres avec FFmpeg ?

Donner l’aspect que vous voulez aux sous-titres de vos vidéos avec FFmpeg ? C’est possible et Abyssale vous explique comment dans ce tutoriel.
En savoir plus
COMMENCER PAR LE COMMENCEMENT

Prêt à débloquer votre productivité ?

Réservez un démo et découvrez comment Abyssale peut vous aider à augmenter votre créativité et à aider votre équipe à atteindre une collaboration inégalée.
Créez votre compte
14 jours d'essai gratuit