14

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.

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

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.

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?

gsamaras
  • 71,951
  • 46
  • 188
  • 305
Martin
  • 351
  • 2
  • 8
  • 17
  • possible duplicate of [Facebook Post Link Image](http://stackoverflow.com/questions/1079599/facebook-post-link-image) (not exactly a duplicate, but the answers will be the same) – Anomie Aug 04 '11 at 14:48
  • Here you can see how it works! I built it using PHP + jQuery. The source code is available to download. Hope you enjoy! http://lab.leocardz.com/facebook-link-preview-php--jquery/ – Leonardo Cardoso Mar 08 '12 at 00:33

5 Answers5

20

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)

scube
  • 1,931
  • 15
  • 21
Calvin
  • 8,697
  • 7
  • 43
  • 51
12

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/

Philipp Kief
  • 8,172
  • 5
  • 33
  • 43
scube
  • 1,931
  • 15
  • 21
1

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" />
Hiệp Nguyễn
  • 81
  • 3
  • 9
0

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

Robin
  • 866
  • 7
  • 19
0

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

Icallitvera
  • 166
  • 1
  • 3
  • 13