Google E-Tablolar ile Dinamik Açık Grafik Resimleri Nasıl Oluşturulur

Açık bir grafik görüntüsü (OG görüntüsü), web sitenizin bağlantılarından herhangi biri Facebook, LinkedIn veya Twitter'da paylaşıldığında görüntülenen görüntüdür. Resmin genel URL'sini web sitenizin meta etiketlerinde sağlayabilirsiniz ve sosyal medya web sitesi otomatik olarak oradan alacaktır.

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

Puppeteer ile Grafik Görüntülerini Açın

Github, dinamik Açık Grafik görüntüleri oluşturmak için Google'ın Kuklacı kitaplığını dahili olarak kullanır. Görüntüler, özel HTML'yi Puppeteer'a besleyerek anında oluşturulur ve ardından bir ekran görüntüsü oluşturur. Bu tweet'te Github tarafından oluşturulan örnek bir OG görüntüsünü görüntüleyebilirsiniz.

Next.js'nin arkasındaki şirket olan Vercel, açık grafik görüntü oluşturucuları için Puppeteer'ı da kullanıyor. Bir HTML sayfası oluşturmak için başsız krom kullanılır, sayfanın ekran görüntüsü alınır ve daha iyi performans için dosya önbelleğe alınır.

Kuklacı Olmadan Açık Grafik Görüntüleri Oluşturun

Puppeteer harika bir kitaplık (bunu dahili olarak screnshot.guru için kullanıyorum) ancak Puppeteer'ı bir bulut işlevi olarak dağıtmak için biraz teknik bilgi gerektiriyor. Hizmete yapılan istekler için ödeme yapmanız gerektiğinden, Puppeteer'ı buluta dağıtmanın da bir maliyeti vardır.

Kodsuz, maliyetsiz, kuklacı olmayan bir çözüm arıyorsanız, Açık Grafik görüntüleri oluşturmak için Google E-Tablolar'ı kullanabilirsiniz. Web sitemin her sayfası için dinamik ve benzersiz görüntüler oluşturmak için kullandığım şey bu. Bu tweet'te örnek bir OG görüntüsü görebilirsiniz.

Fikir, Document Studio'dan ilham almıştır. Google Slaytlar'da bir resim tasarımı oluşturursunuz, şablondaki yer tutucu metni web sayfanızın başlığıyla değiştirirsiniz, ardından sunumun ekran görüntüsü görüntüsünü oluşturur ve Google Drive'ınıza kaydedersiniz.

Başlamak için bu Google E-Tablosunun bir kopyasını Google Drive'ınızda oluşturun. A Sütunundaki başlıkları sayfalarınızın başlıklarıyla değiştirin ve Resim URL'si sütununu temizleyin. Play düğmesini tıklayın, komut dosyasını yetkilendirin ve elektronik tablonun her sayfa için resim URL'leriyle anında güncellendiğini fark edeceksiniz.

Google E-Tablosuna daha fazla sayfa başlığı ekleyin, Play düğmesine tekrar basın, e-tablo yalnızca yeni sayfaların resim URL'leriyle güncellenecektir. Bu kadar.

Açık Grafik Resimlerinizi Test Edin

Web sitenize Open Graph meta etiketlerini ekledikten sonra, Open Graph resimlerinizi aşağıdaki aracı kullanarak test edebilirsiniz.

1. cards-dev.twitter.com/validator - Web sitenizin URL'sini URL alanına yapıştırın ve Twitter'ın Açık Grafik meta etiketlerinizde sağlanan resmi oluşturup oluşturamayacağını görmek için Validate düğmesini tıklayın. Bu doğrulama aracını, herhangi bir sayfa için Twitter'ın önbelleğinden OG Görüntüsünü temizlemek için de kullanabilirsiniz.

2. geliştiriciler.facebook.com/tools/debug/ - Web sitenizin URL'sini URL alanına yapıştırın ve Facebook'un Açık Grafik meta etiketlerinizde sağlanan resmi oluşturup oluşturamayacağını görmek için Debug düğmesini tıklayın.

3. Linkedin.com/post-inspector/ - LinkedIn'in Post Inspector aracı, LinkedIn platformunda paylaşıldığında web sayfanızın nasıl görüneceğini belirlemenize yardımcı olabilir. İlişkili OG Görüntüsü değiştiyse, LinkedIn'den sayfayı yeniden kazımasını da isteyebilirsiniz.

Açık Grafik Görüntü Oluşturucu Nasıl Çalışır?

Google E-Tablosunun içinde, Uzantılar menüsüne gidin ve Açık Grafik görüntülerini oluşturmak için kullanılan kaynak kodunu görüntülemek için Apps Komut Dosyası'nı seçin. Ayrıca mevcut şablonlardan herhangi birini kullanarak Canva'da grafikler oluşturabilir ve ardından Canva tasarımlarını Google Slaytlar'a aktarabilirsiniz.

Uygulama, Google Apps Komut Dosyası ile yazılmıştır. Google E-Tablolar'daki yazı başlıklarını okur, sayfadaki her satır için sunumun bir kopyasını oluşturur, slaydın ekran görüntüsünü oluşturur ve Google Drive'ınıza ekler.

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