Introduction to configuring OpenGraph

Generally speaking, Facebook is pretty smart and efficient at choosing the right image when you link to a website from within their system e.g. as a post within a group or on your timeline. However, sometimes it struggles and the choice of image can often be completely unrelated and thus may confuse or put off potential viewers from clicking the link and going forwards.

Luckily for us, there is a feature known as OpenGraph which allows us to point the sometimes unintelligent Facebook in the right direction so it grabs the correct thumbnail to use. To make this double lucky, there is multiple methods of doing this, here’s how.

1. Using Yoast WordPress SEO Plugin

By default we always install and use the Yoast WordPress SEO plugin on all sites we develop and maintain, so for us this would be the first step and obvious choice for managing our OpenGraph settings. If you any reason you don’t have the plugin you can add this in the normal way (Plugins -> Add New and then search for Yoast WordPress SEO) and then ensure that it is installed and activated.

You should now see the SEO option in your dashboard on the left hand menu, you will need this link to enter the settings for all Yoast based activities. So let’s start by clicking SEO -> Social, add your Facebook URL in the first tab (Accounts), once done switch to the Facebook tab and then simply move the switch to Enable if it isn’t already.

Yoast SEO Social Options

Yoast SEO Social Options

In the same tab you are also able to upload or select a default image to use when there is no image available on the page, a good choice here would be to set your logo so in a worst case scenario you know for sure that there will be an image presented to Facebook.

Make sure you click Save Changes and that’s it, Job Done.

2. Manually adding OpenGraph to WordPress

If adding Yoast WordPress SEO plugin isn’t an option e.g. it conflicts with existing plugins. This method is a bit more advance and requires you to adjust your themes files, if your unsure about this please stop now and get some further advice or ask someone to help. Also remember to backup your theme files first.

Simply copy and past the code below into your functions.php file

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
 
//Lets add Open Graph Meta Info
 
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo '<meta property="fb:admins" content="YOUR USER ID"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site NAME Goes HERE"/>';
    if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
        $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Remember, when inserting the code there are some variables which need to be changed! don’t forget them.

3. Get someone else to do it

After the above, if you simply don’t have the time, the knowledge or the expertise to do this then you can always get someone else to do the work for you. Here at SocialSaxon we routinely add OpenGraph tags to sites we design and develop and would happily assist if required. If your site is already designed or hosted by us and your unsure if your using OpenGraph then get in touch.

That’s all for now,

Mike

Pin It on Pinterest