Event: F8 Developer Conference
Date: April 21, 2010
Place: San Francisco, California
The F8 Developer Conference has determined a new fate for Facebook. Previously, all the activities of Facebook were behind the great blue and white walled garden. But, after the introduction of Facebook Connect, activities spread beyond the blue & white garden and after the F8 Summit, the spread became widespread.
Open Graph Protocol was introduced in the event. Facebook has planned to use the properties of the non-profit organization in various ways to make the web more social as well as semantic.
So, a new form of Social Media Optimization (SMO) has evolved which is called Open Graph Optimization (OGO). Well, let’s call it OGO or Website Optimization for Open Graph Protocol. But, this is not the only thing for Facebook Optimization. Facebook Optimization consists of several other technique you can employ for your site to perform well in the social media.
Objective of Facebook Optimization
According to the source of the activity in Facebook, you can classify them into 2 separate categories, viz.
- Internal Activity (Link): Link sharing instance that happens on Facebook.com
- External Activity (Like): Facebook Like button press activity that happens over external sites
Internal Activity – Link
The internal activity refers to the link sharing on Facebook using http://www.facebook.com/share.php or any other widget or tools. Internal link sharing was the oldest reason to have your website optimized for Facebok. Please scroll below to see the old technique for Facebook Optimization.
External Activity – Like
Previously, Facebook was very much within walls. But, with like button and Open Graph Meta Tags, there are many external activities.
These two activities are also the major objectives for Facebook Optimization for 2010. But, I can prophecise that more things will come in near future. However, it will still be possible to categorize their activity into these 2 major categories.
Open Graph Meta Tag Myth (No Like Button, No OG Meta)
There is a myth that you don’t need Open Graph Meta Tags if you don’t plan to use the Like Button. But, what happens if you share the link through various sharing plugin (e.g. Hootlet), Share Button or the link sharing page in Facebook (http://www.facebook.com/share.php)?
When you share a link in Facebook, the Link Share Interface collects the Page Title, URL, Meta Description, and a random image. But, if you have Open Graph Meta Tags in place, then the Page Title is replaced with og:title, Meta Description with og:description, and the random image with og:image. So, with the Open Graph Meta tag, you have the control to place the right description, title, and image to attract more Clickthrough.
Old Link Sharing Optimization Technique
Before the Like Button and Open Graph Meta, Link Sharing Optimization was the only thing you could do to optimize your site for Facebook. Facebook also had the documentation for that. But, they have recently moved it. You are right, they brought in Open Graph Meta Data. So, the old technique was void.
But here is a glimplse of the old optimization meta data and the description inside the meta tags:
Common Meta Tags
<meta name="title" content="The title you want to appear in Facebook when someone shares your link" /> <meta name="description" content="The same description of SEO Meta Description optimized also for Facebook Sharing" /> <meta name="medium" content="medium_type: audio, image, video, news or blog (any one)" /> <link rel="image_src" href="The URL of the thumbnail image you want to share in Facebook" />
Audio Meta Tags
<link rel="audio_src" href="The audio source URL" /> <meta name="audio_type" content="mp3 (or others)" /> <meta name="audio_title" content="Title of The Song or Audio" /> <meta name="audio_artist" content="Name of the Artists/Speaker/Singer" /> <meta name="audio_album" content="The Name of the Album" />
Video Meta Tag
<link rel="video_src" href="The URL of the video" /> <meta name="video_height" content="200 (or any pixel you like)" /> <meta name="video_width" content="300 (or any pixel you like)" /> <meta name="video_type" content="application/x-shockwave-flash (or others)" />
These old meta tags still work, but it is always good to go with the wind and embrace Open Graph Meta Tags.
Facebook Optimization (FBO) Preparation
Open graph and Facebook tags are one of the tags that are not certified by W3C Consortium. So, you might get W3C errors if you use the tags. In some cases you might not be able to get the right utility you want. So, for that you need to add these two lines as attribute to the first <html> section, that should look like this:
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://developers.facebook.com/schema/">
The added attributes are:
Open Graph Meta Tags
Open Graph Meta Tags are currently used for making sharing the links and also for the like button. Open Graph has been adopted by Facebook for it’s social graph purposes.
According to the Open Graph Protocol site:
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to enable any web page to have the same functionality as a Facebook Page.
According to the Open Graph Protocol, several new Meta tags came into being for making your site optimized for the giant social media, Facebook.
Here is a glimpse of the new generation Meta tags:
Basic Open Graph Meta Tags
<meta property="og:title" content="A Good Title that can Attract More Clickthrough (within 100 characters)"/> <meta property="og:type" content="blog or website (visit Open Graph Protocol site for more names of types)"/> <meta property="og:url" content="The URL of the Article"/> <meta property="og:image" content="The URL of the image you want to share in Facebook (usually square images perform well)"/> <meta property="og:site_name" content="The Name of Your Site. If this is not available, then Like Button press will show someone likes yoursite.com"/> <meta property="og:description" content=" Clickthrough (CTR) is the key. But, og:title should be most attractive. And you can also put more attracting messages in <150 character description.”/>
Open Graph Meta Tags for Contact Information & Location
<meta property="og:email" content="firstname.lastname@example.org"/> <meta property="og:phone_number" content="212-904-1240 "/> <meta property="og:latitude" content="40.705213143114925"/> <meta property="og:longitude" content="-74.01103019714355"/> <meta property="og:street-address" content="55 Broad Street"/> <meta property="og:locality" content="New York"/> <meta property="og:region" content="NY"/> <meta property="og:postal-code" content="10004"/> <meta property="og:country-name" content="USA"/>
Facebook Meta Tags
Other than Open Graph Meta Tags, there are some special meta tags by Facebook that you need to use for claiming administrative powers, view Facebook Insights, and connect the External Activities with your Facebook Page.
Facebook Admin Meta Tag
<meta property="fb:admins" content="your.fb.id"/>
Please note, this meta tag does not start with fb: instead of og:, because it is a meta tag specific to Facebook, not Open Graph. In this meta tag, you can specify the name of the admins that can have insights of the site activity. Adding multiple admins never hurt.
While mentioning the admins in the meta, you can use the user name that is followed by Facebook.com (e.g. http://www.facebook.com/user.name). However, if your profile looks like this: http://www.facebook.com/profile.php?id=1234567890, then you can use 1234567890 as admin value. To find this number, you can use http://apps.facebook.com/whatismyid/ or open any album on your profile and if the URL looks like this: http://www.facebook.com/album.php?id=1234567890, then 1234567890 is your admin ID.
Using this meta tag helps you to get admin access to the page in Facebook and change and update various contents.
Facebook Page ID Meta Tag
<meta property="fb:page_id" content="####### (The number of your page)"/>
When you have both internal and external activity going on for Facebook, it is hard for Facebook to identify which page is connected with the You can also get access to Facebook Insights for the page. Facebook Insights is the Web Analytics for Facebook.
Facebook App ID Meta Tag
<meta property="fb:app_id" content="####### (The number of your app)"/>
This allows you to utilize the app engine of Facebook for your site. You can create an app from http://developers.facebook.com/setup/. You can associate your website with your app. In the comma-separated list, you have to mention the app(s) that administers the page.
This is an introductory part of the Facebook SEO aka Facebook Optimization. I’ll come up with more details in another blog. Also Blueliner has plans for a free webinar on best practices for Facebook Optimization aka Facebook SEO. Please follow the blog to get the updates.