Как создавать динамические изображения Open Graph с помощью Google Sheets

Опубликовано: 2022-02-26

Изображение с открытым графиком (изображение OG) — это изображение, которое отображается, когда любая из ссылок на ваш сайт публикуется в Facebook, LinkedIn или Twitter. Вы можете указать общедоступный URL-адрес изображения в метатегах вашего веб-сайта, и веб-сайт социальной сети автоматически подберет оттуда.

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

Открыть графические изображения с помощью Puppeteer

Github использует библиотеку Google Puppeteer для создания динамических изображений Open Graph. Изображения генерируются на лету путем передачи пользовательского HTML-кода в Puppeteer, который затем создает снимок экрана. Вы можете просмотреть образец OG-образа, сгенерированный Github, в этом твите.

Vercel, компания Next.js, также использует Puppeteer для своего генератора изображений с открытым графиком. Безголовый хром используется для рендеринга HTML-страницы, делается снимок экрана страницы, а файл кэшируется для повышения производительности.

Создавайте изображения Open Graph без Puppeteer

Puppeteer — замечательная библиотека (я использую ее для внутреннего использования в screnshot.guru), но она требует некоторых технических ноу-хау для развертывания Puppeteer в качестве облачной функции. Развертывание Puppeteer в облаке также связано с затратами, поскольку вы должны платить за каждый запрос, сделанный в сервисе.

Generate Open Graph Images

Если вы ищете решение без кода, затрат и кукловодов, вы можете использовать Google Таблицы для создания изображений Open Graph. Это то, что я использую для создания динамических и уникальных изображений для каждой страницы моего сайта. Вы можете увидеть образец изображения OG в этом твите.

Идея вдохновлена ​​​​Document Studio. Вы создаете дизайн изображения в Google Slides, заменяете текст-заполнитель в шаблоне заголовком своей веб-страницы, затем создаете снимок экрана презентации и сохраняете его на своем Google Диске.

Для начала сделайте копию этой таблицы Google на своем Google Диске. Замените заголовки в столбце А заголовками ваших страниц и очистите столбец URL-адрес изображения. Нажмите кнопку « Play , авторизуйте сценарий, и вы заметите, что таблица немедленно обновляется URL-адресами изображений для каждой страницы.

Добавьте больше заголовков страниц в Google Sheet, снова нажмите кнопку « Play , и в таблицу будут добавлены URL-адреса изображений только для новых страниц. Вот и все.

Open Graph Images

Проверьте свои изображения Open Graph

После того, как вы добавили метатеги Open Graph на свой веб-сайт, вы можете протестировать свои изображения Open Graph, используя инструмент ниже.

  1. cards-dev.twitter.com/validator — вставьте URL-адрес вашего веб-сайта в поле URL-адреса и нажмите кнопку « Validate », чтобы узнать, может ли Twitter отображать изображение, указанное в ваших метатегах Open Graph. Вы также можете использовать этот инструмент проверки, чтобы очистить изображение OG из кеша Twitter для любой страницы.

  2. Developers.facebook.com/tools/debug/ — вставьте URL-адрес вашего веб-сайта в поле URL-адреса и нажмите кнопку « Debug », чтобы узнать, может ли Facebook отображать изображение, указанное в ваших метатегах Open Graph.

  3. linkedin.com/post-spector/ — Инструмент LinkedIn Post Inspector может помочь вам определить, как будет выглядеть ваша веб-страница при публикации на платформе LinkedIn. Вы также можете запросить у LinkedIn повторную очистку страницы, если связанное изображение OG изменилось.

Как работает генератор изображений Open Graph?

В Google Sheet перейдите в меню «Расширения» и выберите «Скрипт приложений», чтобы просмотреть исходный код, который используется для создания изображений Open Graph. Вы также можете создавать графику в Canva, используя любой из доступных шаблонов, а затем импортировать проекты Canva в Google Slides.

Приложение написано на языке Google Apps Script. Он считывает заголовки сообщений из 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 ) ; } } ) ; } , } ;