Is Your Website Facebook Friendly?

open_graph_featured

With the huge number of users and the variety of available apps, Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations direct potential customers toward their Facebook pages instead of the corporate websites. With the availability of the “like” and “Recommend” buttons on almost every website makes it necessary to optimize your website to be Facebook friendly so when you share it on Facebook it gets displayed nicely. One problem I’ve always found with sharing URLs on Facebook is that you most of the time have no control over the image and description text that accompany the URL, which makes the shared link look meaningless and unappealing to visit.

So now, the answer to the question above is like that, if your website is not using Facebook Open Graph META Tags already, then the answer is NO! Your website is not Facebook friendly.

So here I will talk to you about Facebook Open Graph META Tags and how you can use them so when people share your website or blog it gets displayed nicely with an accompanying title, description and image, hence making it more meaningful and appealing to users and probably increase traffic to your website.

Facebook’s Open Graph protocol allows for web developers to turn their websites into Facebook “graph” objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is “recommended”, “liked”, or just generally shared. The information is set via custom META tags on the source page. Let’s take a look at the different META tags Facebook uses to allow you to customize how your website is shared.

All of Facebook’s Open Graph META tags are start with og:, followed by more specific attribute. The data relative to the property set goes within the content attribute.

Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage.

Facebook Open Graph META Tags

Lest’s review some of the main META tags!

url

The URL should be the canonical address for the given page:

<meta property="og:url" content="http://www.codersmount.com/2012/02/is-your-website-facebook-friendly/"/>

title

The title to accompany the URL:

<meta property="og:title" content="Is your website Facebook friendly?"/>

site_name

Provides Facebook the name of your website:

<meta property="og:site_name" content="Coders Mount"/>

description

A short description of the shared page:

<meta property="og:description" content="With the massive number of users and the variety of available apps, Facebook has become a major traffic driver for all types of websites. Nowadays even large co" />

type

The category of your website, whither it’s an article, blog, book, video or some other value:

<meta property='og:type' content='article' />

image

The image META tag directs Facebook to use the specified image in the post:

<meta property='og:image' content='http://www.codersmount.com/wp-content/uploads/2012/02/opengraph-150x150.jpg' />

locale

The language of the website:

<meta property='og:locale' content='en_US' />

For more information about the other Open Graph Meta Tags visit Facebook Open Graph page.
You can also use the Lint tool provided by Facebook to help you validate what you’re sending!

To see the results of using Open Graph Meta Tags, try clicking the Facebook like button at the bottom of this page.

WordPress Plugin

If you are using WordPress then there are a number of plugins that automatically add the required Open Graph Meta Tags to the header of each post. For this blog I am using a plugin called WP Facebook Open Graph protocol available at WordPress Plugin Directory. I highly recommend this plugin if you have a WordPress website.

If you have any questions or would like me to discuss a certain topic please send me a message or simply just leave a comment below!

Is Your Website Facebook Friendly?
6 votes, 4.00 avg. rating (80% score)
  • Posted in: WordPress
Husamaldin Tayeh

Posted by

Husamaldin is a computer programmer, blogger, entrepreneur and an overall thinker. He is the founder and editor of Coders Mount. He loves everything about computers and programming. Find out more about him here or follow him on Twitter Google+ | LinkedIn.

  • http://www.facebook.com/profile.php?id=585740066 Esam Darweesh

    Thank you .. Though I don’t have a personal website yet it was very useful to read

    • http://www.codersmount.com/ Husamaldin Tayeh

      I am happy, you found it helpful

  • http://www.wecareplanet.com/ Saifi Rizvi

    Interesting content as you have described each step so nicely that it can be easily implemented.