如何使用Facebook偵錯程式修復WordPress圖片

無論您是博主、社交媒體營銷人員，還是隻是小企業主，在某些時候，您都可能會遇到Facebook無法顯示來自WordPress網站的正確影象的問題。有時Facebook可能會拉取舊影象，甚至更糟，根本沒有影象！值得慶幸的是，您可以使用名為Facebook Debugger（Facebook偵錯程式）的工具輕鬆解決和修復這些型別的問題。檢視下面您可能遇到的一些常見情況以及如何解決這些情況。

Facebook如何獲取資訊

每當您向WordPress分享內容時，Facebook都會將您的影象快取在他們的伺服器和CDN上（在此處閱讀有關什麼是CDN及其工作原理的更多資訊）。您可以將這與快取在您的站點上的工作方式相同，有時您必須清除快取才能使事情再次執行。Facebook有時也是如此。如果您在您的網站上進行更新，當您去分享它時，Facebook可能仍會顯示舊影象，這是因為它不會獲取新資訊，而是提供它已經快取的資訊。

關於您的連結和內容本身的資訊也是如此。他們獲取他們所謂的開放圖譜元標籤。根據Facebook的說法，Open Graph協議使任何網頁都能夠成為社交圖中的豐富物件。基本上，這些是標籤（程式碼），用於告訴Facebook有關您分享內容的資訊。

不確定您是否在您的網站上使用Open Graph元標籤？如果您使用的是流行的外掛，例如Yoast SEO或Social Warfare，它們實際上會在幕後自動為您新增這些標籤（注：一般WordPress網站面向海外使用者就會用到）。

讓我們以其中一個頁面為例。如果我們檢視該文章的原始碼，我們可以看到以下有關Open Graph的資料。注意：Open Graph使用不同的屬性，例如og:title我們在本教程中真正關心的屬性，即og:image. 這是我們網站上的程式碼，Facebook會檢視該程式碼以確定要顯示的特色圖片、標題和描述。

<meta property="og:locale" content="zh-CN" />
<meta property="og:type" content="article" />
<meta property="og:title" content="WordPress終極SEO優化方案: 55個站長必須掌握的SEO小技巧" />
<meta property="og:description" content="僅僅因為搜尋引擎優化（SEO優化）在過去十年中發生了翻天覆地的變化，並不意味著它已經死了。實際上，WordPress的市場份額越多，就越多站長尋求優化WordPress SEO的方法。" />
<meta property="og:url" content="https://www.wbolt.com/tw/wordpress-seo-tips.html" />
<meta property="og:site_name" content="閃電博" />
<meta property="article:publisher" content="https://www.facebook.com/wbolt" />
<meta property="article:author" content="https://www.facebook.com/wbolt" />
<meta property="article:tag" content="webdev" />
<meta property="article:tag" content="webperf" />
<meta property="fb:app_id" content="148976462317083" />
<meta property="og:image" content="https://static.wbolt.com/wp-content/uploads/2021/01/wordpress-seo-1024x512-1.jpg!o" />
<meta property="og:image:secure_url" content="https://static.wbolt.com/wp-content/uploads/2021/01/wordpress-seo-1024x512-1.jpg!o" />

使用Facebook偵錯程式

與任何平臺或工具一樣，它也會有您必須解決的問題或怪癖，特別是如果您不遵循為最佳實踐制定的準則。Facebook Debugger（Facebook偵錯程式）工具旨在幫助您解決Open Graph元標籤的問題，以及解決快取問題。

您可以在Facebook開發人員網站的工具和支援下找到Facebook偵錯程式。如果您是在Facebook上分享大量內容的人，這是一個很好的書籤連結以供將來參考。

Facebook偵錯程式工具

要抓取文章，只需輸入URL並單擊“除錯”。我們實際上將在我們的示例中使用一個實時案例。我們最近剛剛更新了我們網站速度優化文章中的圖片。當我們將其輸入Facebook Debugger時，它會首先拉出他們的快取資訊（如下所示）。

這是人們在分享我們的文章時實際看到的。但是，在這種情況下，它從我們更新文章之前提取舊影象。我們還可以看到og:image是舊檔名。

Facebook偵錯程式中顯示的舊影象和URL

所以，我們能做些什麼？有兩件事需要做。請按照以下步驟操作。

第 1 步 – 清除該URL的WordPress快取

為了確保Facebook獲取最新資訊，我們需要做的第一件事就是清除我們 WordPress 網站本身的快取。沒錯，從技術上講，這裡可能涉及兩層快取。如果舊影象仍然快取在您的網站上，Facebook 偵錯程式將無法幫助解決您的問題，因為它只會重新獲取快取的資訊。

