So erstellen Sie dynamische Open Graph-Bilder mit Google Sheets

Veröffentlicht: 2022-02-26

Ein Open-Graph-Bild (OG-Bild) ist das Bild, das angezeigt wird, wenn einer Ihrer Website-Links auf Facebook, LinkedIn oder Twitter geteilt wird. Sie können die öffentliche URL des Bildes in den Meta-Tags Ihrer Website angeben und die Social-Media-Website wird automatisch von dort übernommen.

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

Öffnen Sie Diagrammbilder mit Puppeteer

Github verwendet intern die Puppeteer-Bibliothek von Google, um dynamische Open-Graph-Bilder zu generieren. Die Bilder werden spontan generiert, indem benutzerdefiniertes HTML in Puppeteer eingespeist wird, das dann einen Screenshot generiert. In diesem Tweet können Sie ein von Github generiertes OG-Beispielbild anzeigen.

Vercel, das Unternehmen hinter Next.js, verwendet auch Puppeteer für seinen Open-Graph-Bildgenerator. Headless Chromium wird zum Rendern einer HTML-Seite verwendet, ein Screenshot der Seite wird erfasst und die Datei wird zur Verbesserung der Leistung zwischengespeichert.

Erstellen Sie Open Graph-Bilder ohne Puppeteer

Puppeteer ist eine wunderbare Bibliothek (ich verwende sie intern für screnshot.guru), aber es erfordert einiges technisches Know-how, um Puppeteer als Cloud-Funktion einzusetzen. Die Bereitstellung von Puppeteer in der Cloud ist auch mit Kosten verbunden, da Sie für jede Anfrage an den Dienst bezahlen müssen.

Generate Open Graph Images

Wenn Sie nach einer Lösung ohne Code, ohne Kosten und ohne Puppenspieler suchen, können Sie Google Sheets verwenden, um Open Graph-Bilder zu generieren. Damit generiere ich dynamische und einzigartige Bilder für jede Seite meiner Website. Sie können ein Beispiel-OG-Bild in diesem Tweet sehen.

Die Idee ist von Document Studio inspiriert. Sie erstellen ein Bilddesign in Google Slides, ersetzen den Platzhaltertext in der Vorlage durch den Titel Ihrer Webseite, erstellen dann ein Screenshot-Bild der Präsentation und speichern es in Ihrem Google Drive.

Erstellen Sie zunächst eine Kopie dieser Google-Tabelle in Ihrem Google Drive. Ersetzen Sie die Titel in Spalte A durch die Titel Ihrer Seiten und löschen Sie die Spalte Bild-URL. Klicken Sie auf die Schaltfläche Play , autorisieren Sie das Skript und Sie werden feststellen, dass die Tabelle sofort mit den Bild-URLs für jede Seite aktualisiert wird.

Fügen Sie weitere Seitentitel in der Google-Tabelle hinzu, klicken Sie erneut auf die Schaltfläche Play und die Tabelle wird nur mit den Bild-URLs der neuen Seiten aktualisiert. Das ist es.

Open Graph Images

Testen Sie Ihre Open Graph-Bilder

Nachdem Sie Ihrer Website die Open Graph-Meta-Tags hinzugefügt haben, können Sie Ihre Open Graph-Bilder mit dem folgenden Tool testen.

  1. cards-dev.twitter.com/validator – Fügen Sie die URL Ihrer Website in das URL-Feld ein und klicken Sie auf die Schaltfläche Validate , um zu sehen, ob Twitter das in Ihren Open Graph-Meta-Tags bereitgestellte Bild rendern kann. Sie können dieses Validierungstool auch verwenden, um das OG-Bild für jede Seite aus dem Cache von Twitter zu löschen.

  2. developer.facebook.com/tools/debug/ – Fügen Sie die URL Ihrer Website in das URL-Feld ein und klicken Sie auf die Schaltfläche Debug , um zu sehen, ob Facebook das in Ihren Open Graph-Meta-Tags bereitgestellte Bild rendern kann.

  3. linkedin.com/post-inspector/ – Mit dem Post-Inspector-Tool von LinkedIn können Sie bestimmen, wie Ihre Webseite aussehen wird, wenn sie auf der LinkedIn-Plattform geteilt wird. Sie können LinkedIn auch auffordern, die Seite neu zu scrapen, wenn sich das zugehörige OG-Bild geändert hat.

Wie funktioniert Open Graph Image Generator?

Gehen Sie im Google Sheet zum Menü Erweiterungen und wählen Sie Apps Script aus, um den Quellcode anzuzeigen, der zum Generieren der Open Graph-Bilder verwendet wird. Sie können auch Grafiken in Canva erstellen, indem Sie eine der verfügbaren Vorlagen verwenden und dann Canva-Designs in Google Slides importieren.

Die App ist in Google Apps Script geschrieben. Es liest die Beitragstitel aus Google Sheets, erstellt eine Kopie der Präsentation für jede Zeile im Blatt, erstellt einen Screenshot der Folie und fügt sie Ihrem Google Drive hinzu.

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