Come creare immagini di grafici aperti dinamici con Fogli Google

Pubblicato: 2022-02-26

Un'immagine a grafico aperto (immagine OG) è l'immagine che viene visualizzata quando uno qualsiasi dei link del tuo sito Web viene condiviso su Facebook, LinkedIn o Twitter. Puoi fornire l'URL pubblico dell'immagine nei meta tag del tuo sito Web e il sito Web dei social media riprenderà automaticamente da lì.

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

Apri le immagini del grafico con Burattinaio

Github utilizza internamente la libreria Puppeteer di Google per generare immagini Open Graph dinamiche. Le immagini vengono generate al volo alimentando l'HTML personalizzato in Puppeteer che quindi genera uno screenshot. Puoi visualizzare un'immagine OG di esempio generata da Github in questo tweet.

Vercel, la società dietro Next.js, utilizza anche Puppeteer per il generatore di immagini a grafo aperto. Il cromo senza testa viene utilizzato per eseguire il rendering di una pagina HTML, viene acquisita una schermata della pagina e il file viene memorizzato nella cache per migliorare le prestazioni.

Crea immagini di grafici aperti senza burattinaio

Puppeteer è una libreria meravigliosa (la uso internamente per screnshot.guru) ma richiede alcune conoscenze tecniche per implementare Puppeteer come funzione cloud. Ci sono anche dei costi per la distribuzione di Puppeteer nel cloud poiché devi pagare per ogni richiesta fatta al servizio.

Generate Open Graph Images

Se stai cercando una soluzione senza codice, senza costi e senza burattinai, puoi utilizzare Fogli Google per generare immagini Open Graph. Questo è ciò che uso per generare immagini dinamiche e uniche per ogni pagina del mio sito web. Puoi vedere un'immagine OG di esempio in questo tweet.

L'idea è ispirata a Document Studio. Crei un design dell'immagine in Presentazioni Google, sostituisci il testo segnaposto nel modello con il titolo della tua pagina web, quindi generi un'immagine screenshot della presentazione e la salvi nel tuo Google Drive.

Per iniziare, crea una copia di questo foglio Google nel tuo Google Drive. Sostituisci i titoli nella colonna A con i titoli delle tue pagine e cancella la colonna URL immagine. Fai clic sul pulsante Play , autorizza lo script e noterai che il foglio di calcolo viene immediatamente aggiornato con gli URL delle immagini per ogni pagina.

Aggiungi più titoli di pagina nel foglio Google, premi di nuovo il pulsante Play e il foglio di lavoro verrà aggiornato con gli URL delle immagini solo delle nuove pagine. Questo è tutto.

Open Graph Images

Metti alla prova le tue immagini di grafici aperti

Dopo aver aggiunto i meta tag Open Graph al tuo sito web, puoi testare le tue immagini Open Graph usando lo strumento qui sotto.

  1. cards-dev.twitter.com/validator - Incolla l'URL del tuo sito web nel campo URL e fai clic sul pulsante Validate per vedere se Twitter è in grado di eseguire il rendering dell'immagine fornita nei meta tag di Open Graph. Puoi anche utilizzare questo strumento di convalida per cancellare l'immagine OG dalla cache di Twitter per qualsiasi pagina.

  2. developer.facebook.com/tools/debug/ - Incolla l'URL del tuo sito web nel campo URL e fai clic sul pulsante Debug per vedere se Facebook è in grado di eseguire il rendering dell'immagine fornita nei meta tag di Open Graph.

  3. linkedin.com/post-inspector/ - Lo strumento Post Inspector di LinkedIn può aiutarti a determinare come apparirà la tua pagina web quando condivisa sulla piattaforma LinkedIn. Puoi anche richiedere a LinkedIn di eseguire nuovamente lo scraping della pagina se l'immagine OG associata è cambiata.

Come funziona Open Graph Image Generator?

All'interno del Foglio Google, vai al menu Estensioni e scegli App Script per visualizzare il codice sorgente utilizzato per generare le immagini Open Graph. Puoi anche creare grafica in Canva utilizzando uno qualsiasi dei modelli disponibili e quindi importare design Canva in Presentazioni Google.

L'app è scritta in Google Apps Script. Legge i titoli dei post da Fogli Google, genera una copia della presentazione per ogni riga del foglio, genera uno screenshot della diapositiva e lo aggiunge al tuo 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 ) ; } } ) ; } , } ;