When sharing a link on Facebook, its service tries to parse the linked page and extract as much information as possible from it. Facebook tries to extract the title, a short description and an image from the linked page. While this information may be extracted by the standard meta-information means of the page like page title and meta-description, the author may recommend the default values to the users sharing the link.
For the Facebook service to extract the relevant meta-information recommended by the author, it uses another meta-information protocol, named Open Graph Protocol (OG). One may view this protocol as just another meta-information protocol for web pages. While the new version of Open Graph Protocol, which changes everything, is still in beta, there will be backwards compatibility with the current version.
As the documentation states, in order to turn your web pages into graph objects, you’ll need to add Open Graph protocol <meta> tags, suggesting the current page’s suggested meta-information. An example in WordPress follows:
<?php if ( have_posts() ): the_post(); ?>
<?php if ( is_single() ) { ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php } ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<?php endif; rewind_posts(); ?>
The code above should be included in the header.php file of your theme, inside the <head> tag. Please note that the code checks if the currently loading page is a post or page (is_single() function) in order to proceed, suggesting the relevant information. One may include an else part containing general and default meta-information for the rest of the pages of the site. For an explanation of the meta-properties, please refer to the OG types documentation.
Even though the code above provides the basic information, it misses some critical information: a description of the page content, and an image describing the content. These elements can be integrated into WordPress in many ways; so the following sections provide implementations for some of the different options.
Setting the Facebook Summary Text
Many authors prefer the post excerpt field of the WordPress CMS to include a small description or summary of the main content, whilst others use third-party SEO plugins to manage the meta-information. In the first case, one may add the following, just below line 5 of the code above:
<meta property="og:description" content="<?php echo get_post_meta($post->ID, '_aioseop_description', true); ?>" />
In the second case, the documentation of the third-party plugin should be consulted for extracting the required data. In the case of the All-in-One SEO plugin, the code should be:
<meta property="og:description" content="<?php echo get_post_meta($post->ID, '_aioseop_description', true); ?>" />
Setting the Featured Image as the default image Facebook will show
Many WordPress themes support the relatively new feature of “post thumbnail”. Usually, authors choose an image relative to the content; it would be a good idea to include it in the meta-information of the web page. Again, add this just below line 5 of the code above:
<meta property="og:image" content="<?php $post_thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); echo $post_thumbnail[0]; ?>" />
For themes not supporting post featured images, one may use the first image found inline in the main content:
<meta property="og:image" content="<?php preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); echo $matches[1][0]; ?>" />
So, no matter which theme you have installed on your WordPress site, you will be able to set the title, description, and most important of all, the image that will appear on the liked post, helping you achieve a better click-through rate.
If you have any problems or suggestions, please comment, and we’ll look into them as soon as possible!
You can also do this :
But the Facebook Open Graph Protocal work best.
Do what? Sorry, I cannot see anything after the colon…
amazing ……….i was actually looking for it and asked many bloggers about this ……coz it automatically use the featured image on facebook thanx alot for the article
Glad it was useful mate :)
lemme try this code ………..i m a newbie can u plz tell that will it make any problem in my theme if i put this code wrongly
The code for setting the FB summary text is the same for using or not using SEO plugin. Please fix it! Thanks!
Today, while I was at work, my cousin stole my apple ipad and tested to see if
it can survive a thirty foot drop, just so she can be a youtube sensation.
My apple ipad is now destroyed and she has 83 views.
I know this is totally off topic but I had to share it with someone!