我能否设置一个默认的图片来在分享我的网站至Facebook时使用？我注意到Facebook通常会从网站中获取第一张图片作为缩略图。
6个回答
16
像这样在 HTML 文档的 <head> 中设置一个 og:image：
<meta property="og:image" content="http://example.com/ogp.jpg" />
这是 Open Graph Protocol 的一部分，至少被以下社交媒体网站所认可:
- 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/)
(... 可能还有很多其他的社交媒体网站。)
除了设置上述标签外，您可能还想：
- 清除社交媒体平台缓存的您页面的图像版本（例如，通过使用平台的开发人员工具），以便您可以立即看到更改的反映。例如，您可以在 Facebook 上执行此操作，位于 https://developers.facebook.com/tools/debug/
- 添加其他"结构化属性"以指定像图像宽度或高度之类的内容，使用在http://ogp.me/#structured中描述的语法。这被 Facebook 描述为一种“最佳实践”，位于 https://developers.facebook.com/docs/sharing/best-practices#images。
- Mark Amery
14
<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
- Raina Vinod
2
好的。所有共享链接的站点的默认值是什么？这只是Facebook API吗？ - JoshYates1980
1@JoshYates1980 请查看 https://dev59.com/42kv5IYBdhLWcg3wtTG7 以获取更多使用Open Graph的网站。 - Felix Geenen
11
这是我的解决方案，它很有效：
<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调试网站进行测试。
- Sébastien REMY
8
Facebook的服务器会'扫描'您的网站，以寻找用于共享的图像。如果您想指定要使用的图像，请将其放在您网站的
<head></head>部分中：
<meta property="og:image" content="http://url-to-your-image.png">
Facebook可能缓存了先前随机图像的副本。要让Facebook重新获取，请点击以下链接：
- full_prog_full
0
<meta property="og:image" content="http://example.com/logo.jpg">
<meta name="twitter:image" content="http://example.com/logo.jpg" />
以上是更新所有社交链接预览所需的全部内容。要查看平台上预览的样子，您可以使用以下工具测试链接：
- Twitter https://cards-dev.twitter.com/validator
- Facebook/Instagram：https://developers.facebook.com/tools/debug
- LinkedIn：https://www.linkedin.com/post-inspector/
- Harry Ronchetti
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
og:image标签即可。也许你现在看到的图片是缓存的，这个缓存会持续7天。 - Patsy Issa