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

时间:2011-07-14 12:57:24

标签: image facebook preview

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

4 个答案:

答案 0 :(得分:223)

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

答案 1 :(得分:4)

另请注意,如果您使用wordpress,只需在编辑模式下向下滚动到网页底部,然后选择&#34;精选图片&#34; (屏幕右下方)。

答案 2 :(得分:1)

如果您正在使用 Weebly ,请先查看已发布的网站,然后右键单击图像以复制图像地址。然后在Weebly,转到编辑站点,页面,单击您要使用的页面,SEO设置,在Header Code下输入Shef的回答代码:

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

用复制的图像地址替换/上传/ ...单击“发布”以应用更改。

你可以跳过Shef关于命名空间的答案部分,因为在Weebly中默认设置了这个部分。

答案 3 :(得分:0)

年复一年过去了,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。

它对我来说效果很好,希望对我有所帮助。