社交分享的默认网站图片答案

【问题标题】：Default website image for social sharing社交分享的默认网站图片
【发布时间】：2013-11-07 01:54:15
【问题描述】：

当我在 Facebook 上分享我的网站时，是否可以设置默认图片？我注意到 Facebook 通常会从网站获取第一张图片用作缩略图。

【问题讨论】：

【解决方案1】：

你需要设置open graph图片元标记：

<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

【讨论】：

我用这种方式，它仍然从我的网站上随机挑选一张图片？
我同意 - 仍在等待这个问题的答案。只是在我的网站上随机挑选一些图片...
@MindaugasJačionis 根据linked-in 所需要的只是og:image 标签，也许您现在看到的图像已被缓存，缓存将持续长达7天。
@Rossco 你需要clear facebook's cache 你的网站。
-1;它不是“facebook 图像元标记”，它是basically all social media sites 支持的协议。这篇文章给我的印象是这种方法是 Facebook 特有的，但进一步的研究表明，情况并非如此。

【解决方案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

【讨论】：

不错。所有共享链接的网站的默认设置是什么？这只是 Facebook api 吗？
@JoshYates1980 请参阅stackoverflow.com/questions/10397510/… 了解更多使用开放图的网站

【解决方案3】：

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

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

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

脸书（见https://developers.facebook.com/docs/sharing/webmasters/#images）
推特（见https://dev.twitter.com/cards/getting-started#opengraph）
领英（见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/ 为 Facebook 执行此操作
使用http://ogp.me/#structured 中描述的语法添加额外的“结构化属性”来指定图像的宽度或高度等内容。这被 Facebook https://developers.facebook.com/docs/sharing/best-practices#images 描述为“最佳实践”。

【讨论】：

【解决方案4】：

这是我的解决方案，效果很好：

<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】：

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

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

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

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

【讨论】：

【解决方案6】：

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

以上是所有社交链接预览所需更新的全部内容。要检查平台上的预览效果，您可以使用以下工具测试您的链接：

推特https://cards-dev.twitter.com/validator
脸书/Instagram：https://developers.facebook.com/tools/debug
领英：https://www.linkedin.com/post-inspector/

【讨论】：