Configuring Your WordPress Theme with Page-Specific Social Meta Tags

post_image_wordpress_social_meta_tags

Recently I have been scrounging through my site and blog, updating and optimizing some of the code. One thing I had been remiss about was setting up meta tags that Google+ and Facebook look for to populate page info when you share a link on either site. While it’s not new news about how to include these meta tags, I wanted to take it a step further than simply adding meta tags for title, description and image – I wanted article-specific information, specifically for this, my blog. After a bit of searching and trial-and-error, I came up with the following solution.

The Goal

  • Include generic blog title, description and image meta tags on blog home page
  • Include article-specific title, description and image meta tags on article pages

Solution Part 1: functions.php

Since we want to include image meta tags, we must first include a few necessary functions in the WordPress theme’s “functions.php” file so each article can support a featured image. Don’t have this file in your theme? No problem. Just create a PHP file named “functions.php” and drop it in with the rest of the theme’s PHP files.

The necessary functions to include are as follows:

add_theme_support( 'post-thumbnails', array( 'post' ) );
set_post_thumbnail_size( 50, 50, true );

First, the add_theme_support function simply allows the theme to support post thumbnails. In the code above, the “array(‘post’)” is an optional parameter that allows post thumbnails only for posts. Leaving this blank won’t hurt anything, and you can then use thumbnails for any page.

Next, the set_post_thumbnail_size function sets the default post thumbnail size – in our case, 50×50. The 3rd parameter is an optional Boolean value for whether or not to crop the image in hard or soft crop mode.

If you want to set additional sizes for thumbnails to be generated at, you can use the add_image_size function.

Solution Part 2: header.php

Now that the functions are in place, it’s time for some conditional PHP magic inside of the “header.php” file. Here’s the final code up front so you can see it. I’ll explain it shortly.

(Note: I placed this code in between the “content-type” meta tag and the title tag. Yours probably doesn’t need to be in exactly the same place, but I wanted to make sure that the meta tag’s title came before the actual title tag, just in case Google+ or Facebook stopped after finding the page’s title tag.)

<?php
if (has_post_thumbnail() && !is_home()) {
  $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
  echo '<meta itemprop="image" content="' . $imgsrc[0] . '" />';
  echo '<meta property="og:image" content="' . $imgsrc[0] . '" />';
} else {
  echo '<meta itemprop="image" content="http://www.yourblogurl.com/path_to_your_image.png" />';
  echo '<meta property="og:image" content="http://www.yourblogurl.com/path_to_your_image.png" />';
}
if (!is_home()) {
  echo '<meta itemprop="name" content="';
  wp_title('',true);
  echo '" />';
  echo '<meta property="og:title" content="';
  wp_title('',true);
  echo '" />';
} else {
  echo '<meta itemprop="name" content="Insert Your Title Here" />';
  echo '<meta property="og:title" content="Insert Your Title Here" />';
  echo '<meta itemprop="description" content="Insert Your Description Here" />';
  echo '<meta property="og:description" content="Insert Your Description Here" />';
}
?>

At first glance, that code may look menacing. But in reality, it’s just two conditional statements with a few echo statements. In truth, it could all be done with one conditional statement, but I chose to do two separate ones for clarity and separation of the image meta tags. Here’s the breakdown.

The first conditional set checks to see if there is a post thumbnail and if it is the home page, via the has_post_thumbnail and is_home functions, and writes out the image meta tags accordingly.

If there’s a thumbnail and it’s NOT the home page, we get the image’s source by setting a variable equal to the return value of the wp_get_attachment_image_src function. The return of this is an array, so when we echo the results out into the meta tags (og:image for Facebook, the other for Google+), we reference the first array slot ([0]), which is the URL of the image source. If there is no thumbnail, or if it’s the home page, we simply set the content of these two meta tags to a default image.

The second conditional set checks to see if it’s the home page or not, via the is_home function, and sets the title and description meta tags accordingly.

If it’s NOT the home page, we echo out the title of the page, via the wp_title function. Note that this function echos out the title when the 2nd parameter is set to “true”, thus why the code above uses three lines to echo out each meta tag. When it’s not the home page, I also don’t bother with the “description” meta tag, as Google+ and Facebook will use the first part of the article content by default. If it IS the home page, we simply echo out the title and description meta tags for each site, populating it with default content.

Wrapping Up

With the “functions.php” and “header.php” files updated, you can now add a featured image to each post, if desired, in the “Featured Image” area of the “Add New Post” page in the WordPress admin section. You can include this feature image in your article automatically as well, which will take updates to any or all of the following template files: “index.php”, “page.php”, and “single.php”. To do this, you can simply include the following logic where you want it inserted.

if (has_post_thumbnail()) {
  echo the_post_thumbnail('thumbnail');
}

The parameter of the the_post_thumbnail function can be set to “thumbnail”, “medium”, “large”, or “full”, depending on what size you would like.

So there you have it. A few dozen lines of code and your WordPress blog theme is ready to provide optimized meta information to Google+ and Facebook.

Until next time, happy coding!

There are no comments yet, add one below.

Leave a Comment