Customizing how a shared webpage appears on Facebook
› Customizing how a shared webpage appears on Facebook

Websites are shared in Facebook everyday. Facebook share has become widely used so anyone can share your site or web pages if they like it in their profile.

It's really quite simple, whenever you share a URL on Facebook, Facebook will generate a title, an excerpt or description and an image from the url being shared.

The good thing is that site's owner has direct control on how the webpage will look like when shared, you just need to add some meta tags that will be recognized by Facebook. this is referred as the Open Graph protocol. Open Graph tags are <meta> tags that you add to your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

This meta tags goes in your page.tpl.php if you are using Drupal (6). In general, it goes in the <head> of your page.

You can generate a opg meta tag for your site here

An Open Graph tag looks like this:

<meta property="og:tag name" content="tag value"/>

If you use Open Graph tags, the following are required:

og:title – The title of the entity.

<meta property="og:title" content="TITLE GOES HERE" />

og:type – The type of entity. You must select a type from the list of Open Graph types.

<meta property="og:type" content="website" />

og:url – The canonical, permanent URL of the page representing the entity.

<meta property="og:url" content="URL GOES HERE" />

og:image – The URL to an image that represents the entity. For facebook, Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.

<meta property="og:image" content="IMAGE URL GOES HERE" />

og:site_name – A human-readable name for your site.

<meta property="og:site_name" content="SITE NAME GOES HERE" />

Now, some encounters problem updating the image shown when their page was shared in Facebook. This is due to the fact that Facebook caches already shared urls/pages to improve loading performance. So updating your page title and the picture being shared or the description of the page will still shows the older version of the page once shared. This information was cached when your site is shared for the first time.

To make Facebook update your old cached information, you need to use Facebook's official URL Linter. Just paste the URL of the page and facebook will fetch the title, description/excerpt, image, the link shown with the post, and any other meta properties on the page. It will show you the closest possible match as to how Facebook will treat your page when it crawl it in production and clear up the old cached information as well.