Facebook link thumbnail

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" />

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 achieve 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/


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)

Tags:

Html

Css

Image

Semantic Markup

Social Media

Recent Posts