Como criar imagens dinâmicas de gráfico aberto com o Planilhas Google

Uma imagem de gráfico aberto (imagem OG) é a imagem exibida quando qualquer um dos links do seu site é compartilhado no Facebook, LinkedIn ou Twitter. Você pode fornecer o URL público da imagem nas metatags do seu site e o site de mídia social será selecionado automaticamente a partir daí.

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

Abrir Imagens de Gráfico com o Puppeteer

O Github usa internamente a biblioteca Puppeteer do Google para gerar imagens dinâmicas do Open Graph. As imagens são geradas em tempo real, alimentando HTML personalizado no Puppeteer, que gera uma captura de tela. Você pode ver uma amostra de imagem OG gerada pelo Github neste tweet.

A Vercel, a empresa por trás do Next.js, também usa o Puppeteer para seu gerador de imagens de gráfico aberto. O cromo sem cabeça é usado para renderizar uma página HTML, uma captura de tela da página é capturada e o arquivo é armazenado em cache para melhorar o desempenho.

Criar imagens de gráfico aberto sem marionetista

Puppeteer é uma biblioteca maravilhosa (eu a uso internamente para screnshot.guru), mas requer algum conhecimento técnico para implantar o Puppeteer como uma função de nuvem. Também há custos envolvidos na implantação do Puppeteer na nuvem, pois você precisa pagar por cada solicitação feita ao serviço.

Se você estiver procurando por uma solução sem código, sem custo e sem marionetes, use o Planilhas Google para gerar imagens do Open Graph. É isso que eu uso para gerar imagens dinâmicas e exclusivas para cada página do meu site. Você pode ver uma amostra de imagem OG neste tweet.

A ideia é inspirada no Document Studio. Você cria um design de imagem no Apresentações Google, substitui o texto do espaço reservado no modelo pelo título da sua página da Web, gera uma imagem de captura de tela da apresentação e a salva no Google Drive.

Para começar, faça uma cópia desta Planilha Google em seu Google Drive. Substitua os títulos na Coluna A pelos títulos de suas páginas e limpe a coluna URL da imagem. Clique no botão Play , autorize o script e você notará que a planilha é imediatamente atualizada com os URLs das imagens de cada página.

Adicione mais títulos de página na Planilha Google, pressione o botão Play novamente e a planilha será atualizada com os URLs das imagens apenas das novas páginas. É isso.

Teste suas imagens do Open Graph

Depois de adicionar as metatags do Open Graph ao seu site, você pode testar suas imagens do Open Graph usando a ferramenta abaixo.

1. cards-dev.twitter.com/validator - Cole o URL do seu site no campo URL e clique no botão Validate para ver se o Twitter é capaz de renderizar a imagem fornecida em suas metatags do Open Graph. Você também pode usar esta ferramenta de validação para limpar a imagem OG do cache do Twitter para qualquer página.

2. developers.facebook.com/tools/debug/ - Cole a URL do seu site no campo URL e clique no botão Debug para ver se o Facebook é capaz de renderizar a imagem fornecida em suas metatags Open Graph.

3. linkedin.com/post-inspector/ - A ferramenta Post Inspector do LinkedIn pode ajudá-lo a determinar como sua página da web aparecerá quando compartilhada na plataforma do LinkedIn. Você também pode solicitar ao LinkedIn para refazer a varredura da página se a imagem OG associada tiver sido alterada.

Como funciona o gerador de imagens Open Graph?

Dentro da Planilha Google, acesse o menu Extensões e escolha Apps Script para visualizar o código-fonte usado para gerar as imagens do Open Graph. Você também pode criar gráficos no Canva usando qualquer um dos modelos disponíveis e importar designs do Canva no Apresentações Google.

O aplicativo está escrito no Google Apps Script. Ele lê os títulos das postagens do Planilhas Google, gera uma cópia da apresentação para cada linha da planilha, gera uma captura de tela do slide e a adiciona ao seu 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 ) ; } } ) ; } , } ;