社交分享的默认网站图片
Posted
技术标签:
【中文标题】社交分享的默认网站图片【英文标题】：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 请参阅***.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/【讨论】：
以上是关于社交分享的默认网站图片的主要内容，如果未能解决你的问题，请参考以下文章
WordPress 自定义帖子特色图片、标题和内容社交媒体共享