Your Open Graph tags determine how your website looks when people post a link to it on Facebook.  It also determines how the site looks when you display your blog/news posts on your Facebook page.  I have mixed feelings on whether a Facebook page for your business is really worth it (hint, it totally depends on what type of business you have) but as part of the redesign I set up a new Facebook page for Dabbled Studios, and blog posts here will show up there.  So when they show up, they’d better look good, right?

If you want to be sure how your site pages/posts look to Facebook, you can use the Facebook Debugger.  Just paste the URL to a post, or a page, and click the Debug button, and you can see your site the way facebook sees it.  If you have a WordPress site, it generally won’t look too bad by default, by I wanted to make sure my featured image was the image shown (rather than whatever FB picks!), and generally make sure my posts and pages looked how I wanted them to look.

As part of the site redesign, I pulled all my Open Graph settings into a function.  The code I used is commented below.  You can put this in your functions.php file, or in a plugin, if you’d like to use it.

function insert_opengraph() {

	$current_category = single_cat_title("", false);  //get the category name if it's a category page

	global $post;
	setup_postdata( $post );  //get the excerpt function to work outside the loop

echo '<meta property="og:site_name" content="'. get_bloginfo ( 'name' ).'"/>'; //set the site name

//treat the front page, post/pages, and archive pages differently
	if ( is_front_page( )  ) {    

    $excerpt  = get_bloginfo('description');
	 echo '<meta property="og:title" content="' . get_bloginfo ( 'name' ) . '"/>';
        echo '<meta property="og:type" content="website"/>'; 

} elseif (is_singular() ){ 
    $excerpt = get_the_excerpt();
	 echo '<meta property="og:title" content="' . get_the_title() . '"/>';
     echo '<meta property="og:type" content="article"/>';
     echo '<meta property="og:url" content="' . get_permalink() . '"/>';
} else { 
    $excerpt  = get_bloginfo('description');
	echo '<meta property="og:title" content="' . $current_category . ' Archives"/>';
	echo '<meta property="og:type" content="website"/>';
}

		echo '<meta property="og:description" content="'.$excerpt.'"/>';

//get the featured image, and if not, then get a default image. be sure to set the url.
		if(!has_post_thumbnail( $post->ID )) { 
		$default_image="http://mysite.com/wp-content/uploads/2013/12/logo3.png"; //default
		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] ) . '"/>';
		}

}
add_action( 'wp_head', 'insert_opengraph', 5 );  //insert into the header

I used snippets from several sources for this code.