收聽方式#
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
這些鏈接可能會用得上。
如果文章更新了需要更新信息,也有地方主動刷新緩存,重新拉取。
探索動態 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 上您想要的任何文章中。但是,您需要升級到企業帳戶才能訪問此功能。
相關鏈接#
補充#
根據原始標籤,我們構建了以下開放圖譜屬性
key | value |
---|---|
og | https://ijust.cc/ |
og | website |
og | Home |
og | https://ijust.cc/boy.png |
og | 《咿呀 能跑就行》是辛寶 Otto 的個人 Solo 播客和博客,內容圍繞生活、職場、前端學習展開 |
og | 1694057657 |
ia | |
ia | |
ia | |
ia | |
og:image | logo |