Facebook link thumbnail

帅比萌擦擦* 提交于 2019-11-30 19:24:50
Calvin

Yes, you can set a meta tag so that Facebook knows which image to pick.

See: https://developers.facebook.com/docs/opengraph/

Specifically, it is the og:image property, and it will tell Facebook's link share script to choose that image as its thumbnail.

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.

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)

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.

<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.

You need to prepare your Website for using og: Tags by adding the og-Namespace in your html-Tag:

<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:

<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:

  • og:title
  • og:type
  • og:image
  • og:url
  • og:site_name
  • og:admins OR og:app_id

You can find additional information an more og: types at: https://developers.facebook.com/docs/opengraph/

what if you did like a img but in 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

As already said: Best would be to use the metatag with the og:image opengraph property.

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...

Like others have answered but it only works for me when i use (https)

<meta property="og:image" content="https://link.to/image.png" />

Instead of

<meta property="og:image" content="http://link.to/image.png" />
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!