Question

I am working on a new site ATM which features a traditional image + div with post text structure. When a user adds a link to this site in a Facebook status update, Facebook only shows the link and no text or image from the site. Know I would like to know which content Facebook loads from a site if a user added a link to a status message? Which html tags are selected and how can I change my HTML so that an preview image and text is loaded by Facebook.

Other website:

My website:

Answer 1

Better late than never…

It’s in the Facebook documentation:

In order to make sure that the preview is always correctly populated, you should add the tags shown below to the element in your HTML code. If you don’t tag your page, Facebook Share will grab the title of your page as specified in the tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the element in your page:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

So an example news story could have the following:

<meta property="og:title" content="Smith hails 'unique' Wable legacy"/>
<meta property="og:description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " />
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />

As shown, og:title contains the preview title, og:description contains the preview summary and og:image contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out.

The title and description tags are the minimum requirements for any preview, so make sure to include these two.

The og:image is the URL to the image that appears in the Feed story. The thumbnail’s width AND height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.