วิธีสร้างรูปภาพกราฟเปิดแบบไดนามิกด้วย Google ชีต

รูปภาพเปิดกราฟ (รูปภาพ 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 ใช้ไลบรารี Puppeteer ของ Google เพื่อสร้างภาพ Open Graph แบบไดนามิก รูปภาพถูกสร้างขึ้นทันทีโดยป้อน HTML ที่กำหนดเองลงใน Puppeteer ซึ่งจะสร้างภาพหน้าจอ คุณสามารถดูตัวอย่างภาพ OG ที่สร้างโดย Github ได้ในทวีตนี้

Vercel บริษัทที่อยู่เบื้องหลัง Next.js ยังใช้ Puppeteer สำหรับโปรแกรมสร้างภาพกราฟเปิดอีกด้วย ใช้โครเมียมแบบไม่มีส่วนหัวเพื่อแสดงผลหน้า HTML จับภาพหน้าจอของหน้า และแคชไฟล์ไว้เพื่อประสิทธิภาพที่ดีขึ้น

สร้างภาพ Open Graph โดยไม่ต้องใช้ Puppeteer

Puppeteer เป็นห้องสมุดที่ยอดเยี่ยม (ฉันใช้ภายในสำหรับ screnshot.guru) แต่ต้องใช้ความรู้ด้านเทคนิคในการปรับใช้ Puppeteer เป็นฟังก์ชันคลาวด์ นอกจากนี้ยังมีค่าใช้จ่ายในการปรับใช้ Puppeteer กับระบบคลาวด์ เนื่องจากคุณต้องจ่ายสำหรับคำขอที่เคยส่งไปยังบริการ

หากคุณกำลังมองหาโซลูชันที่ไม่มีโค้ด ไม่มีค่าใช้จ่าย ไม่ใช้เชิดหุ่น คุณสามารถใช้ Google ชีตเพื่อสร้างภาพ Open Graph ได้ นั่นคือสิ่งที่ฉันใช้เพื่อสร้างภาพแบบไดนามิกและไม่ซ้ำใครสำหรับทุกหน้าในเว็บไซต์ของฉัน คุณสามารถดูตัวอย่างภาพ OG ได้ในทวีตนี้

แนวคิดนี้ได้รับแรงบันดาลใจจาก Document Studio คุณสร้างการออกแบบรูปภาพใน Google สไลด์ แทนที่ข้อความตัวแทนในเทมเพลตด้วยชื่อหน้าเว็บของคุณ จากนั้นสร้างภาพหน้าจอของงานนำเสนอและบันทึกลงใน Google ไดรฟ์ของคุณ

ในการเริ่มต้น ทำสำเนา Google ชีตนี้ใน Google ไดรฟ์ของคุณ เปลี่ยนชื่อในคอลัมน์ A ด้วยชื่อหน้าของคุณและล้างคอลัมน์ URL ของรูปภาพ คลิกปุ่ม Play ให้สิทธิ์สคริปต์ และคุณจะสังเกตเห็นว่าสเปรดชีตได้รับการอัปเดตทันทีด้วย URL รูปภาพสำหรับแต่ละหน้า

เพิ่มชื่อหน้าใน Google ชีต กดปุ่ม Play อีกครั้ง และสเปรดชีตจะได้รับการอัปเดตด้วย URL รูปภาพของหน้าใหม่เท่านั้น แค่นั้นแหละ.

ทดสอบภาพ Open Graph ของคุณ

หลังจากที่คุณได้เพิ่มเมตาแท็ก Open Graph ลงในเว็บไซต์ของคุณแล้ว คุณสามารถทดสอบภาพ Open Graph ได้โดยใช้เครื่องมือด้านล่าง

1. Cards-dev.twitter.com/validator - วาง URL ของเว็บไซต์ของคุณในช่อง URL แล้วคลิกปุ่ม Validate ความถูกต้องเพื่อดูว่า Twitter สามารถแสดงภาพที่ระบุในเมตาแท็ก Open Graph ของคุณหรือไม่ คุณสามารถใช้เครื่องมือตรวจสอบความถูกต้องนี้เพื่อล้างภาพ OG จากแคชของ Twitter สำหรับหน้าใดก็ได้

2. Developer.facebook.com/tools/debug/ - วาง URL ของเว็บไซต์ของคุณในช่อง URL แล้วคลิกปุ่ม Debug เพื่อดูว่า Facebook สามารถแสดงรูปภาพที่ให้ไว้ในเมตาแท็ก Open Graph ของคุณหรือไม่

3. linkedin.com/post-inspector/ - เครื่องมือ Post Inspector ของ LinkedIn สามารถช่วยให้คุณกำหนดได้ว่าหน้าเว็บของคุณจะปรากฏอย่างไรเมื่อแชร์บนแพลตฟอร์ม LinkedIn คุณยังสามารถขอให้ LinkedIn ขูดหน้าใหม่ได้หากรูปภาพ OG ที่เกี่ยวข้องมีการเปลี่ยนแปลง

เครื่องมือสร้างรูปภาพกราฟเปิดทำงานอย่างไร

ภายใน Google ชีต ให้ไปที่เมนูส่วนขยายและเลือก Apps Script เพื่อดูซอร์สโค้ดที่ใช้สร้างภาพ Open Graph คุณยังสามารถสร้างกราฟิกใน Canva โดยใช้เทมเพลตที่มีอยู่ จากนั้นนำเข้าการออกแบบ Canva ใน Google สไลด์

แอปนี้เขียนด้วย Google Apps Script อ่านชื่อโพสต์จาก Google ชีต สร้างสำเนาของงานนำเสนอสำหรับทุกแถวในชีต สร้างภาพหน้าจอของสไลด์ และเพิ่มลงใน Google Drive ของคุณ

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