如何设置将在Facebook上显示为预览的网站图像?

Mar*_*ark 150 facebook image preview

当您在Facebook上分享链接时,它将自动在网站上查找图像并随机选择一个作为预览.你怎么能影响预览图像?当一个人在他的脸书上分享网站链接?

She*_*hef 229

1.在您的HTML声明中包含Open Graph XML命名空间扩展

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">
Run Code Online (Sandbox Code Playgroud)

2.在您<head></head>使用以下元标记内部来定义您要使用的图像

<meta property="og:image" content="fully_qualified_image_url_here" />
Run Code Online (Sandbox Code Playgroud)

在此处阅读有关开放图协议的更多信

完成上述操作后,如果图像没有正确显示,请使用Facebook"对象调试器".另请注意,第一次分享它仍然不会显示,除非还指定了高度和宽度,请参阅Facebook上的分享 - 缩略图未首次显示

  • 内容链接是一个实际的网址 - 而不是我发现的相对链接.即`http:// mywebsite.com.au/Images/prettypic.png`,而不是`/ Images/prettypic.png` (17认同)
  • @KDog的评论:**有问题吗?**在facebook调试工具中查看您的代码.Facebook缓存图像,标题和正文.我在将xml添加到我的网站时更改了标题,因为我不小心创建了一些验证错误,Facebook的共享预览没有任何变化.Facebook使用有效的缓存而不是显示无效的新数据.我可以使用http://developers.facebook.com/tools/debug解决这些错误.完成后,我的新标题和图像立即显示出来. (7认同)
  • @ScotterMonkey:是的,这是预期的行为.您可以告诉FB要使用的内容.顺便说一句,你可以在`head`元素之间添加多个`<meta property ="og:image"content ="your_image_here"/>`,这样你就可以选择在FB上发帖了. (3认同)
  • @Martin我不知道.也许他们这样做,但我没有在[Open Graph Protocol Docs](https://developers.facebook.com/docs/opengraph/)中看到它.尝试[Debugger](https://developers.facebook.com/tools/debug)查看是否为您的站点显示了缓存值.似乎还有另一个与此问题相关的标题为[Facebook Open Graph not clearing cache](http://stackoverflow.com/questions/5776567/facebook-open-graph-not-clearing-cache)的问题. (2认同)
  • 在html声明中用fb错过了那个东西.救了我的一天!(即使这是一个三岁的帖子).非常感谢! (2认同)