辛宝Otto

辛宝Otto 的玄酒清谈

北漂前端程序员儿 / 探索新事物 / Web Worker 主播之一/内向话痨
xiaoyuzhou
email

12-速通 syntax.fm 659 OG 圖片

12.MP3
12.MP3

收聽方式#

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 開發人員的瀏覽器。
使用獨立瀏覽器在更短的時間內構建更好的網站,使您的網站響應更快、更易於訪問且性能更高。在每個項目上節省時間,熱愛它的每分鐘。

Pasted image 20230907113005

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

這些鏈接可能會用得上。

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

探索動態 SVG 和 Puppeteer 方案#

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

知識點引導#

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

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

文章和拓展鏈接

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

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

Pasted image 20230907113413

Canva api 設定,開發者文檔

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

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

相關鏈接#

補充#

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

keyvalue
oghttps://ijust.cc/
ogwebsite
ogHome
oghttps://ijust.cc/boy.png
og《咿呀 能跑就行》是辛寶 Otto 的個人 Solo 播客和博客,內容圍繞生活、職場、前端學習展開
og1694057657
ia
ia
ia
ia
og:imagelogo
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。