The <meta> tags allowed by the Open Graph protocol allow you to specify structured information about the web pages on your site....
The <meta> tags allowed by the Open Graph protocol allow you to specify structured information about the web pages on your site. The more information you provide about a particular page, the easier it is for that page to become indexed in the appropriate places within Facebook.The Open Graph protocol enables you to integrate your Web pages into the social graph. This means when a user clicks a Like button on your page, a connection is made between your page and the user. The structured data you provide via the Open Graph protocol defines how your page will be represented on Facebook. ~Open Graph protocol
SUGGESTED <META> PROPERTIES
The following two lines add the Open Graph protocol and Facebook FBML XML namespaces to the
<html> tag. This basically just differentiates element or attribute names from XML vocabularies.<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml"
dir="ltr" lang="en-US">The following
<meta> tags define your content and connect your page with Facebook. This should be added to your <head> tag.<meta property="og:title" content="TITLE"/>
<meta property="og:type" content="CONTENT TYPE"/>
<meta property="og:image" content="LINK TO IMAGE"/>
<meta property="og:url" content="URL"/>
<meta property="og:description" content="DESCRIPTION"/>
<meta property="og:site_name" content="WEBSITE NAME"/>
<meta property="fb:admins" content="FACEBOOK USER ID"/>
<meta property="fb:app_id" content="FACEBOOK APP ID" />What They Mean
og:title – The title of your page or article.og:type – For most, this is going to be “article” but there are many other supported types .og:image – The URL to the image associated with the page.og:url – The URL or permalink to the page.og:description – A brief description of your page.og:site_name – The name of your website.fb:admins – Your Facebook user ID.fb:app_id – The App ID that you acquired when you created a Facebook App.How to Find Your Facebook User ID
If you already changed your profile to use a vanity URL (e.g. http://facebook.com/jasonman) then go to your profile page and click your profile picture. The URL of the next page should be similar to this:
http://www.facebook.com/album.php?profile=1&id=508514291My User ID is in red.
ADDING THE XML NAMESPACES
For General WordPress Users
Open up your themes
header.php file or equivalent and find the html tag. Add the following namespaces (in red):<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml"
dir="ltr" lang="en-US">For Thesis Theme Users
Open your
custom_functions.php file and add the following:add_filter('language_attributes', 'add_og_xml_ns');
function add_og_xml_ns($content) {
return ' xmlns:og="http://ogp.me/ns#" ' . $content;
}
add_filter('language_attributes', 'add_fb_xml_ns');
function add_fb_xml_ns($content) {
return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content;
}ADDING THE OG META TAGS
For General WordPress Users
Open your themes
header.php file or equivalent and add the following before the closing</head> tag:<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:type" content="<?php if (is_single() || is_page()) { echo 'article'; } else { echo 'website';} ?>"/>
<meta property="og:image" content="<?php echo get_fbimg(); ?>"/>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:description" content="<?php echo $post->post_excerpt; ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="fb:admins" content="your_facebook_user_id"/>
<meta property="fb:app_id" content="your_facebook_app_id"/>
<meta property="fb:page_id" content="your_facebook_page_id"/>
Then open your themes
functions.php file and add the following:function get_fbimg() {
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', '' );
if ( has_post_thumbnail($post->ID) ) {
$fbimage = $src[0];
} else {
global $post, $posts;
$fbimage = '';
$output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i',
$post->post_content, $matches);
$fbimage = $matches [1] [0];
}
if(empty($fbimage)) {
$fbimage = "http://mydomain.com/my-default-image.jpg";
}
return $fbimage;
}The above code will first look for a featured image, then for the first image in the posts content and finally, it will use a default image that you specify. Thanks to Yoast for the code.
For Thesis Theme Users
Open up your
custom_functions.php file and add the following:function add_facebook_open_graph_tags() {
if (is_single()) {
global $post;
$image = get_post_meta($post->ID, 'thesis_post_image', $single = true);
if (!$image)
$image = 'http://mywebsite.com/my-default-image.jpg';
?>
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="<?php echo $image; ?>"/>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:description" content="<?php echo(get_post_meta($post->ID, "thesis_description", true)); ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="fb:admins" content="your_facebook_user_id"/>
<meta property="fb:app_id" content="your_facebook_app_id"/>
<meta property="fb:page_id" content="your_facebook_page_id"/>
<?php }
}
add_action('wp_head', 'add_facebook_open_graph_tags', 99);The above code will add the
meta tags to single posts only and will pull the thesis_post_image(or the default you specify) and the Thesis SEO description.VERIFY YOUR OG META TAGS
Once everything is setup you can verify any page that you added the meta tags to (to make sure there are no errors) by going to Facebooks URL Linter and entering the URL of that page.
No comments: