Wordpress

How to set the default Featured Image and Description when sharing your posts on Facebook

facebook default thumbnail for wordpressWhen 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!

 

About the author

Nikolaos Anastopoulos

Nikos is an IT consultant providing professional services with broad experience on data analysis, data migration and web development. Being part of the Moneytized team, Nikos migrates his expertise on Information Technology with Internet marketing, resulting in high quality Internet implementations. More on his profile.

7 Comments

Leave a Comment