如何使用Facebook OpenGraph調試器修復常見錯誤

Facebook調試器 是使您能夠分析和排除故障的工具 OpenGraph的 您的任何頁面的標籤。 使用調試器,您可以快速將社交媒體資源豐富的摘要中的錯誤源歸零。

由於社交媒體和Facebook本身是任何營銷策略的關鍵組成部分,因此知道如何使用此工具可以大有作為。

讓我們談談Facebook調試器和OpenGraph!

什麼是OpenGraph(以及如何在WordPress中添加標籤)

OpenGraph是指可用於向頁面和帖子添加元數據的標籤的集合。 社交媒體平台使用這些OpenGraph標籤生成它們顯示給用戶的豐富網頁摘要:

如何使用Facebook OpenGraph調試器修復常見錯誤如何使用Facebook OpenGraph調試器修復常見錯誤

如果您不使用OpenGraph標籤,則社交媒體平台在您共享頁面時將自動為頁面生成摘要。 但是,採用這種方法,您將無法完全控制這些豐富的摘要的外觀。

這意味著,如果隨附的圖像看起來不太好,則需要在WordPress中進行更改。 如果您不喜歡Facebook使用的元描述,則還需要修改您的內容。 總體而言,如果您想利用社交網路作為流量來源,這不是一個明智的方法。

即使這個簡單的示例也要求您在後台添加多個OpenGraph標籤。 對於豐富代碼段,您需要使用以下標記:

此示例來自先前的優雅主題文章 關於OpenGraph標籤 以及如何使用它們(您應該閱讀!)。 簡而言之,可以通過兩種方式將OpenGraph標記添加到內容中:

  1. 手動。 就像 與模式標記,您可以手動將OpenGraph標記添加到頁面。 缺點是您必須對要在社交媒體上共享的網站上的每個頁面執行此操作。
  2. 使用插件。 有很多插件可以自動為您的內容生成OpenGraph標籤。 最受歡迎的插件選項是 Yoast SEO,儘管其他人也可以這樣做。

不幸的是,Yoast SEO的免費版本不包含豐富的代碼片段預覽功能。 但是,它確實使您能夠使用簡單的編輯器來修改內容的OpenGraph標記。

如果你已經 使用Yoast SEO,利用其OpenGraph功能是確保您的社交媒體摘要準確呈現您想要的方式的最簡單方法。

為什麼要對OpenGraph使用Facebook調試器

Facebook調試器是一個工具,可以幫助您確保豐富的社交媒體片段在各個方面都能正常運行。 要使用它,只需訪問 共享調試器 Facebook開發人員頁面。 在這裡,輸入您要檢查其標籤的頁面的URL,然後單擊「調試」按鈕:

如何使用Facebook OpenGraph調試器修復常見錯誤1如何使用Facebook OpenGraph調試器修復常見錯誤

您甚至不需要Facebook帳戶即可使用調試器。 一旦您分析了網址,它就會向您顯示其豐富代碼段的預覽以及諸如 規範網址

如何使用Facebook OpenGraph調試器修復常見錯誤2如何使用Facebook OpenGraph調試器修復常見錯誤

如果向下滾動,則可以分析頁面的所有OpenGraph標籤:

如何使用Facebook OpenGraph調試器修復常見錯誤3如何使用Facebook OpenGraph調試器修復常見錯誤

請記住,Facebook調試器不允許您修復錯誤或直接修改標籤。 但是,它確實向您顯示了內容在Facebook上的外觀預覽。 更重要的是,如果它在您的OpenGraph標籤中檢測到錯誤,它還會向您發出警告:

如何使用Facebook OpenGraph調試器修復常見錯誤4如何使用Facebook OpenGraph調試器修復常見錯誤

這個特定的錯誤是我們將在下一部分向您展示如何進行故障排除的三個錯誤之一。

如何使用Facebook調試器修復3個常見的OpenGraph錯誤

在本節中,我們將主要依靠Facebook Debugger。 但是,如果您使用的是Yoast SEO,我們還將向您展示該插件如何幫助您解決一些OpenGraph錯誤。 讓我們開始吧!

1.再次抓取URL以更新關聯的圖像

使用OpenGraph標記可能會遇到的最常見錯誤之一是,Facebook調試器將顯示過時的特色圖像。 發生這種情況是因為當您更新頁面或帖子的關聯圖像時,它不會在Facebook上自動更新。 當您將OpenGraph標記用於圖像時,Facebook會在其末端緩存這些文件以提高性能。 因此,如果您最終更新了特色圖片,則需要「強制」 Facebook在側面執行相同的操作。

