使用Facebook分享按钮时缩略图图像错误

Question

当我单击其中一个wordpress帖子的分享按钮时,会成功打开一个弹出窗口.它显示正确的缩略图图像,标题和摘要文本也是正确的.

但是,当我真正去看看Facebook上的分享时,缩略图是不正确的.出于某种原因,Facebook总是会显示我为每个共享份额创建的第一个共享的缩略图.

奇怪的是标题和摘要总是正确的,但我无法使缩略图正常工作.

这是我用于Facebook共享按钮的代码:

<a class="facebook" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=This Is The Title Of My Post&amp;p[summary]=This is the summary of my post.&amp;p[url]=http://www.mywebsite.com/individual-wordpress-post/&amp;p[images[0]=http://www.mywebsite.com/images/this-is-my-thumbnail-image.jpg" target="_blank"><img class="size-full wp-image-96 alignleft" alt="shareonfacebook" src="http://www.mywebsite.com/images/this-is-my-facebook-share-button-image.jpg" /></a>

在这里阅读以下答案后,我将这些代码放在一起.

任何想法为什么标题和摘要总是正确的,但缩略图永远不对？请记住,当我单击分享按钮时,缩略图在弹出窗口中是正确的,但是当我去看Facebook上的分享时,缩略图是不一样的.

感谢您的帮助,我真的很感激.

Answer 1

Facebook使用Open Graph协议来确定共享网页时显示的信息.问题很可能不在于您的链接,而是缺少Open Graph标记.

要调试问题,请将您正在测试的URL复制/粘贴到Facebook Open Graph Debugger中,然后按"调试"按钮.调试器将显示Faceebook在共享特定URL时将使用的信息.

例如,Stackoverflow主页的Open Graph标签是:

<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="Stack Overflow" />
<meta name="og:description" content="Q&amp;A for professional and enthusiast programmers" />
<meta name="og:url" content="http://stackoverflow.com/"/>

Open Graph调试器的输出如下所示.

要解决您的问题,您可以:

• 更改Wordpress主题以在每个帖子/页面上输出Open Graph标签.
• 安装插件以输出Open Graph标记.Facebook有一个官方插件,或者你可以使用Wordpress for SEO,它将输出Open Graph标签以及Twitter的元数据标签.