Html Facebook 链接缩略图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6943495/
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
Facebook link thumbnail
提问by Martin
When posting a link to a website in Facebook (Google+ and the rest count too) you're given a thumbnail, or selection of thumbnails to choose from. These are tags from the HTML.
在 Facebook（Google+ 和其他也算）中发布网站链接时，您会获得一个缩略图，或可供选择的缩略图选择。这些是来自 HTML 的标签。
I've always been of the opinion that it was good practice to make my logo a background image inside a h1 tag using CSS. I make the h1 tag a link back to the home page and hide the header text with something like {text-indent: -9999px}, leaving a lovely semantic HTML header. Here's a link to my site if you want a look: http://tempertemper.net
我一直认为使用 CSS 将我的徽标作为 h1 标签内的背景图像是一种很好的做法。我将 h1 标记设为返回主页的链接，并使用 {text-indent: -9999px} 之类的内容隐藏标题文本，留下一个可爱的语义 HTML 标题。如果你想看看，这里有一个到我网站的链接：http: //tempertemper.net
The problem with this is that as it's a background image it's overlooked.
问题在于，由于它是背景图像，因此被忽略了。
Would it be a good idea to post a custom at the top of the HTML for this purpose only, and hide it off the side of the page? I don't know, seems a bit messy. I could just put the tag inside the h1, but the logo wouldn't be the right shape as it's designed for a specific purpose.
仅出于此目的在 HTML 顶部发布自定义并将其隐藏在页面的一侧是个好主意吗？不知道，好像有点乱。我可以将标签放在 h1 内，但徽标的形状不正确，因为它是为特定目的而设计的。
Maybe there's a meta tag for this purpose or maybe there's a technique to force FB to pull a specific image that isn't loaded normally? Does anyone have any ideas or top tips for this?
也许有一个用于此目的的元标记，或者也许有一种技术可以强制 FB 拉出未正常加载的特定图像？有没有人对此有任何想法或重要提示？
回答by Calvin
Yes, you can set a meta tag so that Facebook knows which image to pick.
是的，您可以设置元标记，以便 Facebook 知道要选择哪个图像。
See: https://developers.facebook.com/docs/opengraph/
请参阅：https: //developers.facebook.com/docs/opengraph/
Specifically, it is the og:imageproperty, and it will tell Facebook's link share script to choose that image as its thumbnail.
具体来说，它是og:image属性，它会告诉 Facebook 的链接共享脚本选择该图像作为其缩略图。
Keep in mind though that Facebook does some caching, so if you've already shared the link once it may still be "stuck" on using the older image.
请记住，尽管 Facebook 会进行一些缓存，因此如果您已经共享了该链接一次，它可能仍会“卡住”使用旧图像。
You can see whats Facebook getting out of your website by using the Facebook URL Linter. See: http://developers.facebook.com/tools/lint/(The use of the URL Linter will also rebuild Facebook's cache)
您可以使用 Facebook URL Linter 查看 Facebook 从您的网站中获取的信息。参见：http: //developers.facebook.com/tools/lint/（使用 URL Linter 也会重建 Facebook 的缓存）
回答by scube
There is a Meta-Tag to let the Application (like FB) know that you want a specific image taken rather than let the user choose one.
有一个 Meta-Tag 可以让应用程序（如 FB）知道您想要拍摄特定图像，而不是让用户选择一个。
<link rel="image_src" href="http://link.to/image.png" />
For Facebook there is also an other Way to achiev this by using Open Graph protocol.
对于 Facebook，还有另一种方法可以通过使用Open Graph 协议来实现这一点。
You need to prepare your Website for using og: Tags by adding the og-Namespace in your html-Tag:
您需要通过在 html-Tag 中添加 og-Namespace 来准备您的网站以使用 og: Tags：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#">
Then you are able to use the og: Meta-Tags like this:
然后你就可以像这样使用 og: Meta-Tags：
<meta property="og:title" content="Any title here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://link.to/image.png" />
For Facebook this six og Meta-Tags are required:
对于 Facebook，这六个 og 元标签是必需的：
- og:title
- og:type
- og:image
- og:url
- og:site_name
- og:admins OR og:app_id
- OG：标题
- OG：类型
- OG:图像
- 网址：网址
- og:site_name
- og:admins 或 og:app_id
You can find additional information an more og: types at: https://developers.facebook.com/docs/opengraph/
您可以在更多 og: 类型中找到更多信息：https: //developers.facebook.com/docs/opengraph/
回答by Hi?p Nguy?n
Like others have answered but it only works for me when i use (https)
就像其他人已经回答一样，但它仅在我使用 (https) 时对我有效
<meta property="og:image" content="https://link.to/image.png" />
Instead of
代替
<meta property="og:image" content="http://link.to/image.png" />
回答by Robin
As already said: Best would be to use the metatag with the og:imageopengraph property.
如前所述：最好将元标记与og:imageopengraph 属性一起使用。
In addition to that: Facebook is not the only platform using the opengraph metatags. Also Google+, or Xing are preferring it. Not sure about others...
除此之外：Facebook 并不是唯一使用 opengraph 元标签的平台。Google+ 或 Xing 也更喜欢它。不确定其他人...
回答by Icallitvera
what if you did like a img but in css put
如果你喜欢 img 但在 css put 中怎么办
#logo{
display: none; }
<img id="logo" src="yourlogohere.jpg">
the image would not show up on the page but i don't know if facebook would see the image
图片不会显示在页面上，但我不知道 Facebook 是否会看到图片
