logo标签列表

如何设置网站图片以在Facebook上显示预览？

imagefacebookpreview
185

当您在Facebook上分享链接时，它会自动查找网站上的图像并随机选择一个作为预览。如何影响预览图像？当一个人在他的Facebook上分享网站链接时，您该怎么做?

4个回答
265

1. 在HTML声明中添加Open Graph XML命名空间扩展。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. 在你的 <head></head> 标签内使用以下 meta 标签来定义你想要使用的图片

<meta property="og:image" content="fully_qualified_image_url_here" />

了解更多关于开放图谱协议的内容，请点击此处。

完成上述步骤后，若图片未正确显示，请使用Facebook“对象调试器”。同时请注意，在第一次分享时，除非也指定了高度和宽度，否则图片仍不会出现，请参见在Facebook上分享-缩略图首次不显示

2
@Martin 我不清楚。也许他们会这么做，但我没有在Open Graph Protocol Docs中看到相关提及。试试Debugger来查看是否显示了你网站的缓存值。似乎还有一个与此问题相关的SO问题，标题为Facebook Open Graph not clearing cache。 - Shef
7
@KDog的评论：遇到问题了吗？ 在Facebook调试工具中检查您的代码。Facebook会缓存图像、标题和正文文本。我在向网站添加XML时更改了标题，由于意外创建了一些验证错误，Facebook的共享预览中没有任何更改。 Facebook使用了一个有效的缓存，而不是显示无效的新数据。我能够使用http://developers.facebook.com/tools/debug解决这些错误。这样做后，我的新标题和图像立即显示出来了。 - Jeremy Thompson
3
@ScotterMonkey: 是的，那是预期的行为。你可以告诉Facebook要使用哪些内容。顺便说一句，你可以在<head>标签之间添加多个<meta property="og:image" content="your_image_here" />，这样在发布到Facebook时就可以进行选择了。 - Shef
2
错过了在HTML声明中与fb有关的东西。这真是救了我一天！（尽管这是一个三年前的帖子）。非常感谢！ - bestprogrammerintheworld
19
Content link 是实际的网址链接，而不是相对链接。例如，http://mywebsite.com.au/Images/prettypic.png 而不是 /Images/prettypic.png。请注意不要改变原意。 - JumpingJezza
显示剩余11条评论
4
请注意，如果您使用的是WordPress，则在编辑模式下向下滚动到网页底部，然后选择“特色图像”（屏幕右下角）。
3

多年过去了，Facebook缓存问题仍未解决……为什么Facebook不在调试工具中添加一个清除缓存的按钮？这有多困难呢？

好的……现在是最终解决方案：

在“og:image”上使用此代码：?[sequentialNumber] 例如：?1 / ?2 / ?3 ......

使用示例：

<meta property="og:image" content="http://example.com/image.jpg?1" />

你改变了这张图片吗？将数字加1 ...

<meta property="og:image" content="http://example.com/image.jpg?2" />

每次更改图像时，将数字加1。

可以手动或动态地完成此操作，例如使用PHP。

对我来说，它的工作效果非常好，希望我能帮到您。

2
如果您使用的是Weebly，可以先查看已发布的网站，然后右键单击图像以复制图像地址。接着，在Weebly中进入“编辑网站”，“页面”，点击要使用的页面，“SEO设置”，在标题代码下输入Shef答案中的代码。
<meta property="og:image" content="/uploads/..." />

只需将/uploads/...替换为已复制的图像地址。单击“发布”以应用更改。

您可以跳过Shef关于命名空间的回答部分，因为在Weebly中默认已设置。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接