如何设置网站图片，使其在Facebook上显示为预览？

156

当您在Facebook上共享链接时，它将自动在网站上查找图像并随机选择一个作为预览。您如何影响预览图像？当某人在其Facebook上共享网站链接时？

image facebook preview

— 标记
source

234

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上共享-缩略图未首次显示

— 棚架
source

@马丁我不知道。也许他们可以，但是我在Open Graph Protocol Docs中看不到它。尝试使用调试器查看是否为您的站点显示了缓存的值。SO 上似乎还有另一个问题，名为Facebook Open Graph，不清除与此问题相关的缓存。

— 2011年

@KDog的评论：有问题吗？在Facebook调试工具中检查代码。Facebook缓存图像，标题和正文。我在将xml添加到我的网站时更改了标题，并且由于我不小心造成了几个验证错误，因此Facebook的共享预览中没有任何变化。Facebook使用有效的缓存，而不是显示无效的新数据。我能够使用developers.facebook.com/tools/debug解决这些错误。完成后，我的新标题和图像立即显示出来。

— 杰里米·汤普森

@ScotterMonkey：是的，这是预期的行为。您可以告诉FB使用什么内容。顺便说一句，您可以<meta property="og:image" content="your_image_here" />在head元素之间添加多个元素，以便在FB上发布时可以进行选择。

— Shef

用html声明中的fb错过了那件事。拯救了我的一天！（即使这是三岁的职位）。非常感谢！

— bestprogrammerthetheworld，2015年

内容链接是实际的网址-不是我发现的相对链接。即http://mywebsite.com.au/Images/prettypic.png，不是/Images/prettypic.png

— JumpingJezza

另请注意，如果您使用wordpress，则在编辑模式下只需向下滚动至网页底部，然后选择“功能图片”（屏幕右下方）。

— davea0511
source

如果您使用的是Weebly，请先查看发布的网站，然后右键单击该图像以复制图像地址。然后在Weebly中，转到“编辑站点，页面”，单击要使用的页面，“ SEO设置”，在“标题代码”下，输入来自Shef答案的代码：

<meta property="og:image" content="/uploads/..." />

只需将/ uploads / ...替换为复制的图片地址即可。单击发布以应用更改。

您可以跳过Shef回答中有关名称空间的部分，因为默认情况下已在Weebly中进行了设置。

— 克鲁博
source