Category: WordPress

If you have a WordPress blog, odds are that you are sharing your posts on Facebook and other social media websites. Some of these sites allow you to include a thumbnail image and description when you or your visitors share posts. For example, when you paste in a URL on Facebook or LinkedIn they will pull an image (if available) and description from the page. At first glance, it may appear that you don’t have much control over this.

However, both Facebook and LinkedIn utilize the Open Graph Meta tags (For more info about the Open Graph API in general, check out David Walsh’s Facebook Open Graph META Tags article.). If you take advantage of this, you can control which image and description is pulled by default.

How can I use Open Graph Meta Tags with WordPress?

It is a pretty straightforward process to add the required meta tags. First, we need to allow for Facebook markup in our opening HTML tags. In this example we are going to add a few filters in our functions.php  file to accomplish this (Note: you could also add the appropriate code to your header.php):

add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
  return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}

add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
  return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}

Now we can add the Open Graph meta tags just like regular meta tags and use WordPress’ Template Tags to fill them in. Here’s an example:

<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?>
<?php if ($fb_image) : ?>
	<meta property="og:image" content="<?php echo $fb_image[0]; ?>" />
<?php endif; ?>
<meta property="og:type" content="<?php 
	if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>"
/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>

Most of the tags are pretty self explanatory, but feel free to ask questions if anything is unclear.  If you wanted to avoid touching your theme files, I’ve packaged this into a simple plugin that you can use as a starting point.  You can see the full code for the plugin here (the zip also contains a screenshot and a readme):

<?php
/*
Plugin Name: Facebook Featured Image and Open Graph Meta Tags
Version: 1.0
Plugin URI: http://www.ryanscowles.com
Description: Automatically set the posts' Featured Image as the thumbnail and set appropriate Open Graph meta tags for sharing on Facebook.
Author: Ryan S. Cowles
Author URI: http://www.ryanscowles.com
*/

define ('pluginDirName', 'fb-featured-image');

// Allow for Facebooks's markup language
add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
  return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}

add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
  return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}

// Set your Open Graph Meta Tags
function fbogmeta_header() {
  if (is_single()) {
    ?>
    	<!-- Open Graph Meta Tags for Facebook and LinkedIn Sharing !-->
		<meta property="og:title" content="<?php the_title(); ?>"/>
		<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
		<meta property="og:url" content="<?php the_permalink(); ?>"/>
		<?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?>
		<?php if ($fb_image) : ?>
			<meta property="og:image" content="<?php echo $fb_image[0]; ?>" />
			<?php endif; ?>
		<meta property="og:type" content="<?php
			if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>"
		/>
		<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
		<!-- End Open Graph Meta Tags !-->

    <?php
  }
}
add_action('wp_head', 'fbogmeta_header');

Things to consider:

A lot of plugins and themes already include some or all of this functionality. For example, WordPress SEO by Yoast takes care of this for you. A lot of themes will also do this by default. To avoid redundancy you should check to see if the Open Graph tags already exist on your site. All code contained in this post is to be used on an “As-is” basis, and may contain errors. If you notice any, let me know!