- Installing Jetpack
- Adding Open Graph Meta Tags
- That's It, You're Done!
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding Open Graph Meta Tags
Facebook uses a tagging protocol called Open Graph to identify websites as "rich objects." Essentially, this feature allows Facebook to identify the type of content on your site; when this content is added to Facebook, it will be displayed in a way that makes sense.
When you post a link to an article, Facebook quickly scans the article source to find the title, description, and associated images. For WordPress blogs, Facebook often auto-detects the general information for the site (as discussed earlier in this article), rather than the specific title, description, and image for that article.
Sometimes, even when the title and description are correct, the images Facebook finds to associate with the article are wrong; for example, it selects the site logo, an ad, or the author's photo instead of the featured image for the article (see Figure 6).
)
Figure 6 This shared article is showing the default image for the site instead of the featured image in the post.
By adding special Facebook-specific meta tags to your theme, you can tell Facebook where to look for the information for each article. There are two different methods:
- Enter meta tags in your header.php file
- Add dynamic tags to your functions.php file
Method 1: Adding Open Graph Meta Tags to header.php
- Open your header.php file. You can use your favorite FTP program and a text editor, or go to Appearance > Editor and choose header.php.
- Add the following code:
- In the code, change YOURIMAGEURL.jpg (shown in boldface above) to the correct URL for your default image, and supply your Facebook User ID to replace YOUR USER ID (also in boldface).
- Change your <html> tag to include the required XML namespaces:
- Save and close your header.php file.
<?php
if(is_single() || is_page())
{
echo '
<meta property="og:title" content="'.get_bloginfo('name').' :
'.single_post_title('', false).'" />
';
while(have_posts()):the_post();
$og_thumb_meta = get_post_meta($post->ID,'_thumbnail_id',false);
$og_img = wp_get_attachment_image_src($og_thumb_meta[0], false);
$og_thumb = $og_img[0];
$og_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
$og_excerpt_clean = apply_filters('the_excerpt_rss', $og_excerpt);
endwhile;
echo '<meta property="og:description" content="'.strip_tags($og_excerpt_clean).'" />';
}
else{
echo '
<meta property="og:title" content="'.get_bloginfo('name').'" />
<meta property="og:description" content="'.get_bloginfo('description').'" />
';
}
if(is_home() || is_front_page())
{
echo '
<meta property="og:type" content="website" />
<meta property="og:url" content="'.get_bloginfo('url').'"/>
';
}
else{
echo '
<meta property="og:type" content="article" />
<meta property="og:url" content="'.get_permalink().'"/>
';
}
if(!isset($og_thumb) || $og_thumb == null)
{
$og_thumb = get_bloginfo('stylesheet_directory').'/images/YOURIMAGEURL.jpg';
}
echo '
<meta property="og:image" content="'.$og_thumb.'" />
<meta property="fb:admins" content="YOUR USER ID"/>
';
?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
Method 2: Adding Dynamic Open Graph Meta Tags to functions.php
- Open your functions.php file. You can use your favorite FTP program and a text editor, or go to Appearance > Editor and choose functions.php.
- Add the following code between the opening and closing <?php ?> tags:
- In the code, change YOURIMAGEURL.jpg (shown in boldface above) to the correct URL for your default image, and supply your Facebook User ID to replace YOUR USER ID (also in boldface).
- Save and close your functions.php file.
/* Add the required xml namespaces for Open Graph */
function og_namespace( $xmlns ) {
return $xmlns . ' xmlns:og="http://ogp.me/ns#" xmlns:fb=
"http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'og_namespace');
function og_head() {
global $post;
if(is_single() || is_page())
{
echo '
<meta property="og:title" content="'.get_bloginfo('name').' :
'.single_post_title('', false).'" />
';
while(have_posts()):the_post();
$og_thumb_meta = get_post_meta($post->ID,'_thumbnail_id',false);
$og_img = wp_get_attachment_image_src($og_thumb_meta[0], false);
$og_thumb = $og_img[0];
$og_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
$og_excerpt_clean = apply_filters('the_excerpt_rss', $og_excerpt);
endwhile;
echo '<meta property="og:description" content="'.strip_tags($og_excerpt_clean).'" />';
}
else{
echo '
<meta property="og:title" content="'.get_bloginfo('name').'" />
<meta property="og:description" content="'.get_bloginfo('description').'" />
';
}
if(is_home() || is_front_page())
{
echo '
<meta property="og:type" content="website" />
<meta property="og:url" content="'.get_bloginfo('url').'"/>
';
}
else{
echo '
<meta property="og:type" content="article" />
<meta property="og:url" content="'.get_permalink().'"/>
';
}
if(!isset($og_thumb) || $og_thumb == null)
{
$og_thumb = get_bloginfo('stylesheet_directory').'/images/YOURIMAGEURL.jpg';
}
echo '
<meta property="og:image" content="'.$og_thumb.'" />
<meta property="fb:admins" content="YOUR USER ID"/>
';
}
add_action( 'wp_head', 'og_head', 5 );
Now, when you click the Share button, Facebook detects the correct title, excerpt, and featured image for your article (see Figure 7).
)
Figure 7 This is the same shared article as in Figure 6, but Facebook automatically detects the correct thumbnail image. The title area now displays the site title as well as the title of the article.