Cara Membuat Gambar Grafik Terbuka Dinamis dengan Google Spreadsheet

Diterbitkan: 2022-02-26

Gambar grafik terbuka (gambar OG) adalah gambar yang ditampilkan saat tautan situs web Anda dibagikan di Facebook, LinkedIn, atau Twitter. Anda dapat memberikan URL publik gambar di tag meta situs web Anda dan situs web media sosial akan secara otomatis mengambil dari sana.

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

Buka Gambar Grafik dengan Dalang

Github secara internal menggunakan perpustakaan Dalang Google untuk menghasilkan gambar Grafik Terbuka yang dinamis. Gambar dihasilkan dengan cepat dengan memasukkan HTML khusus ke dalam Dalang yang kemudian menghasilkan tangkapan layar. Anda dapat melihat contoh gambar OG yang dihasilkan oleh Github di tweet ini.

Vercel, perusahaan di belakang Next.js, juga menggunakan Puppeteer untuk generator gambar grafik terbuka mereka. Kromium tanpa kepala digunakan untuk merender halaman HTML, tangkapan layar halaman diambil dan file di-cache untuk meningkatkan kinerja.

Buat Gambar Grafik Terbuka tanpa Dalang

Puppeteer adalah perpustakaan yang luar biasa (saya menggunakannya secara internal untuk screnshot.guru) tetapi memang memerlukan beberapa pengetahuan teknis untuk menggunakan Puppeteer sebagai fungsi cloud. Ada juga biaya yang terlibat dalam menyebarkan Dalang ke cloud karena Anda harus membayar untuk setiap permintaan yang dibuat ke layanan.

Generate Open Graph Images

Jika Anda mencari solusi tanpa kode, tanpa biaya, tanpa dalang, Anda dapat menggunakan Google Spreadsheet untuk menghasilkan gambar Grafik Terbuka. Itulah yang saya gunakan untuk menghasilkan gambar dinamis dan unik untuk setiap halaman situs web saya. Anda dapat melihat contoh gambar OG di tweet ini.

Idenya terinspirasi oleh Document Studio. Anda membuat desain gambar di Google Slides, mengganti teks placeholder di template dengan judul halaman web Anda, lalu menghasilkan gambar tangkapan layar presentasi dan menyimpannya di Google Drive Anda.

Untuk memulai, buat salinan Google Spreadsheet ini di Google Drive Anda. Ganti judul di Kolom A dengan judul halaman Anda dan kosongkan kolom URL Gambar. Klik tombol Play , otorisasi skrip dan Anda akan melihat bahwa spreadsheet segera diperbarui dengan URL gambar untuk setiap halaman.

Tambahkan lebih banyak judul halaman di Google Sheet, tekan tombol Play lagi dan spreadsheet akan diperbarui dengan URL gambar hanya dari halaman baru. Itu dia.

Open Graph Images

Uji Gambar Grafik Terbuka Anda

Setelah Anda menambahkan tag meta Grafik Terbuka ke situs web Anda, Anda dapat menguji gambar Grafik Terbuka Anda menggunakan alat di bawah ini.

  1. cards-dev.twitter.com/validator - Tempelkan URL situs web Anda di bidang URL dan klik tombol Validate untuk melihat apakah Twitter dapat merender gambar yang disediakan di tag meta Grafik Terbuka Anda. Anda juga dapat menggunakan alat validator ini untuk menghapus Gambar OG dari cache Twitter untuk halaman mana pun.

  2. developers.facebook.com/tools/debug/ - Tempel URL situs web Anda di bidang URL dan klik tombol Debug untuk melihat apakah Facebook dapat merender gambar yang disediakan di tag meta Grafik Terbuka Anda.

  3. linkedin.com/post-inspector/ - Alat Post Inspector LinkedIn dapat membantu Anda menentukan bagaimana halaman web Anda akan muncul saat dibagikan di platform LinkedIn. Anda juga dapat meminta LinkedIn untuk mengikis ulang halaman jika Gambar OG terkait telah berubah.

Bagaimana Cara Kerja Open Graph Image Generator?

Di dalam Google Sheet, buka menu Extensions dan pilih Apps Script untuk melihat kode sumber yang digunakan untuk menghasilkan gambar Open Graph. Anda juga dapat membuat grafik di Canva menggunakan salah satu template yang tersedia, lalu mengimpor desain Canva di Google Slide.

Aplikasi ini ditulis dalam Skrip Google Apps. Itu membaca judul posting dari Google Sheets, menghasilkan salinan presentasi untuk setiap baris di sheet, menghasilkan tangkapan layar slide dan menambahkannya ke Google Drive Anda.

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