辛宝Otto 的玄酒清谈

12.MP3

收聽方式#

• 小宇宙
• 蘋果播客
• IPFS

AI 總結試水#

以下是播客要點的摘要：

• OG 圖像詳情可見共享鏈接時用於社媒預覽的 Open Graph 圖像。它們是使用具有 “OG： image” 等屬性的元標記定義的。
• 動態生成 OG 圖像有不同的方法，包括使用 Satori/Vercel OG、Cloudinary 等包，或使用 Puppeteer 或 Playwright 以編程方式截屏。
• Satori 允許從 React 組件生成圖像，但在 CSS 支持方面存在限制。Cloudinary 涉及通過 URL 中的命令組裝圖像，這可能很複雜。
• 使用 Puppeteer 或 Playwright 對動態生成的頁面進行屏幕截圖是一種簡單的方法。這允許完全的 CSS 控制，但需要先渲染頁面。
• 要考慮的因素包括支持自定義字體、佈局處理、邊格、渲染性能和鏡像存儲 / 緩存。
• 示例討論了為博客文章、視頻、播客等生成圖像。可以包括作者照片、文本、日期等動態數據。

總而言之，播客討論了什麼是 OG 圖像，動態生成它們的不同技術，如 Satori、Cloudinary 和無頭瀏覽器，以及每種方法的權衡。

內容介紹#

本次聊的主題是： og image

原始 Syntax.fm 地址 https://syntax.fm/show/659/og-image-options
20230907

基礎概念#

facebook 2010 推出的 open graph 方案，為了社交媒體的 link 更有表現力，展示社交網站元數據。 能夠 preview images。對用戶來說為了 SEO。

OG 有很多，比如文章 視頻 照片等。圖片的比例不同網站要求不同，比較奇怪。

創建和驗證#

如何測試 OG 標籤在不同網站下的展示效果，也就是如何測試效果？

測試 og，有軟件，有程序 polypane 測試，就很方便，是一個服務。

The browser for ambitious web developers.

Build better websites in less time with a stand-alone browser that makes your site more responsive, more accessible and more performant. Save hours on each project, love every minute of it.
雄心勃勃的 Web 開發人員的瀏覽器。
使用獨立瀏覽器在更短的時間內構建更好的網站，使您的網站響應更快、更易於訪問且性能更高。在每個項目上節省時間，熱愛它的每分鐘。

對於 Twitter 和 Facebook 有專門的調試工具 OFFICIAL DEBUGGERS

• Facebook
• Twitter
• Linkedin
• Structured Data

這些鏈接可能會用得上。

如果文章更新了需要更新信息，也有地方主動刷新緩存，重新拉取。

探索動態 SVG 和 Puppeteer 方案#

幫助你生成 OG 也有很多動態生成方案：

• vercel/satori: Enlightened library to convert HTML and CSS to SVG 框架動態生成，傳遞參數，使用 jsx 生成動態 svg
• 圖片視頻壓縮 Cloudinary 涉及通過 URL 中的命令組裝圖像
• 也可以使用 puppeteer 來渲染截圖，圍繞動態截圖，用了 puppeteer 的 sls 版本
• Cloudflare Puppeteer 文檔 很強，在 worker 中使用 puppeteer
• 主播就做了一個動態的觀察網址和效果 地址
• 當然提供緩存支持，不用重複操作，也是按需操作
• 也可以使用 E2E 來做截圖，比如 Playwright

知識點引導#

og image
比較正式的一個網站介紹 Open Graph protocol ogp.me

開放圖協議使任何網頁都成為 社交圖中的豐富對象。例如，這在 Facebook 上使用以允許 任何網頁具有與 Facebook 上任何其他對象相同的功能。雖然存在許多不同的技術和模式，並且可以組合 總之，沒有一種技術可以提供足夠的信息 豐富地表示社交圖譜中的任何網頁。開放圖協議 以這些現有技術為基礎，為開發人員提供一件事 實現。開發人員的簡單性是開放圖協議的一個關鍵目標，它 為許多技術設計決策提供了信息。

文章和拓展鏈接

• meta dev 的文章介紹 developers.facebook.com
• meta tags Meta Tags Toolkit - Preview, Edit, and Generate
• Vercel 的 og 介紹 vercel
• 有一些不同的實現和 debugger 工具 ogp.me
• Canva api 設定，開發者文檔

Yoast SEO 是 WordPress 的插件之一，允許內容創作者在其帖子中添加元標籤，包括標題和描述。這些會顯示在 Google 搜索結果中，並將頁面的內容廣播給潛在讀者。

Yoast SEO 還允許您將 OG 圖像添加到 WordPress 上您想要的任何文章中。但是，您需要升級到企業帳戶才能訪問此功能。

Canva api 設定，開發者文檔

Yoast SEO 是 WordPress 的插件之一，允許內容創作者在其帖子中添加元標籤，包括標題和描述。這些會顯示在 Google 搜索結果中，並將頁面的內容廣播給潛在讀者。

Yoast SEO 還允許您將 OG 圖像添加到 WordPress 上您想要的任何文章中。但是，您需要升級到企業帳戶才能訪問此功能。

相關鏈接#

• syntax.fm 659

補充#

根據原始標籤，我們構建了以下開放圖譜屬性