如何使用 Google 表格创建动态开放图形图像

已发表: 2022-02-26

开放式图形图像（OG 图像）是当您的任何网站链接在 Facebook、LinkedIn 或 Twitter 上共享时显示的图像。 您可以在您网站的元标记中提供图像的公共 URL，社交媒体网站将自动从那里获取。

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

使用 Puppeteer 打开图形图像

Github 内部使用 Google 的 Puppeteer 库来生成动态 Open Graph 图像。 这些图像是通过将自定义 HTML 输入 Puppeteer 来动态生成的，然后 Puppeteer 会生成屏幕截图。 您可以在这条推文中查看 Github 生成的示例 OG 图像。

Next.js 背后的公司 Vercel 也使用 Puppeteer 作为他们的开放图形图像生成器。 Headless chromium 用于渲染 HTML 页面，捕获页面的屏幕截图并缓存文件以提高性能。

在没有 Puppeteer 的情况下创建开放图形图像

Puppeteer 是一个很棒的库（我在内部将它用于 screnshot.guru），但它确实需要一些技术知识才能将 Puppeteer 部署为云功能。 将 Puppeteer 部署到云还涉及成本，因为您必须为对该服务的任何请求付费。

Generate Open Graph Images

如果您正在寻找无代码、无成本、无 puppeteer 的解决方案，您可以使用 Google 表格生成 Open Graph 图像。 这就是我用来为我网站的每个页面生成动态和独特图像的方法。 您可以在此推文中看到示例 OG 图像。

这个想法的灵感来自 Document Studio。 您在 Google 幻灯片中创建图像设计，将模板中的占位符文本替换为您的网页标题，然后生成演示文稿的屏幕截图并将其保存在您的 Google Drive 中。

要开始使用，请在您的 Google 云端硬盘中复制此 Google 表格。 将 A 列中的标题替换为您的页面标题并清除“图像 URL”列。 单击“ Play按钮，授权脚本，您会注意到电子表格会立即更新为每个页面的图像 URL。

在 Google 表格中添加更多页面标题，再次点击Play按钮，电子表格将更新为仅包含新页面的图像 URL。 而已。

Open Graph Images

测试您的开放图图像

将 Open Graph 元标记添加到您的网站后，您可以使用以下工具测试您的 Open Graph 图像。

  1. card-dev.twitter.com/validator - 将您网站的 URL 粘贴到 URL 字段中，然后单击Validate按钮以查看 Twitter 是否能够呈现您的 Open Graph 元标记中提供的图像。 您还可以使用此验证器工具从 Twitter 缓存中清除任何页面的 OG 图像。

  2. developers.facebook.com/tools/debug/ - 将您网站的 URL 粘贴到 URL 字段中，然后单击“ Debug ”按钮以查看 Facebook 是否能够呈现您的 Open Graph 元标记中提供的图像。

  3. linkedin.com/post-inspector/ - LinkedIn 的 Post Inspector 工具可以帮助您确定您的网页在 LinkedIn 平台上共享时的显示方式。 如果关联的 OG Image 已更改，您还可以请求 LinkedIn 重新抓取页面。

开放图图像生成器如何工作？

在 Google Sheet 中，转到 Extensions 菜单并选择 Apps Script 以查看用于生成 Open Graph 图像的源代码。 您还可以使用任何可用模板在 Canva 中创建图形，然后在 Google 幻灯片中导入 Canva 设计。

该应用程序是用 Google Apps 脚本编写的。 它从 Google 表格中读取帖子标题，为表格中的每一行生成演示文稿的副本，生成幻灯片的屏幕截图并将其添加到您的 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 ) ; } } ) ; } , } ;