Googleスプレッドシートを使用して動的なオープングラフ画像を作成する方法

公開: 2022-02-26

オープングラフ画像（OG画像）は、Facebook、LinkedIn、またはTwitterでWebサイトのリンクを共有したときに表示される画像です。あなたのウェブサイトのメタタグで画像のパブリックURLを提供することができ、ソーシャルメディアのウェブサイトはそこから自動的に取得されます。

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

Puppeteerでグラフ画像を開く

Githubは、GoogleのPuppeteerライブラリを内部的に使用して、動的なOpenGraph画像を生成します。画像は、カスタムHTMLをPuppeteerにフィードすることでオンザフライで生成され、Puppeteerはスクリーンショットを生成します。このツイートでは、Githubによって生成されたサンプルOG画像を表示できます。

Next.jsの背後にある会社であるVercelも、オープングラフ画像ジェネレーターにPuppeteerを使用しています。ヘッドレスクロムはHTMLページのレンダリングに使用され、ページのスクリーンショットがキャプチャされ、パフォーマンスを向上させるためにファイルがキャッシュされます。

Puppeteerなしでオープングラフ画像を作成する

Puppeteerは素晴らしいライブラリです（私はscrenshot.guruの内部で使用しています）が、Puppeteerをクラウド機能としてデプロイするには技術的なノウハウが必要です。また、Puppeteerをクラウドにデプロイするには、サービスに対して行われたすべてのリクエストに対して料金を支払う必要があるため、コストがかかります。

Generate Open Graph Images

ノーコード、ノーコスト、ノーパペティアソリューションをお探しの場合は、Googleスプレッドシートを使用してOpenGraph画像を生成できます。それは私が私のウェブサイトのすべてのページのためにダイナミックでユニークな画像を生成するために使用するものです。このツイートでサンプルのOG画像を見ることができます。

このアイデアは、DocumentStudioに触発されています。 Googleスライドで画像デザインを作成し、テンプレートのプレースホルダーテキストをウェブページのタイトルに置き換えてから、プレゼンテーションのスクリーンショット画像を生成してGoogleドライブに保存します。

開始するには、GoogleドライブにこのGoogleスプレッドシートのコピーを作成します。列Aのタイトルをページのタイトルに置き換え、[画像のURL]列をクリアします。 [ Play ]ボタンをクリックしてスクリプトを承認すると、スプレッドシートが各ページの画像URLですぐに更新されることがわかります。

Googleスプレッドシートにページタイトルを追加し、[ Play ]ボタンをもう一度押すと、スプレッドシートが新しいページのみの画像URLで更新されます。それでおしまい。

Open Graph Images

オープングラフ画像をテストする

Open GraphメタタグをWebサイトに追加したら、以下のツールを使用してOpenGraph画像をテストできます。

カード-dev.twitter.com/validator-ウェブサイトのURLをURLフィールドに貼り付け、[ Validate ]ボタンをクリックして、TwitterがOpenGraphメタタグで提供された画像をレンダリングできるかどうかを確認します。このバリデーターツールを使用して、任意のページのTwitterのキャッシュからOGイメージをクリアすることもできます。
developers.facebook.com/tools/debug/-ウェブサイトのURLをURLフィールドに貼り付け、[ Debug ]ボタンをクリックして、FacebookがOpenGraphメタタグで提供された画像をレンダリングできるかどうかを確認します。
LinkedIn.com/post-inspector/-LinkedInのPostInspectorツールは、LinkedInプラットフォームで共有したときにWebページがどのように表示されるかを判断するのに役立ちます。関連するOG画像が変更された場合は、LinkedInにページの再スクレイピングをリクエストすることもできます。

Open Graph Image Generatorはどのように機能しますか？

Googleスプレッドシート内で、[拡張機能]メニューに移動し、[Apps Script]を選択して、OpenGraph画像の生成に使用されるソースコードを表示します。利用可能なテンプレートのいずれかを使用してCanvaでグラフィックを作成し、GoogleスライドにCanvaデザインをインポートすることもできます。

アプリはGoogleAppsScriptで記述されています。 Googleスプレッドシートから投稿のタイトルを読み取り、シートのすべての行のプレゼンテーションのコピーを生成し、スライドのスクリーンショットを生成して、Googleドライブに追加します。

 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 ) ; } } ) ; } , } ;