Cum să creați imagini grafice deschise dinamice cu Foi de calcul Google

Publicat: 2022-02-26

O imagine grafică deschisă (imagine OG) este imaginea care este afișată atunci când oricare dintre linkurile site-ului dvs. sunt partajate pe Facebook, LinkedIn sau Twitter. Puteți furniza adresa URL publică a imaginii în metaetichetele site-ului dvs., iar site-ul de socializare va prelua automat de acolo.

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

Deschideți imagini grafice cu păpuși

Github utilizează în interior biblioteca Puppeteer de la Google pentru a genera imagini dinamice Open Graph. Imaginile sunt generate din mers prin introducerea HTML personalizat în Puppeteer, care generează apoi o captură de ecran. Puteți vizualiza un exemplu de imagine OG generată de Github în acest tweet.

Vercel, compania din spatele Next.js, folosește și Puppeteer pentru generatorul de imagini grafice deschise. Headless chromium este folosit pentru a reda o pagină HTML, o captură de ecran a paginii este capturată și fișierul este stocat în cache pentru o performanță îmbunătățită.

Creați imagini Open Graph fără Puppeteer

Puppeteer este o bibliotecă minunată (o folosesc intern pentru screnshot.guru), dar necesită anumite cunoștințe tehnice pentru a implementa Puppeteer ca funcție cloud. Există, de asemenea, costuri implicate în implementarea Puppeteer în cloud, deoarece trebuie să plătiți pentru orice solicitare făcută serviciului.

Generate Open Graph Images

Dacă sunteți în căutarea unei soluții fără cod, fără costuri, fără păpuși, puteți utiliza Google Sheets pentru a genera imagini Open Graph. Acesta este ceea ce folosesc pentru a genera imagini dinamice și unice pentru fiecare pagină a site-ului meu. Puteți vedea un exemplu de imagine OG în acest tweet.

Ideea este inspirată de Document Studio. Creați un design de imagine în Google Slides, înlocuiți textul substituent din șablon cu titlul paginii dvs. web, apoi generați o captură de ecran a prezentării și o salvați în Google Drive.

Pentru a începe, faceți o copie a acestei foi Google în Google Drive. Înlocuiți titlurile din coloana A cu titlurile paginilor dvs. și ștergeți coloana URL a imaginii. Faceți clic pe butonul Play , autorizați scriptul și veți observa că foaia de calcul este actualizată imediat cu adresele URL ale imaginii pentru fiecare pagină.

Adăugați mai multe titluri de pagini în Foaia Google, apăsați din nou butonul Play și foaia de calcul va fi actualizată cu adrese URL de imagini ale paginilor noi. Asta e.

Open Graph Images

Testează-ți imaginile Open Graph

După ce ați adăugat metaetichetele Open Graph pe site-ul dvs., puteți testa imaginile Open Graph folosind instrumentul de mai jos.

  1. cards-dev.twitter.com/validator - Lipiți adresa URL a site-ului dvs. în câmpul URL și faceți clic pe butonul Validate pentru a vedea dacă Twitter poate reda imaginea furnizată în metaetichetele dvs. Open Graph. De asemenea, puteți utiliza acest instrument de validare pentru a șterge imaginea OG din memoria cache a Twitter pentru orice pagină.

  2. developers.facebook.com/tools/debug/ - Lipiți adresa URL a site-ului dvs. în câmpul URL și faceți clic pe butonul Debug pentru a vedea dacă Facebook poate reda imaginea furnizată în metaetichetele Open Graph.

  3. linkedin.com/post-inspector/ - Instrumentul LinkedIn Post Inspector vă poate ajuta să determinați cum va apărea pagina dvs. web atunci când este distribuită pe platforma LinkedIn. De asemenea, puteți solicita LinkedIn să răzuiască din nou pagina dacă imaginea OG asociată s-a schimbat.

Cum funcționează Open Graph Image Generator?

În interiorul foii Google, accesați meniul Extensii și alegeți Apps Script pentru a vedea codul sursă care este utilizat pentru a genera imaginile Open Graph. De asemenea, puteți crea elemente grafice în Canva utilizând oricare dintre șabloanele disponibile și apoi importați modele Canva în Google Slides.

Aplicația este scrisă în Google Apps Script. Citește titlurile postărilor din Foi de calcul Google, generează o copie a prezentării pentru fiecare rând din foaie, generează o captură de ecran a diapozitivului și o adaugă în 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 ) ; } } ) ; } , } ;