Facebook traffic has become one of the main sources of traffic to many websites, so it is important that websites are optimized for display on Facebook. Facebook has specific meta tags for their site called open graph tags that give a site owner the ability to optimize how their site is displayed when shared on Facebook.

Facebook has four “required” open graph meta tags:

1
2
3
4
<meta property="og:title" content="#"/>
<meta property="og:type" content="#" />
<meta property="og:url" content="#"/>
<meta property="og:image" content="#"/>

The first required open graph meta tag is for the title. Generally, this will mirror the set up that you have for <title> in the <head> of the header.php file. As an example, below is the set up that I use and recommend because it optimizes a site title nicely for search engines and general readability.

  • If it is the home page, it will return the website name.
  • If it is a category page, it will return the category and website name.
  • If it is a single page, it will return the title of the post.
  • Lastly, if it is a page, the title of the page and website name will be returned.
1
2
3
4
5
6
7
8
9
10
11
<meta property="og:title" content="<?php if (is_home () || is_front_page() ) {
    bloginfo('name');
} elseif ( is_category() ) {
     single_cat_title(); echo ' | ' ; bloginfo('name');
} elseif (is_single() ) {
    single_post_title();
} elseif (is_page() ) {
   single_post_title();  echo ' | ';   bloginfo('name');
} else {
    wp_title('',true);
} ?>"/>

For example, the output of the above code for this particular post looks like this:

1
<meta property="og:title" content="Facebook Open Graph meta tags: How to optimize Wordpress for sharing"/>

Next in the required meta tags is og:type. There are many, many types that can be used, so visit the Facebook page on Open Graph to determine which is most relevant to your website. For example, when building a political campaign website, I use politician. After you have determined which to use, drop it in the code.

1
<meta property="og:type" content="politician" />

Next up is og:url, which is the URL of the page being shared. To get the URL, we will use the WordPress permalink template tag.

1
<meta property="og:url" content="<?php the_permalink(); ?>"/>

As an example, the code below is what will be output for this post:

1
<meta property="og:url" content="http://bluepeakdigital.com/facebook-open-graph-meta-tags-wordpress-sharing"/>

Last of the required open graph meta tags is the image to be used a preview. The code below will first check if there is an thumbnail set for the post being shared. If there isn’t, it will default to an image that you will need to designate in your images folder, so make sure you have one in there. Facebook also has specific requirements for the preview image:

An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats.

1
2
3
4
5
<?php } if (is_single() ) { ?>
<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<?php else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/fbpreviewimage.png" />
<?php } ?>

There are two more open graph tags that aren’t required, but should be added: site_name and fb_admin. The first is self-explanatory — the name of your site. We will use the bloginfo('name') WordPress template tag to return the site name.

1
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>

The second is fb_admin, which is where you will want to add your individual Facebook ID number so that you will have the ability to administer your site and see Facebook Insights. I’ve found the easiest way to get a Facebook user ID is to go to graph.facebook.com/yourpersonalizedfacebookusername.

Finally, here’s an example of the code all together:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<meta property="og:title" content="<?php if (is_home () || is_front_page() ) {
   bloginfo('name');
} elseif ( is_category() ) {
    single_cat_title(); echo ' | ' ; bloginfo('name');
} elseif (is_single() ) {
   single_post_title();
} elseif (is_page() ) {
  single_post_title();  echo ' | ';   bloginfo('name');
} else {
   wp_title('',true);
} ?>"/>
<meta property="fb:admins" content="00000000"/>
<meta property="og:type" content="<?php if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<?php if (  (is_home()) || (is_front_page())  ) { ?>
<meta property="og:description" content="Blue Peak Digital build effective web presences for political campaigns, organizations, and companies."/>
<?php } elseif (is_single() || is_page() ) { ?>
<meta  property="og:description" content="<?php the_excerpt_rss(); ?>" />
<?php } ?>
<?php } if (is_single() ) { ?>
<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<?php else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/fbpreviewimage.png" />
<?php } ?>

While these are the most important open graph tags, there is a whole spread of other open graph meta tags that should be added to your code to give more descriptive details on the specifics of your site, so check out the Facebook site to pick the particular ones relevant to the site.

Note: Keep in mind that Facebook will cache the meta data, so if you have made changes to the site, the old information may still display when the page is shared. To reset the information (or see a preview of what the page will look like when shared) use the Facebook URL linter. Also, the ability to change the meta information ends after a page has been shared ten times in order to keep consistency.