Jak tworzyć dynamiczne obrazy otwartego grafu za pomocą Arkuszy Google

Obraz z otwartym wykresem (obraz OG) to obraz, który jest wyświetlany, gdy którykolwiek z linków do Twojej witryny jest udostępniany na Facebooku, LinkedIn lub Twitterze. Możesz podać publiczny adres URL obrazu w metatagach swojej witryny, a witryna mediów społecznościowych zostanie stamtąd automatycznie pobrana.

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

Otwórz obrazy wykresów za pomocą Puppeteer

Github wewnętrznie wykorzystuje bibliotekę Google Puppeteer do generowania dynamicznych obrazów Open Graph. Obrazy są generowane w locie poprzez wprowadzenie niestandardowego kodu HTML do Puppeteer, który następnie generuje zrzut ekranu. W tym tweecie możesz zobaczyć przykładowy obraz OG wygenerowany przez Github.

Vercel, firma stojąca za Next.js, również używa Puppeteer do swojego otwartego generatora obrazów. Bezgłowy chrom jest używany do renderowania strony HTML, przechwytywany jest zrzut ekranu strony, a plik jest buforowany w celu poprawy wydajności.

Twórz obrazy Open Graph bez Puppeteer

Puppeteer to wspaniała biblioteka (używam jej wewnętrznie dla screnshot.guru), ale wymaga trochę wiedzy technicznej, aby wdrożyć Puppeteer jako funkcję w chmurze. Wdrożenie Puppeteer w chmurze wiąże się również z kosztami, ponieważ musisz płacić za każde żądanie wysłane do usługi.

Jeśli szukasz rozwiązania bez kodu, bez kosztów i bez marionetek, możesz użyć Arkuszy Google do wygenerowania obrazów Open Graph. To jest to, czego używam do generowania dynamicznych i unikalnych obrazów dla każdej strony mojej witryny. W tym tweecie możesz zobaczyć przykładowy obraz OG.

Pomysł inspirowany jest programem Document Studio. Tworzysz projekt obrazu w Prezentacjach Google, zastępujesz tekst zastępczy w szablonie tytułem swojej strony internetowej, a następnie generujesz zrzut ekranu prezentacji i zapisujesz go na swoim Dysku Google.

Aby rozpocząć, utwórz kopię tego Arkusza Google na swoim Dysku Google. Zastąp tytuły w kolumnie A tytułami swoich stron i wyczyść kolumnę URL obrazu. Kliknij przycisk Play , autoryzuj skrypt, a zauważysz, że arkusz kalkulacyjny zostanie natychmiast zaktualizowany o adresy URL obrazów dla każdej strony.

Dodaj więcej tytułów stron w Arkuszu Google, ponownie naciśnij przycisk Play , a arkusz kalkulacyjny zostanie zaktualizowany o adresy URL obrazów tylko nowych stron. Otóż ​​to.

Przetestuj swoje obrazy Open Graph

Po dodaniu metatagów Open Graph do swojej witryny możesz przetestować obrazy Open Graph za pomocą poniższego narzędzia.

1. cards-dev.twitter.com/validator — wklej adres URL swojej witryny w polu adresu URL i kliknij przycisk Validate poprawność, aby sprawdzić, czy Twitter jest w stanie wyrenderować obraz dostarczony w metatagach Open Graph. Możesz również użyć tego narzędzia do sprawdzania poprawności, aby wyczyścić obraz OG z pamięci podręcznej Twittera dla dowolnej strony.

2. developers.facebook.com/tools/debug/ — wklej adres URL swojej witryny w polu adresu URL i kliknij przycisk Debug , aby sprawdzić, czy Facebook jest w stanie wyrenderować obraz dostarczony w metatagach Open Graph.

3. linkedin.com/post-inspector/ — narzędzie LinkedIn Post Inspector może pomóc Ci określić, jak Twoja strona internetowa będzie wyglądać po udostępnieniu na platformie LinkedIn. Możesz również poprosić LinkedIn o ponowne zeskrobanie strony, jeśli powiązany obraz OG uległ zmianie.

Jak działa generator obrazów z otwartym wykresem?

W Arkuszu Google przejdź do menu Rozszerzenia i wybierz Apps Script, aby wyświetlić kod źródłowy używany do generowania obrazów Open Graph. Możesz także tworzyć grafikę w serwisie Canva przy użyciu dowolnego z dostępnych szablonów, a następnie importować projekty Canva do Prezentacji Google.

Aplikacja jest napisana w Google Apps Script. Odczytuje tytuły postów z Arkuszy Google, generuje kopię prezentacji dla każdego wiersza w arkuszu, generuje zrzut ekranu slajdu i dodaje go do Dysku 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 ) ; } } ) ; } , } ;