Question

有没有办法设置我在Facebook上分享我的网站时出现的默认图像？我注意到Facebook通常会从网站上获取第一张图片以用作缩略图。

Answer 1

您需要设置facebook图片元标记：

<meta property="og:image" content="http://example.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">

有关详细信息，请查看 docs

Answer 2

<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">

图像尺寸应至少为200px X 200px

Answer 3

Facebook的服务器将“刮”你的网站，寻找人们分享时使用的图像。如果您想指定要使用的图片，请将其放在网站的<head></head>部分：

<meta property="og:image" content="http://url-to-your-image.png">

Facebook可能已经缓存了之前随机图片的副本。让Facebook再次获取：

https://developers.facebook.com/tools/debug/

Answer 4

在HTML文档的<head>中设置og:image，如下所示：

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

这是开放图谱协议的一部分，至少受到以下社交媒体网站的尊重：

Facebook（见https://developers.facebook.com/docs/sharing/webmasters/#images）
Twitter（见https://dev.twitter.com/cards/getting-started#opengraph）
LinkedIn（见https://developer.linkedin.com/docs/share-on-linkedin）
Google+（请参阅https://developers.google.com/+/web/snippet/）
Pinterest（见https://developers.pinterest.com/docs/rich-pins/reference/）

（......可能还有更多。）

除了设置上述标签外，可能还想：

清除社交媒体平台的网页图片缓存版本（例如，使用平台的开发者工具），以便您可以立即看到所反映的更改。例如，您可以在https://developers.facebook.com/tools/debug/
添加其他＆＃34;结构化属性＆＃34;使用http://ogp.me/#structured中描述的语法指定图像的宽度或高度等内容。这被描述为＆＃34;最佳实践＆＃34;通过Facebook https://developers.facebook.com/docs/sharing/best-practices#images。

Answer 5

这是我的解决方案，它运作良好：

<head>
    <!--FACEBOOK-->
    <meta property="og:image" content="https://www.website.com/logo.jpg">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1024">
    <meta property="og:image:height" content="1024">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.website.com/"/>
    <meta property="og:title" content="Website title" />
    <meta property="og:description" content="Website description." />
<head>

您可以使用Facebook Debug site进行测试。

社交分享的默认网站图片

5 个答案: