使用 Open Graph 規範社交分享的外觀

開放圖譜 (OG) 是一個系統，當您在 Facebook、LinkedIn、Twitter 等社交平台上分享 URL 時，這些平台會利用該系統從您的網站中提取資料。您可以透過開放圖譜設定定義網站連結預覽中顯示的資訊。 

要記住的重點： 如果您尚未配置開放圖譜設置，則當您的網站在社交媒體上共享時，將顯示隨機內容（或不顯示內容）。 

本指南將教您： 

1. 設定開放圖標籤
2. 排列動態開放圖標籤
3. 測試並修正 Open Graph 設定
4. 解決 Open Graph 影像遺失的問題

如何建立Open Graph標籤

在Webflow中，您可以定義3個Open Graph標籤： 

• 開啟圖標題 — 分享頁面 URL 時顯示為頁面標題的文本
• 開放圖描述 — 出現在標題下方並提供頁面內容摘要的文字表示
• 打開圖形圖像 — 標題和描述上方顯示的圖像

有用的提示： 當開放圖譜內容針對所共享的特定頁面進行客製化時，它是最有效的。例如，主頁的開放圖譜內容應與定價頁面的內容不同。開放圖譜標籤不能全域應用，且是指定頁面獨有的 - 因此，建議為每個頁面設定開放圖譜標籤。

您可以透過導航到存取和調整頁面的開放圖譜設置 頁面面板 > 頁面設定 > 開啟圖表設置.

專業提示： 在啟動了本地化的網站上，您可以本地化頁面級開放圖譜設定。了解有關在地化 Open Graph 設定的更多資訊。 

開啟圖表標題和描述 

您可以手動輸入開放圖譜標題和描述，或勾選每個開放圖譜欄位下方的 checkboxes 從 SEO 標題和元描述中檢索它們。 

打開圖形圖像

若要指定 Open Graph 圖像，請提供圖像的直接連結（即以圖像的檔案名稱和副檔名結尾的 URL）。 

若要在 Open Graph 映像欄位中使用資產面板中的映像： 

1. 將滑鼠懸停在圖像上 資產面板
2. 點選設定“齒輪” 出現的圖標
3. 右鍵單擊“關聯資產詳細資料選單中資產名稱旁的”圖標
4. 複製連結 
5. 將連結貼到 打開圖形圖像 場地

發現更多： 優化影像以增強網站預覽

如何配置動態開放圖標籤

在集合頁面上，您可以建立一個模板，集合中的所有頁面都將遵循該模板來獲取其開放圖譜詳細資訊。這樣，集合中的所有項目都將根據設定的範本自動產生其開放圖譜標題、描述和圖像，而不是手動設定每個集合項目的開放圖譜標題。例如，對於部落格文章集合，您可以使用動態資料從開放圖譜設定中的貼文名稱或標題集合欄位中提取內容。

與靜態頁面類似，您可以透過導航至編輯此訊息 頁面面板 > 頁面設定 > 開啟圖表設置. 

開啟圖表標題和描述 

若要使用集合字段中的動態資料預先載入開放圖譜標題和描述字段，請按一下 新增字段. 

您也可以手動輸入開放圖譜標題和描述，或透過選擇每個開放圖譜欄位下方的 checkboxes，從 SEO 標題和元描述中取得開放圖譜標題和描述。  

打開圖形圖像

若要在集合頁面上指派 Open Graph 映像，請選擇 打開圖形圖像 下拉式選單並選擇一個 影像 您的收藏中的欄位（例如，主圖像、縮圖等）。如果您的集合缺少影像字段，您將無法指定開放圖譜影像。

注意： 集合中的所有開放圖圖像必須具有相同的尺寸。 

如何檢查和修正 Open Graph 設定

在共享連結之前預覽連結可能會有所幫助，以了解它們將如何在社交媒體平台上顯示，或者如果連結預覽中出現過時的數據，則更新您的開放圖譜內容。

一些流行的社交媒體平台提供了自己的工具來預覽、調試和刷新開放圖譜數據： 

• Facebook
• 領英
• 推特

注意： Pinterest 和 Instagram 缺乏專門用於驗證 Open Graph 資料的工具。 Facebook 的偵錯工具可用於檢查您的網站在這些平台上的潛在顯示情況。造訪 Facebook 偵錯器需要您登入 Facebook。

Facebook 

Facebook 提供了自己的偵錯器工具，可讓您抓取（即索引）您的連結並檢索最新的開放圖譜資料。 

要使用 Facebook 調試器，請插入連結並點擊 偵錯。如果變更開放圖譜設定後顯示的資料已過時，請選擇 再刮一次 刷新資料。 

注意： 造訪 Facebook 偵錯器需要您登入 Facebook。

領英

LinkedIn 的職位督察 使您能夠要求重新抓取連結、查看 LinkedIn 上次更新連結預覽的時間以及解決與您的開放圖譜資料相關的問題。 

要使用 LinkedIn Post Inspector，請插入您的連結並點擊 檢查。您可以點擊屬性（例如標題、類型、圖像等）來深入了解 LinkedIn 如何選擇該值。 

注意： 造訪 LinkedIn 貼文檢查器需要您登入 LinkedIn。 

推特

Twitter 的卡片驗證器提供了一個日誌，其中包含有關連結的開放圖譜資料的偵錯資訊。要使用 Twitter 卡片驗證器，請插入您的連結並點擊 預覽卡. 

Twitter 不再在卡片驗證器中顯示您的連結預覽。若要查看您的連結在 Twitter 上分享時的顯示方式，請撰寫推文並插入您的連結。 

注意： 要存取 Twitter 上的卡片驗證器和推文編輯器，您需要登入您的 Twitter 帳戶。

如何解決遺失的 Open Graph 映像問題

在 Facebook 上分享您網站的連結時，您可能會發現連結預覽僅包含標題和說明，而開放圖譜設定中設定的圖像不存在。 

這種情況通常發生在共享頁面並首次生成預覽時，但可以透過刪除並重新添加帖子中的連結來解決此問題。但是，採用一些最佳實踐可以防止此問題： 

1. 保持網站上所有開放圖譜圖像的統一尺寸。 Facebook 建議使用最小寬度為 1080 像素的影像。查看 Facebook 關於分享圖像的建議。 
2. 透過 Facebook 偵錯器工具運行連結來預先快取您的映像。這也應該在更新您的開放圖譜影像後完成。 
3. 利用開放圖標籤向網路爬蟲指定影像的尺寸。這有利於網路爬蟲立即渲染圖像，而不需要非同步下載和處理。將以下程式碼片段插入 站點設定 > 自訂程式碼 選項卡 > 頭碼 部分，更改寬度和高度值以匹配網站上圖像的像素值（假設所有開放圖譜圖像的尺寸一致）： 

‍了解有關在網站的 head 和 body 標籤中實作自訂程式碼的更多資訊。 

需要記住的有用提示： 如果您在網站上使用不同尺寸的 Open Graph 圖像，請將上述程式碼片段插入 頁面面板 > 頁面設定 > 裡面標籤 而不是在您的網站設定中。集合中的每個開放圖圖像必須保持相同的尺寸。