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!
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/"/>
The title to accompany the URL:
<meta property="og:title" content="Is your website Facebook friendly?"/>
Provides Facebook the name of your website:
<meta property="og:site_name" content="Coders Mount"/>
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" />
The category of your website, whither it’s an article, blog, book, video or some other value:
<meta property='og:type' content='article' />
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' />
The language of the website:
<meta property='og:locale' content='en_US' />
To see the results of using Open Graph Meta Tags, try clicking the Facebook like button at the bottom of this page.
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!