Cómo crear imágenes dinámicas de gráficos abiertos con hojas de cálculo de Google

Una imagen de gráfico abierto (imagen OG) es la imagen que se muestra cuando cualquiera de los enlaces de su sitio web se comparte en Facebook, LinkedIn o Twitter. Puede proporcionar la URL pública de la imagen en las etiquetas meta de su sitio web y el sitio web de la red social se recuperará automáticamente desde allí.

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

Imágenes gráficas abiertas con Titiritero

Github utiliza internamente la biblioteca Puppeteer de Google para generar imágenes dinámicas de Open Graph. Las imágenes se generan sobre la marcha mediante la introducción de HTML personalizado en Puppeteer, que luego genera una captura de pantalla. Puede ver una imagen OG de muestra generada por Github en este tweet.

Vercel, la compañía detrás de Next.js, también usa Puppeteer para su generador de imágenes de gráficos abiertos. El cromo sin cabeza se usa para representar una página HTML, se captura una captura de pantalla de la página y el archivo se almacena en caché para mejorar el rendimiento.

Cree imágenes Open Graph sin Titiritero

Puppeteer es una biblioteca maravillosa (la uso internamente para screnshot.guru), pero requiere algunos conocimientos técnicos para implementar Puppeteer como una función en la nube. También hay un costo involucrado en la implementación de Puppeteer en la nube, ya que debe pagar por cada solicitud realizada al servicio.

Si está buscando una solución sin código, sin costo ni titiritero, puede usar Hojas de cálculo de Google para generar imágenes Open Graph. Eso es lo que uso para generar imágenes dinámicas y únicas para cada página de mi sitio web. Puede ver una imagen OG de muestra en este tweet.

La idea está inspirada en Document Studio. Usted crea un diseño de imagen en Presentaciones de Google, reemplaza el texto del marcador de posición en la plantilla con el título de su página web, luego genera una imagen de captura de pantalla de la presentación y la guarda en su Google Drive.

Para comenzar, haga una copia de esta Hoja de Google en su Google Drive. Reemplace los títulos en la Columna A con los títulos de sus páginas y borre la columna URL de la imagen. Haga clic en el botón Play , autorice el script y notará que la hoja de cálculo se actualiza inmediatamente con las URL de imagen para cada página.

Agregue más títulos de página en la Hoja de Google, presione el botón Play nuevamente y la hoja de cálculo se actualizará con las URL de las imágenes solo de las páginas nuevas. Eso es todo.

Pruebe sus imágenes Open Graph

Una vez que haya agregado las etiquetas meta de Open Graph a su sitio web, puede probar sus imágenes de Open Graph con la herramienta a continuación.

1. cards-dev.twitter.com/validator: pegue la URL de su sitio web en el campo URL y haga clic en el botón Validate para ver si Twitter puede mostrar la imagen provista en sus metaetiquetas Open Graph. También puede usar esta herramienta de validación para borrar la imagen OG del caché de Twitter para cualquier página.

2. developer.facebook.com/tools/debug/: pegue la URL de su sitio web en el campo URL y haga clic en el botón Debug para ver si Facebook puede representar la imagen provista en sus metaetiquetas de Open Graph.

3. linkedin.com/post-inspector/: la herramienta Post Inspector de LinkedIn puede ayudarlo a determinar cómo aparecerá su página web cuando se comparta en la plataforma de LinkedIn. También puede solicitar a LinkedIn que vuelva a raspar la página si la imagen OG asociada ha cambiado.

¿Cómo funciona el generador de imágenes Open Graph?

Dentro de Google Sheet, vaya al menú Extensiones y elija Apps Script para ver el código fuente que se usa para generar las imágenes de Open Graph. También puede crear gráficos en Canva usando cualquiera de las plantillas disponibles y luego importar diseños de Canva en Presentaciones de Google.

La aplicación está escrita en Google Apps Script. Lee los títulos de las publicaciones de Hojas de cálculo de Google, genera una copia de la presentación para cada fila de la hoja, genera una captura de pantalla de la diapositiva y la agrega a 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 ) ; } } ) ; } , } ;