How to extract images from a webpage as Facebook does?

Question

If I insert in my wall a link like this:

http://blog.bonsai.tv/news/il-nuovo-vezzo-della-lega-nord-favorire-i-lombardi-alluniversita/

then facebook extract the image in the post and not the first image in the webpage ( not image logo or other little images for example ) !!

How facebook does that ?

Answer 1

Hm, impossible to say without more information about the algorithm they use.

However, from looking at the page's source code you can see that while the image of Bossi is not the first image in the page, it's the first inside the divs "page_content" and "post_content". Maybe Facebooks knows the HTML IDs that the blogging system (Wordpress in this case) uses, and uses these to find the first image that is actually part of the page content.

That would actually be a good idea, and is essentially an implementation of the "semantic web"...

Answer 2

As others have said, we have no idea how Facebook decides what to choose in the absence of any relevant metadata (though Sleske's guesses seem reasonable; I'd also guess that they look at the first big image), but you can avoid that by going the correct route and simply giving facebook (and similar services) addiotnal metadata about your page by using Open Graph Protocol tags, for example if you want to specify a particular image to use for a facebook like, you'd include this in your head tag:

<meta property="og:image" content="<your image URL>" />

OGP is also used by LinkedIn, Google+ and many others.

If you're in Wordpress you can control these tags with an open graph plugin . Other systems can do it manually or via their own plugins.

Answer 3

I can imagine that the Facebook crawler can identify the actual content part, and select an image from it. Similar functionality is used by the Safari Reader functionality . It probably helps that the software used is Wordpress, which is the most popular blogging software. It's a quick win for Facebook to add specific support for this software.

Answer 4

My guess is facebook has built some algorithms for distinguishing the actual content from the other data in a html page. When looking at the page you provided it's quite easy since the html element that contains the page content has id="page_content" which is self-explanatory.