Html 社交分享的默认网站图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19632323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Default website image for social sharing
提问by paz
Is there any way to set a default image that appears when I share my website on Facebook? I've noticed that Facebook usually fetches the first image from the site to use as a thumbnail.
有什么方法可以设置在我在 Facebook 上分享我的网站时显示的默认图像？我注意到 Facebook 通常从网站上获取第一张图片用作缩略图。
回答by Patsy Issa
You need to set the facebook image meta tag:
您需要设置 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">
For more info check the docs
有关更多信息，请查看文档
回答by Raina Vinod
<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">
Image size should be be at least 200px X 200px
图像大小应至少为 200 像素 X 200 像素
回答by full_prog_full
Facebook's servers will 'scrape' your website looking for an image to use when people share it. If you want to specify which image to use, put this in the the <head></head>section of your website:
Facebook 的服务器将“抓取”您的网站，寻找人们分享时使用的图像。如果要指定要使用的图像，请将其放在<head></head>您网站的部分中：
<meta property="og:image" content="http://url-to-your-image.png">
<meta property="og:image" content="http://url-to-your-image.png">
Facebook may have cached a copy of the previous random image. To get facebook to fetch again:
Facebook 可能已经缓存了之前随机图像的副本。要让 facebook 再次获取：
回答by Sébastien REMY
This my solution, it's work well:
这是我的解决方案，效果很好：
<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>
You can make test with Facebook Debug site.
您可以使用Facebook Debug 站点进行测试。
回答by Mark Amery
Set an og:imagein the <head>of your HTML document like this:
像这样og:image在<head>你的 HTML 文档中设置一个：
<meta property="og:image" content="http://example.com/ogp.jpg" />
This is part of the Open Graph Protocol, respected by at least the following social media sites:
这是开放图谱协议的一部分，至少受到以下社交媒体网站的尊重：
- Facebook (see https://developers.facebook.com/docs/sharing/webmasters/#images)
- Twitter (see https://dev.twitter.com/cards/getting-started#opengraph)
- LinkedIn (see https://developer.linkedin.com/docs/share-on-linkedin)
- Google+ (see https://developers.google.com/+/web/snippet/)
- Pinterest (see https://developers.pinterest.com/docs/rich-pins/reference/)
- 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/）
(... and probably plenty more besides.)
（……而且可能还有更多。）
In addition to setting the tag above, you mayalso want to:
除了设置上面的标签，你可能还想：
- Clear the social media platform's cached version of your page's image (e.g. by using the platform's developer tools), so that you can see the change reflected immediately. For example, you can do this for Facebook, at https://developers.facebook.com/tools/debug/
- Add additional "structured properties" to specify things like the image's width or height, using the syntax described at http://ogp.me/#structured. This is described as a "best practice" by Facebook at https://developers.facebook.com/docs/sharing/best-practices#images.
- 清除社交媒体平台缓存的页面图像版本（例如，通过使用平台的开发人员工具），以便您可以立即看到反映的更改。例如，您可以在https://developers.facebook.com/tools/debug/为 Facebook 执行此操作
- 使用http://ogp.me/#structured 中描述的语法添加额外的“结构化属性”以指定图像的宽度或高度等内容。这被 Facebook 在https://developers.facebook.com/docs/sharing/best-practices#images描述为“最佳实践” 。
