如何设置将在 Facebook 上显示为预览的网站图像？
Posted
技术标签:
【中文标题】如何设置将在 Facebook 上显示为预览的网站图像？【英文标题】：How can I set a website image that will show as preview on Facebook? 【发布时间】：2011-07-14 12:57:23 【问题描述】：当您在 facebook 上分享链接时，它会自动在网站上查找图片并随机选择一张作为预览。您如何影响预览图像？当一个人在他的 Facebook 上分享网站链接时？
【问题讨论】：
【参考方案1】：1。在您的 html 声明中包含 Open Graph XML 命名空间扩展
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
2。在您的 <head></head> 中使用以下元标记来定义您要使用的图像
<meta property="og:image" content="fully_qualified_image_url_here" />
在此处阅读有关open graph protocol 的更多信息。
完成上述操作后，如果图像未正确显示，请使用 Facebook "Object Debugger"。另请注意，除非还指定了高度和宽度，否则第一次共享它仍然不会显示，请参阅Share on Facebook - Thumbnail not showing for the first time
【讨论】：
@Martin 我不知道。也许他们会这样做，但我没有在Open Graph Protocol Docs 中看到它。尝试Debugger 以查看是否为您的站点显示缓存值。在 SO 上似乎还有一个名为 Facebook Open Graph not clearing cache 的问题与此问题相关。 @KDog 的评论：有问题吗？ 在 facebook 调试工具中检查您的代码。 Facebook 缓存图像、标题和正文。我在将 xml 添加到我的网站时更改了标题，因为我不小心创建了一些验证错误，所以 Facebook 的共享预览没有任何变化。 Facebook 使用了有效的缓存，而不是显示无效的新数据。我能够使用developers.facebook.com/tools/debug 解决这些错误。这样做后，我的新标题和图像会立即显示。 @ScotterMonkey：是的，这是预期的行为。您可以告诉 FB 使用什么内容。顺便说一句，您可以在head 元素之间添加多个<meta property="og:image" content="your_image_here" />，这样您就可以在FB 上发帖时进行选择。
在 html 声明中错过了 fb 的那个东西。拯救了我的一天！ （即使这是一个三年前的帖子）。非常感谢！
内容链接是一个实际的网址——不是我发现的相对链接。即http://mywebsite.com.au/Images/prettypic.png，而不是/Images/prettypic.png【参考方案2】：
另请注意，如果您有 wordpress，只需在编辑模式下向下滚动到网页底部，然后选择“特色图片”（屏幕右下方）。
【讨论】：
【参考方案3】：如果您使用的是 Weebly，请先查看已发布的网站，然后右键单击图片以复制图片地址。然后在 Weebly 中，转到 Edit Site，Pages，单击您要使用的页面，SEO Settings，在 Header Code 下输入 Shef 答案中的代码：
<meta property="og:image" content="/uploads/..." />
只需将 /uploads/... 替换为复制的图像地址。单击发布以应用更改。
您可以跳过 Shef 关于命名空间的部分答案，因为 Weebly 已默认设置。
【讨论】：
【参考方案4】：年复一年，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。
这对我来说真的很好用，希望对我有所帮助。
【讨论】：
以上是关于如何设置将在 Facebook 上显示为预览的网站图像？的主要内容，如果未能解决你的问题，请参考以下文章