Google 스프레드시트로 동적 오픈 그래프 이미지를 만드는 방법

게시 됨: 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에 입력하여 스크린샷을 생성하여 즉석에서 생성됩니다. 이 트윗에서 Github에서 생성한 샘플 OG 이미지를 볼 수 있습니다.

Next.js 뒤에 있는 회사인 Vercel도 공개 그래프 이미지 생성기에 Puppeteer를 사용합니다. 헤드리스 크롬은 HTML 페이지를 렌더링하는 데 사용되며 페이지의 스크린샷이 캡처되며 성능 향상을 위해 파일이 캐시됩니다.

Puppeteer 없이 열린 그래프 이미지 만들기

Puppeteer는 훌륭한 라이브러리이지만(저는 내부적으로 screnshot.guru를 사용하고 있습니다) Puppeteer를 클라우드 기능으로 배포하려면 약간의 기술적 노하우가 필요합니다. 또한 서비스에 대한 요청에 대해 비용을 지불해야 하므로 Puppeteer를 클라우드에 배포하는 데 비용이 듭니다.

Generate Open Graph Images

코드, 비용, 인형극이 없는 솔루션을 찾고 있다면 Google 스프레드시트를 사용하여 Open Graph 이미지를 생성할 수 있습니다. 이것이 내가 웹사이트의 모든 페이지에 대해 역동적이고 고유한 이미지를 생성하는 데 사용하는 것입니다. 이 트윗에서 샘플 OG 이미지를 볼 수 있습니다.

이 아이디어는 Document Studio에서 영감을 받았습니다. Google 프레젠테이션에서 이미지 디자인을 만들고 템플릿의 자리 표시자 텍스트를 웹페이지 제목으로 바꾼 다음 프레젠테이션의 스크린샷 이미지를 생성하여 Google 드라이브에 저장합니다.

시작하려면 Google 드라이브에서 이 Google 스프레드시트를 복사하세요. A열의 제목을 페이지 제목으로 바꾸고 이미지 URL 열을 지웁니다. Play 버튼을 클릭하고 스크립트를 승인하면 스프레드시트가 각 페이지의 이미지 URL로 즉시 업데이트되는 것을 알 수 있습니다.

Google 시트에 페이지 제목을 더 추가하고 Play 버튼을 다시 누르면 스프레드시트가 새 페이지의 이미지 URL로만 업데이트됩니다. 그게 다야

Open Graph Images

오픈 그래프 이미지 테스트

웹사이트에 Open Graph 메타 태그를 추가한 후 아래 도구를 사용하여 Open Graph 이미지를 테스트할 수 있습니다.

  1. cards-dev.twitter.com/validator - URL 필드에 웹사이트의 URL을 붙여넣고 Validate 버튼을 클릭하여 Twitter가 Open Graph 메타 태그에 제공된 이미지를 렌더링할 수 있는지 확인합니다. 이 유효성 검사기 도구를 사용하여 모든 페이지의 Twitter 캐시에서 OG 이미지를 지울 수도 있습니다.

  2. 개발자.facebook.com/tools/debug/ - URL 필드에 웹사이트의 URL을 붙여넣고 Debug 버튼을 클릭하여 Facebook이 Open Graph 메타 태그에 제공된 이미지를 렌더링할 수 있는지 확인합니다.

  3. linkedin.com/post-inspector/ - LinkedIn의 Post Inspector 도구를 사용하면 LinkedIn 플랫폼에서 공유할 때 웹 페이지가 표시되는 방식을 결정할 수 있습니다. 연결된 OG 이미지가 변경된 경우 LinkedIn에 페이지를 다시 스크랩하도록 요청할 수도 있습니다.

개방형 그래프 이미지 생성기는 어떻게 작동합니까?

Google 시트 내에서 확장 프로그램 메뉴로 이동하고 Apps Script를 선택하여 Open Graph 이미지를 생성하는 데 사용되는 소스 코드를 봅니다. 사용 가능한 템플릿을 사용하여 Canva에서 그래픽을 만든 다음 Google 프레젠테이션에서 Canva 디자인을 가져올 수도 있습니다.

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