建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)建站是專業(yè)的南岸網(wǎng)站建設(shè)公司，南岸接單;提供網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行南岸網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
無(wú)論您是博主、社交媒體營(yíng)銷人員，還是只是小企業(yè)主，在某些時(shí)候，您都可能會(huì)遇到Facebook無(wú)法顯示來(lái)自wordpress網(wǎng)站的正確圖像的問(wèn)題。有時(shí)Facebook可能會(huì)拉取舊圖像，甚至更糟，根本沒(méi)有圖像！值得慶幸的是，您可以使用名為Facebook Debugger（Facebook調(diào)試器）的工具輕松解決和修復(fù)這些類型的問(wèn)題。查看下面您可能遇到的一些常見(jiàn)情況以及如何解決這些情況。
Facebook如何獲取信息
每當(dāng)您向WordPress分享內(nèi)容時(shí)，F(xiàn)acebook都會(huì)將您的圖像緩存在他們的服務(wù)器和CDN上（在此處閱讀有關(guān)什么是CDN及其工作原理的更多信息）。您可以將這與緩存在您的站點(diǎn)上的工作方式相同，有時(shí)您必須清除緩存才能使事情再次運(yùn)行。Facebook有時(shí)也是如此。如果您在您的網(wǎng)站上進(jìn)行更新，當(dāng)您去分享它時(shí)，F(xiàn)acebook可能仍會(huì)顯示舊圖像，這是因?yàn)樗粫?huì)獲取新信息，而是提供它已經(jīng)緩存的信息。
關(guān)于您的鏈接和內(nèi)容本身的信息也是如此。他們獲取他們所謂的開放圖譜元標(biāo)簽。根據(jù)Facebook的說(shuō)法，Open Graph協(xié)議使任何網(wǎng)頁(yè)都能夠成為社交圖中的豐富對(duì)象?；旧希@些是標(biāo)簽（代碼），用于告訴Facebook有關(guān)您分享內(nèi)容的信息。
不確定您是否在您的網(wǎng)站上使用Open Graph元標(biāo)簽？如果您使用的是流行的插件，例如Yoast SEO或Social Warfare，它們實(shí)際上會(huì)在幕后自動(dòng)為您添加這些標(biāo)簽（注：一般WordPress網(wǎng)站面向海外用戶就會(huì)用到）。
讓我們以其中一個(gè)頁(yè)面為例。如果我們查看該文章的源代碼，我們可以看到以下有關(guān)Open Graph的數(shù)據(jù)。注意：Open Graph使用不同的屬性，例如og:title我們?cè)诒窘坛讨姓嬲P(guān)心的屬性， 即og:image. 這是我們網(wǎng)站上的代碼，F(xiàn)acebook會(huì)查看該代碼以確定要顯示的特色圖片、標(biāo)題和描述。
使用Facebook調(diào)試器
與任何平臺(tái)或工具一樣，它也會(huì)有您必須解決的問(wèn)題或怪癖，特別是如果您不遵循為最佳實(shí)踐制定的準(zhǔn)則。Facebook Debugger（Facebook調(diào)試器）工具旨在幫助您解決Open Graph元標(biāo)簽的問(wèn)題，以及解決緩存問(wèn)題。
您可以在Facebook開發(fā)人員網(wǎng)站的工具和支持下找到Facebook調(diào)試器。如果您是在Facebook上分享大量?jī)?nèi)容的人，這是一個(gè)很好的書簽鏈接以供將來(lái)參考。
Facebook調(diào)試器工具
要抓取文章，只需輸入U(xiǎn)RL并單擊“調(diào)試”。我們實(shí)際上將在我們的示例中使用一個(gè)實(shí)時(shí)案例。我們最近剛剛更新了我們網(wǎng)站速度優(yōu)化文章中的圖片。當(dāng)我們將其輸入Facebook Debugger時(shí)，它會(huì)首先拉出他們的緩存信息（如下所示）。
這是人們?cè)诜窒砦覀兊奈恼聲r(shí)實(shí)際看到的。但是，在這種情況下，它從我們更新文章之前提取舊圖像。我們還可以看到og:image是舊文件名。
Facebook調(diào)試器中顯示的舊圖像和URL
所以，我們能做些什么？有兩件事需要做。請(qǐng)按照以下步驟操作。
第 1 步 – 清除該URL的WordPress緩存
為了確保Facebook獲取最新信息，我們需要做的第一件事就是清除我們 WordPress 網(wǎng)站本身的緩存。沒(méi)錯(cuò)，從技術(shù)上講，這里可能涉及兩層緩存。如果舊圖像仍然緩存在您的網(wǎng)站上，F(xiàn)acebook 調(diào)試器將無(wú)法幫助解決您的問(wèn)題，因?yàn)樗粫?huì)重新獲取緩存的信息。
使用不同的緩存解決方案或第三方插件，您需要查看他們的文檔以確保您知道如何清除URL的緩存。以下是一些流行的緩存解決方案的鏈接：
- 使用WP Rocket清除特定頁(yè)面/文章上的緩存
- 使用Cache Enabler清除特定頁(yè)面/文章上的緩存
- 使用WP Fastest Cache清除特定頁(yè)面/文章上的緩存
如果所有其他方法都失敗了，您可以隨時(shí)清除整個(gè)WordPress網(wǎng)站上的緩存（如下所示）。但是，出于性能原因，通常不建議這樣做，因?yàn)槟恼军c(diǎn)必須重建緩存，同時(shí)降低加載時(shí)??間。
如果您仍然遇到問(wèn)題，您的圖像也可以緩存在您的CDN上。在這種情況下，您可能需要清除CDN緩存。
第 2 步 – 在Facebook調(diào)試器中再次抓取
現(xiàn)在已清除相關(guān)帖子或頁(yè)面的緩存，我們需要在Facebook調(diào)試器工具中再次抓取它。所以我們輸入U(xiǎn)RL并點(diǎn)擊“重新獲取”按鈕。
在Facebook Debugger工具中再次抓取
您可能會(huì)遇到警告。根據(jù)我們的經(jīng)驗(yàn)，這些并不總是最準(zhǔn)確的。例如，我們看到一條警告，指出我們的圖像超過(guò)了8 MB的最大大小或服務(wù)器響應(yīng)速度太慢。首先，我們的圖像遠(yuǎn)不及那個(gè)大小，實(shí)際上只有160.63 KB。其次，我們的服務(wù)器閃電般快速，整個(gè)頁(yè)面本身在 1 秒內(nèi)加載。
所以這就是我們第二次點(diǎn)擊“重新抓取”按鈕的地方。是的，這聽(tīng)起來(lái)可能很奇怪。但很多時(shí)候你可能需要點(diǎn)擊兩次。只需要幾秒鐘。現(xiàn)在你可以看到它現(xiàn)在正在提取我們的新特色圖像，如果我們查看 og:image 屬性，它確實(shí)是新文件名。
請(qǐng)務(wù)必注意，這不會(huì)更新已分享的Facebook帖子的圖像。這只會(huì)影響您或其他人事后分享的帖子。
其他Facebook調(diào)試器提示
您可以使用Facebook Debugger工具不僅更新舊圖像，還可以更新您在Facebook帖子中看到的內(nèi)容（文本）。標(biāo)題和描述都是開放圖譜元標(biāo)簽。因此，如果您需要改寫某些內(nèi)容，請(qǐng)?jiān)赪ordPress中進(jìn)行更新，然后按照上述完全相同的步驟進(jìn)行操作。
提供的“og:image”屬性尚不可用
此外，僅僅因?yàn)槲覀兒雎粤松厦娴木娌⒉灰馕吨鼈儾⒉豢偸怯杏?。事?shí)上，當(dāng)涉及到您應(yīng)該使用的圖像時(shí)，有推薦的尺寸。否則，可能會(huì)發(fā)生不好的事情。例如根本沒(méi)有顯示的圖像（如下面的警告所示）。
提供的 ‘og:image’ 屬性尚不可用，因?yàn)樾聢D像是異步處理的。為確保新URL的分享包含圖像，請(qǐng)使用“og:image:width”和“og:image:height”標(biāo)簽指定尺寸。
Facebook調(diào)試器 – 圖片太小
發(fā)生上述情況是因?yàn)槲覀兊膱D像太小了。Facebook要求的最小圖像尺寸為200 x 200像素。對(duì)于Facebook圖片，通常越大越好。1,200 x 630 像素似乎最適合大多數(shù)人。放大也可以，實(shí)際上我們?cè)诘谝粋€(gè)示例中的帖子中的圖像是1460 x 730。請(qǐng)記住，F(xiàn)acebook 會(huì)裁剪更大的任何內(nèi)容，因此保持縱橫比是最重要的部分之一。
如果您使用的是Yoast SEO之類的插件，也可以建議手動(dòng)設(shè)置圖像。也許您的WordPress主題上的特色圖片具有不同的縱橫比或大小?；蛘吣闵踔敛皇褂锰厣珗D片！
在這種情況下，Yoast SEO插件允許您為Facebook手動(dòng)上傳不同大小的圖像，這些圖像將填充那些Open Graph Meta標(biāo)簽。如果需要，您還可以手動(dòng)設(shè)置標(biāo)題和描述。
Yoast SEO Facebook社交框
缺少以下必需的屬性：fb:app_id
您可能還會(huì)看到以下有關(guān)缺少Facebook應(yīng)用ID的警告。請(qǐng)務(wù)必注意，這不會(huì)以任何方式干擾在Facebook上分享帖子的能力。很多時(shí)候這可以簡(jiǎn)單地忽略。但是，它確實(shí)限制了您使用Facebook Insights數(shù)據(jù)的能力。
缺少以下必需的屬性：fb:app_id
缺少以下必需的屬性：fb:app_id
如果您需要額外的洞察數(shù)據(jù)，則需要將您的Facebook應(yīng)用ID添加到您的網(wǎng)站。以下是有關(guān)如何使用Yoast SEO插件將其添加到WordPress的說(shuō)明。
添加Facebook應(yīng)用ID
在Facebook調(diào)試器工具中重新測(cè)試之前，請(qǐng)務(wù)必清除您網(wǎng)站的緩存。
小結(jié)
希望您對(duì)Facebook Debugger工具以及如何使用它對(duì)WordPress網(wǎng)站上的圖像進(jìn)行故障排除和修復(fù)有更多的了解。記得清除所有緩存層，然后刮掉。您的新圖片應(yīng)該會(huì)正確顯示，以便所有人在Facebook上分享。
標(biāo)題名稱：如何使用Facebook調(diào)試器修復(fù)WordPress圖片
網(wǎng)址分享：http://m.5511xx.com/article/dpcipsh.html