最簡單的方法是使用Facebook Debugger的Scrape Again功能。 您可以在我們上次抓取網址的時間和方式下找到此選項:

如何使用Facebook OpenGraph調試器修復常見錯誤5如何使用Facebook OpenGraph調試器修復常見錯誤

單擊「再次拖動」按鈕,然後在「鏈接預覽」部分中查看頁面的特色圖像是否發生了變化。 如果不是這樣,有時可以再次單擊該按鈕來達到目的(不是非常高科技,但是可以!)

如果圖片上傳失敗,則可能是網站上存在緩存問題。 在這種情況下,您將要清除站點的緩存,然後使用「再次拖動」按鈕強制Facebook更新其圖像信息。

2.修復「屬性尚不可用」錯誤

og:image標記是OpenGraph用來聲明社交媒體平台應為每個頁面顯示的圖像文件的標記。 在某些情況下,您可能會遇到「 og:image屬性尚不可用」錯誤。

如何使用Facebook OpenGraph調試器修復常見錯誤6如何使用Facebook OpenGraph調試器修復常見錯誤

這意味著特色圖片的解析度可能存在問題。 如果圖像尺寸小於200×200,則根本無法使用。

理想情況下,您為社交媒體豐富片段設置的圖像應為1080像素寬或更高。 大型精選圖片不僅看起來更好,而且還可以幫助您將注意力吸引到社交媒體上的內容:

如何使用Facebook OpenGraph調試器修復常見錯誤7如何使用Facebook OpenGraph調試器修復常見錯誤

如果您想了解有關圖片和og:image標籤的更多信息, 還有另一篇文章 在優雅主題博客上。 簡而言之,如果Facebook調試器返回與圖像大小有關的錯誤,則通常可以使用以下兩種方法之一對其進行修復:

  1. 使用更高解析度的版本更新頁面的特色圖像(並從現在開始堅持使用高質量圖片!)。
  2. 使用Yoast SEO在og:image標記內指示其他圖像文件。

對於Yoast SEO,您可以在要更新的帖子或頁面的「社交」選項卡下找到更改「 Facebook圖像」的選項:

如何使用Facebook OpenGraph調試器修復常見錯誤8如何使用Facebook OpenGraph調試器修復常見錯誤

更新圖像或相應的標籤後,請使用Facebook調試器中的「再次抓取」按鈕。 「 og:image屬性尚不可用」警告應該消失,並且圖像應正確顯示。

3.將缺少的fb:app_id屬性添加到您的網站

讓我們回到本文前面的警告:

如何使用Facebook OpenGraph調試器修復常見錯誤9如何使用Facebook OpenGraph調試器修復常見錯誤

此警告表示您的網站沒有關聯的Facebook應用ID。 您不需要應用程序ID即可在社交媒體上共享您的內容,但是它確實使您能夠訪問Facebook Insights。

鑒於 Facebook見解 可以幫助您改善營銷工作並評估發布效果,這需要花費一些設置時間。 如果您有興趣訪問這些分析,則需要為您的網站生成一個Facebook App ID。

擁有應用程序ID後,您可以使用Yoast SEO通過fb:app_id屬性將其添加到頁面中。 為此,請轉到您網站上的SEO>社交> Facebook選項卡,然後查找Facebook App ID欄位:

如何使用Facebook OpenGraph調試器修復常見錯誤10如何使用Facebook OpenGraph調試器修復常見錯誤

添加您的應用ID,將更改保存到插件的設置中,您就可以開始了。 從現在開始,Facebook調試器不應返回與缺少的fb:app_id屬性相關的任何錯誤。

結論

Facebook調試器 使用起來非常簡單。 但是,如果沒有基本的了解,您可能會遇到一些錯誤。 OpenGraph標籤。 一般來說,如果您使用諸如 Yoast SEO,您不必擔心手動設置標籤。

使用Facebook調試器,您可以通過以下方法快速解決OpenGraph錯誤:

  1. 再次抓取URL以更新關聯的圖像。
  2. 修復「 og:image屬性尚不可用」錯誤。
  3. 將缺少的fb:app_id屬性添加到您的網站。

您對如何使用Facebook調試器有任何疑問嗎? 讓我們在下面的評論部分中討論它們!

Sergey Targasov / shutterstock.com的文章縮略圖。

資源

相關文章