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:http://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=”http://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:

http://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!

Related Topics: Beginner | Channel: Social | How To: Social Media Marketing | Search & Social

Sponsored


About The Author: is the Chief Marketing Officer for Cypress North, a company that specializes in social media and search marketing services and web-based application development. He has been in the Internet marketing industry for 6+ years and specializes in Social Media Marketing. You can also find Greg on Twitter (@gregfinn) or LinkedIn.

Connect with the author via: Email



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://www.searchreturn.com Disa Johnson

    Likes are the new links, apparently. A good thing IMO. Mobile Sidecar for Google Chrome and Safari gives you the power to like a page whether it has the button or not. This is useful for SEO who don’t have control of the site code and cannot add the button themselves. Pro versions can be crafted with Open Graph but we’re keeping the free one free of adding any meta data. In my opinion, comments will also be key in the future of search, just like text surrounding links has been for Google. Likes and comments and the new links and context snippets :)

  • http://www.blindfiveyearold.com ajkohn

    The move by Facebook is just more evidence that the Open Graph is an important part of their strategy.

    Facebook SEO is here and has been near the top of my radar for a while.

    http://www.blindfiveyearold.com/facebook-seo

    I think it’s clear that the Open Graph is the way in which Facebook will compete with Google on search. It just depends on how Facebook decides to leverage the data and in what way they present those search results.

    Need more motivation? See what your page currently looks like in the Open Graph by using Facebook’s Lint tool.

    http://developers.facebook.com/tools/lint/

  • http://www.mobilemartin.com/ Michael Martin

    Greg,

    Hasn’t fb:page_id been effectively replaced by fb:app_id?

    I ask only because you use the fb:page_id in your example

  • Greg Finn

    @Michael

    I have not heard that. They are two very different tags – one for an application that can admin a page and the page itself, so I highly doubt that would ever happen.

    Post a source though if you have one! :P

  • http://twitter.com/joseph_torrillo Joseph Torrillo

    Notice the other difference between danny sullivan’s “like” and tony adam’s “like”. Danny’s correctly displays the “video’s” tag and the status update says, “Danny Sullivan likes videos: Old Googleplex…” etc. Tony Adam’s just says, “Tony Adam’s likes a link”. This could be due to a few of the meta modifiers being left out of the code, but I have tried every possible way to get all of the attributes to get pulled through to Facebook and cannot get them to work despite having every piece of code implemented. I even tried the wordpress plugin. Every time I like the page, it just says I “like a link” and it won’t pull the type or the title through to the facebook post.

    Any thoughts? Anyone else having the same issue and are they perhaps just bugs that need to get worked out? Any comments would be appreciated. Thanks.

  • Ashley Bigham

    I’ve been trying to implement this on my site since it came out and there a few behaviors that I don’t understand.

    First, I cannot seem to set an image. I don’t understand why since I’ve tried through the meta tag and through a wordpress plugin that is supposed to fill in the meta data (worked for everything else, but not the image). Facebook is currently pulling a little social media icon seemingly at random for my posts. Sometimes it’s an RSS icon, sometimes a LinkedIn icon, and I have no idea why it would do this. Is there something else that I need to do to define the image I want it to pull?

    Secondly, is there a way to control how the site/page link is displayed on Facebook? When it pulls a blog post, it displays it as “Site Name | Post Name” with the URL beneath the link. I don’t have a problem with it displaying like this; I was just curious if there are ways for me to change how it’s displayed.

    I love this feature so far; there are just a few things I’m confused about.

  • http://www.pointit.com/ Lisa Sanner

    Starting this weekend, I’m seeing lots of “Recommend” buttons across the web. Do recommends work like Likes/Shares too?

  • http://www.searchreturn.com Disa Johnson

    Facebook has given the ‘Like’ (Recommend) more functionality similar to that of ‘Share.’ That said, there are still small differences between the two but you’re going to see a lot of websites that begin adding it. When web masters screw it up or neglect it altogether, that’s why I have it in Mobile Sidecar. That way an SEO can go about liking their client’s content from a neutral app without needing access to their hosting provider. It even includes ‘unlike’ if they forget to pay their bills as is often the case in the shabby economy lately. Bundled with it comes a personal crawler so you can have a look at all their most important title tags in one go, and notice if they have a Robots.txt file or not. It’s called Mobile Sidecar but it’s not exclusively for iPad. Try it on your desktop with Google Chrome, Safari or Opera 11.

    *cheers*
    Disa

  • http://huzze.net/ Andrei

    Was really looking forward to being able to force it to pull a specific image, but the trick you presented didn’t work for me :(

  • http://www.facebook.com/people/Streamgo-Streamgonet/100001454467231 Streamgo Streamgonet

    Hi

    http://www.rapidlikes.net can help you to increase all of the following facebook
    Google +1
    Twitter Followers
    Facebook Likes
    YouTube Views
    Website Traffics(your skyblog page)
    this siteweb offre 1000 points in first login

    I received 1000 likes on my page with RapidLikes
    please register with my Refer link:
    http://www.rapidlikes.net/ref-1.html

  • http://www.patrickwagner.com Patrick Wagner

    This was a great article – thanks I will share it with my followers.

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide