How To Set Up WordPress Social Metadata

August 21st, 2012 by Search Influence Alumni

We couldn’t be prouder to announce that our own Doug Thomas’s video has won the SEOMoz Youtube Contest! Social metadata, the hidden content that displays your content in a correct and attractive way on social media sites, is one of the most overlooked aspects of posting a blog or article, and this tutorial provides a concise and thorough explanation of how to utilize it. Metadata lets Facebook, Twitter, and Google+ know what title, description, and image to show in the preview on the site. To implement Facebook OpenGraph, Twitter Cards and Google+ Authorship, you now just need one <link> tag rather than the more complicated three-link monte from earlier. In this tutorial, we use built-in WordPress functions to edit the theme of your site to create a semi-automated, scalable way to correctly generate this metadata.

When we set this up, we use two sections of WordPress to push the data to the blog post. For the Twitter Cards and Authorship, you use unused fields in your User Profile like AIM and URL to house the information. For OpenGraph, the data is either pulled from Custom Fields or the post itself. If you can’t see Custom Fields under your post, go to Screen Options at the top of the Edit Post screen and check Custom Fields. By using what’s already existing in WordPress instead of a plugin, you avoid bloat in your database, reduce the risk of plugin conflicts, and make your code portable to other WordPress sites without having to install anything new.

Here’s the video, which will show you the code to set this up and a cute ferret. Enjoy!

Can’t Read the Code?

<!-- Facebook Open Graph! -->
<meta property="og:site_name" content="<?php bloginfo('name');?>" />
<meta property="og:type" content="<?php if(is_single()) {echo 'article';} else {echo 'website';} ?>" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="<?php $viral_title=get_post_meta($post->ID,'viral_title',true);
if(!empty($viral_title)){echo $viral_title;}
else{wp_title();} ?>" />
<meta property="og:description" content="<?php $viral_desc=get_post_meta($post->ID,'viral_desc',true);
if(!empty($viral_desc)){echo $viral_desc;}
else{while (have_posts()):the_post();
echo substr(strip_tags(get_the_content(),0,197));echo '...';endwhile;} ?>" />
<meta property="og:image" content="<?php $og_image=get_post_meta($post->ID,'og_image',true);
if(!empty($og_image)){echo $og_image;}
else{bloginfo('template_directory');echo '/og.jpg';} ?>" />
<!-- Twitter Cards (in beta!) -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@terrafalsa" />
<meta name="twitter:creator" content="@<?php the_author_meta(aim,$posts[0]->post_author); ?>" />
<!-- Google+ Authorship (header) -->
<link rel="author" href="<?php the_author_meta(url,$posts[0]->post_author); ?>" />