使用不同的快取解決方案或第三方外掛，您需要檢視他們的文件以確保您知道如何清除URL的快取。以下是一些流行的快取解決方案的連結：

如果所有其他方法都失敗了，您可以隨時清除整個WordPress網站上的快取（如下所示）。但是，出於效能原因，通常不建議這樣做，因為您的站點必須重建快取，同時降低載入時間。

如果您仍然遇到問題，您的影象也可以快取在您的CDN上。在這種情況下，您可能需要清除CDN快取。

第 2 步 – 在Facebook偵錯程式中再次抓取

現在已清除相關帖子或頁面的快取，我們需要在Facebook偵錯程式工具中再次抓取它。所以我們輸入URL並點選“重新獲取”按鈕。

在Facebook Debugger工具中再次抓取

您可能會遇到警告。根據我們的經驗，這些並不總是最準確的。例如，我們看到一條警告，指出我們的影象超過了8 MB的最大大小或伺服器響應速度太慢。首先，我們的影象遠不及那個大小，實際上只有160.63 KB。其次，我們的伺服器閃電般快速，整個頁面本身在 1 秒內載入。

所以這就是我們第二次點選“重新抓取”按鈕的地方。是的，這聽起來可能很奇怪。但很多時候你可能需要點選兩次。只需要幾秒鐘。現在你可以看到它現在正在提取我們的新特色影象，如果我們檢視 og:image 屬性，它確實是新檔名。

請務必注意，這不會更新已分享的Facebook帖子的影象。這隻會影響您或其他人事後分享的帖子。

其他Facebook偵錯程式提示

您可以使用Facebook Debugger工具不僅更新舊影象，還可以更新您在Facebook帖子中看到的內容（文字）。標題和描述都是開放圖譜元標籤。因此，如果您需要改寫某些內容，請在WordPress中進行更新，然後按照上述完全相同的步驟進行操作。

提供的“og:image”屬性尚不可用

此外，僅僅因為我們忽略了上面的警告並不意味著它們並不總是有用。事實上，當涉及到您應該使用的影象時，有推薦的尺寸。否則，可能會發生不好的事情。例如根本沒有顯示的影象（如下面的警告所示）。

提供的 ‘og:image’ 屬性尚不可用，因為新影象是非同步處理的。為確保新URL的分享包含影象，請使用“og:image:width”和“og:image:height”標籤指定尺寸。

Facebook偵錯程式 – 圖片太小

發生上述情況是因為我們的影象太小了。Facebook要求的最小影象尺寸為200 x 200畫素。對於Facebook圖片，通常越大越好。1,200 x 630 畫素似乎最適合大多數人。放大也可以，實際上我們在第一個示例中的帖子中的影象是1460 x 730。請記住，Facebook 會裁剪更大的任何內容，因此保持縱橫比是最重要的部分之一。

如果您使用的是Yoast SEO之類的外掛，也可以建議手動設定影象。也許您的WordPress主題上的特色圖片具有不同的縱橫比或大小。或者你甚至不使用特色圖片！

在這種情況下，Yoast SEO外掛允許您為Facebook手動上傳不同大小的影象，這些影象將填充那些Open Graph Meta標籤。如果需要，您還可以手動設定標題和描述。

Yoast SEO Facebook社交框

缺少以下必需的屬性：fb:app_id

您可能還會看到以下有關缺少Facebook應用ID的警告。請務必注意，這不會以任何方式干擾在Facebook上分享帖子的能力。很多時候這可以簡單地忽略。但是，它確實限制了您使用Facebook Insights資料的能力。

缺少以下必需的屬性：fb:app_id

如果您需要額外的洞察資料，則需要將您的Facebook應用ID新增到您的網站。以下是有關如何使用Yoast SEO外掛將其新增到WordPress的說明。

建立您的Facebook應用程式：https : //developers.facebook.com/docs/apps/register （這是完全免費的）
從應用儀表板複製您的Facebook應用 ID 。
在您的WordPress儀表盤中，單擊左側的“SEO”。
在“Facebook”選項卡下，您可以輸入您的Facebook應用ID。

新增Facebook應用ID

在Facebook偵錯程式工具中重新測試之前，請務必清除您網站的快取。

小結

希望您對Facebook Debugger工具以及如何使用它對WordPress網站上的影象進行故障排除和修復有更多的瞭解。記得清除所有快取層，然後刮掉。您的新圖片應該會正確顯示，以便所有人在Facebook上分享。

如何使用Facebook偵錯程式修復WordPress圖片

Facebook如何獲取資訊