How To Optimize For Facebook’s New ‘Like’ Functionality

News was broken this weekend about new Facebook “like” functionality that will replace the traditional Facebook share buttons. The change beefed up the visibility of people’s “likes” by adding thumbnails, and meta data form Facebook’s Open Graph Protocol:

This means that getting a page on your website “liked” will now be featured in the stream of users and now act exactly like a “shared link” used to, complete with relevant images and descriptions.

So How Can This Be Optimized?

With this change, Facebook is now giving webmasters control of how their listings show up in the stream. So test what title headlines work the best in driving traffic by implementing these changes on your site.  Here are the steps to do so:

Like Buttons

First, you need to grab a like button and make sure it is on your page. Facebook has a like button tool that allows you to create a specific button to go onto your website. A few options that can be customized includes the terminology to use (like vs. recommend), fonts, color schemes, and count information.

META Data

This is where the magic happens to really change the look of people when they are sharing your content. All of this information should be placed within the head of your page, and each tag controls a very specific element within Facebook.

This is how each meta tag would look with the following Facebook tags included for each:

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

The Facebook Tags:

• og:title
  This is the text you want to feature as the title of the link (the blue/bold linked text).
• og:type
  This is the type of link that the user “liked.” There are currently 38 types of objects that you can choose from  that can be found here.  The most common would probably be “article”.
• og:image
  This is the image that will be shown on Facebook. The nice thing with this feature is that currently, the image doesn’t even have to be on the page.  So if you want to slap a scaled back version of our logo on each link, go ahead!  There is no need to put an image on a page just to use for pulling to Facebook, just add a link.
• og:url
  This is the URL that users will be linked to when clicking from Facebook. This helps SEO’s to make sure that the proper link is chosen, and that the like counts are working for the proper article, no matter how malformed of a URL people see in their browser.
• og:site_name
  This is the name of the site that will show up with the link.
• fb:admins or fb:app_id
  This tag (fb:admins) is for a list of Facebook admins, separated by commas. If you cannot find an admin’s ID, you can jump into their profile, mouse over their profile image and extract the id number from the URL. Another tag can be substituted called the “fb:app_id” tag that is for Facebook Platform application IDs that you may be using instead of profile ids.

So let’s look at what Danny Sullivan just liked on Facebook:

Now let’s breakdown the tags for this page on the old GooglePlex:

• <meta property=”fb:page_id” content=”7138936668″ />
  This of course is the id number for Search Engine Lands FB Page. Again, to get the Facebook Page ID number, simply go to the page in question, hover over the profile image and remove the number form the URL. You should be able to test this by adding your ID to the end of this link:https://www.facebook.com/album.php?profile=1&id=If the link with the number appended takes you to your page’s phots, you have the right ID!

• <meta property=”og:site_name” content=”Search Engine Land”/>
  This of course is the name of the site!
• <meta property=”og:title” content=”  Videos Of The First Googleplex”/>
  This is the title that is pulled through to Facebook.
• <meta property=”og:type” content=”article”/>
  This classifies the item Danny Sullivan liked as an article, thereby grouping similar objects together. Here is a look at the other pages that are grouped with this link he liked:

• <meta property=”og:image” content=”https://searchengineland.com/images/20/searchengineland-og.png”/>
  This is the image that will be pulled through with the link. Search Engine Land has it set to pull the logo regardless of what is on the page.

So, what’s missing from this Search Engine Land example?

One item that could be very detrimental with the new Facebook like system is the description.

While this is not required, it can help (on both click throughs and fighting errors), Search Engine Land has the site set up in such a way that the first bits of content will be pulled in with the link, this could potentially backfire.

Here is an example of Facebook trying to decide what the description should be:

As you can see from the page, Facebook grabbed the timestamp information and used that as the description.

In order to stop this, you can simply add a description to the page as well:

<meta property=”og:description” content=””/>

Bonus Stat:

Know which “Like” Button Generated the Action!

When placing the like button code on your page, you can mark each button with a specific location if you are looking to see which placement is performing the best.

To do this, simply add a:
ref = “” tag in your link. It will look something like this:

<fb:like ref=”bottom_article”></fb:like>

The referrer will then show in the referrer link to your site and will look like this:

https://www.facebook.com/l.php?fb_ref=bottom_article&fb_source=profile_oneline

How To Implement Quickly

For WordPress Users there is a plugin called WP-OGP that allows for full control of your Facebook metadata. Simply add this plugin to your blog and start creating customized data for Facebook likes!

All-in-all, this is a very exciting change for Facebook, and a welcoming support of Facebook metadata. So don’t get left behind, start embracing the Open Graph Protocol today and help give your “likes” a boost!