Comment créer des images graphiques ouvertes dynamiques avec Google Sheets

Publié: 2022-02-26

Une image graphique ouverte (image OG) est l'image qui s'affiche lorsque l'un des liens de votre site Web est partagé sur Facebook, LinkedIn ou Twitter. Vous pouvez fournir l'URL publique de l'image dans les balises META de votre site Web et le site Web de médias sociaux s'en chargera automatiquement.

 < head > < title > Digital Inspiration </ title > < meta property = " og:image " content = " https://www.labnol.org/og/default.png " /> </ head >

Ouvrir des images graphiques avec Puppeteer

Github utilise en interne la bibliothèque Puppeteer de Google pour générer des images Open Graph dynamiques. Les images sont générées à la volée en introduisant du code HTML personnalisé dans Puppeteer, qui génère ensuite une capture d'écran. Vous pouvez voir un exemple d'image OG générée par Github dans ce tweet.

Vercel, la société à l'origine de Next.js, utilise également Puppeteer pour son générateur d'images à graphes ouverts. Le chrome sans tête est utilisé pour rendre une page HTML, une capture d'écran de la page est capturée et le fichier est mis en cache pour des performances améliorées.

Créer des images Open Graph sans marionnettiste

Puppeteer est une bibliothèque merveilleuse (je l'utilise en interne pour screnshot.guru) mais elle nécessite un certain savoir-faire technique pour déployer Puppeteer en tant que fonction cloud. Le déploiement de Puppeteer sur le cloud entraîne également des coûts, car vous devez payer pour chaque demande adressée au service.

Generate Open Graph Images

Si vous recherchez une solution sans code, sans coût et sans marionnettiste, vous pouvez utiliser Google Sheets pour générer des images Open Graph. C'est ce que j'utilise pour générer des images dynamiques et uniques pour chaque page de mon site Web. Vous pouvez voir un exemple d'image OG dans ce tweet.

L'idée est inspirée de Document Studio. Vous créez une conception d'image dans Google Slides, remplacez le texte de l'espace réservé dans le modèle par le titre de votre page Web, puis générez une capture d'écran de la présentation et enregistrez-la dans votre Google Drive.

Pour commencer, faites une copie de cette feuille Google dans votre Google Drive. Remplacez les titres de la colonne A par les titres de vos pages et effacez la colonne URL de l'image. Cliquez sur le bouton Play , autorisez le script et vous remarquerez que la feuille de calcul est immédiatement mise à jour avec les URL des images pour chaque page.

Ajoutez plus de titres de page dans la feuille Google, appuyez à nouveau sur le bouton Play et la feuille de calcul sera mise à jour avec les URL d'image des nouvelles pages uniquement. C'est ça.

Open Graph Images

Testez vos images Open Graph

Après avoir ajouté les balises méta Open Graph à votre site Web, vous pouvez tester vos images Open Graph à l'aide de l'outil ci-dessous.

  1. cards-dev.twitter.com/validator - Collez l'URL de votre site Web dans le champ URL et cliquez sur le bouton Validate pour voir si Twitter est capable de rendre l'image fournie dans vos balises méta Open Graph. Vous pouvez également utiliser cet outil de validation pour effacer l'image OG du cache de Twitter pour n'importe quelle page.

  2. developers.facebook.com/tools/debug/ - Collez l'URL de votre site Web dans le champ URL et cliquez sur le bouton Debug pour voir si Facebook est capable de rendre l'image fournie dans vos balises méta Open Graph.

  3. linkedin.com/post-inspector/ - L'outil Post Inspector de LinkedIn peut vous aider à déterminer comment votre page Web apparaîtra lorsqu'elle sera partagée sur la plate-forme LinkedIn. Vous pouvez également demander à LinkedIn de re-gratter la page si l'image OG associée a changé.

Comment fonctionne le générateur d'images Open Graph ?

Dans Google Sheet, accédez au menu Extensions et choisissez Apps Script pour afficher le code source utilisé pour générer les images Open Graph. Vous pouvez également créer des graphiques dans Canva à l'aide de l'un des modèles disponibles, puis importer des conceptions Canva dans Google Slides.

L'application est écrite en Google Apps Script. Il lit les titres des publications de Google Sheets, génère une copie de la présentation pour chaque ligne de la feuille, génère une capture d'écran de la diapositive et l'ajoute à votre Google Drive.

 const FOLDER = 'Open Graph Images' ; const TEMPLATE_ID = '1QZ4mR6B36XEVyzJf-s8vq88SDnSRPiRDchJ71VM-cfU' ; const APP = { /* Create a folder in Google Drive for storing open graph images */ getFolder ( ) { if ( typeof this . folder === 'undefined' ) { const folders = DriveApp . getFoldersByName ( FOLDER ) ; this . folder = folders . hasNext ( ) ? folders . next ( ) : DriveApp . createFolder ( FOLDER ) ; } return this . folder ; } , /* Download the Slide thumbnail URL and save it to Google Drive */ getImageUrl ( contentUrl , title ) { const blob = UrlFetchApp . fetch ( contentUrl ) . getBlob ( ) ; const file = this . folder . createFile ( blob ) ; file . setName ( title ) ; return file . getUrl ( ) ; } , /* Make a temporary copy of the Google Slides template */ getTemplate ( title ) { const slideTemplate = DriveApp . getFileById ( TEMPLATE_ID ) ; const slideCopy = slideTemplate . makeCopy ( title , this . getFolder ( ) ) ; return slideCopy . getId ( ) ; } , /* Get the thumbnail URL of the Google Slides template */ getThumbnailUrl ( presentationId ) { const { slides : [ { objectId } ] = { } } = Slides . Presentations . get ( presentationId , { fields : 'slides/objectId' , } ) ; const data = Slides . Presentations . Pages . getThumbnail ( presentationId , objectId ) ; return data . contentUrl ; } , /* Replace the placeholder text with the title of the web page */ createImage ( title ) { const presentationId = this . getTemplate ( title ) ; Slides . Presentations . batchUpdate ( { requests : [ { replaceAllText : { containsText : { matchCase : false , text : '{{Title}}' } , replaceText : title , } , } , ] , } , presentationId ) ; const contentUrl = this . getThumbnailUrl ( presentationId ) ; const imageUrl = this . getImageUrl ( contentUrl , title ) ; /* Trash the presentation copy after the image is downloaded */ DriveApp . getFileById ( presentationId ) . setTrashed ( true ) ; return imageUrl ; } , /* Show job progress to the user */ toast ( title ) { SpreadsheetApp . getActiveSpreadsheet ( ) . toast ( '️ ' + title ) ; } , run ( ) { const sheet = SpreadsheetApp . getActiveSheet ( ) ; sheet . getDataRange ( ) . getDisplayValues ( ) . forEach ( ( [ title , url ] , index ) => { /* Only process rows that have a title */ if ( title && ! / ^http / . test ( url ) && index > 0 ) { const imageUrl = this . createImage ( title ) ; sheet . getRange ( index + 1 , 2 ) . setValue ( imageUrl ) ; this . toast ( title ) ; } } ) ; } , } ;