Open Graph Meta Tags

Introduced in Themify Framework 1.1.8 are the Open Graph meta tags output in <head> tag. These tags arise from the specification of the Open Grap Protocol in http://ogp.me/ and are used by Facebook, Google+ and even Google search engine for a better parsing of the page content.
Open Graph meta tags are useful for example when a user posts to her Facebook wall:

Here we can see the entry title, the page url, the entry description and the image thumbnail. The Open Graph meta tags introduced will offer all this public information when users publish your posts.

In Themify themes, the Open Graph meta tags are outputted in the tag using the "wp_head" WordPress hook so you don't need to take action to apply them.

Removing meta tags

Should you ever need to remove the meta tags, you can use the following code:

<?php remove_action('wp_head', 'themify_open_graph'); ?>

This code can be placed in your theme by creating a file named custom-functions.php and pasting the code. Alternatively if you have created a child theme, you can paste this code in a functions.php file in your child theme.

Available filters

There are 3 filters available if you need to apply some customization to the description, type or the url of the thumbnail plus one filter that empowers you to append any content to the meta tags.

Type

This tag specifies a type for your page. The Themify implementation accounts for the types "article" for the single view of entries and "website" for the home page. The associated filter is 'themify_og_type' and an example of its usage is:

function custom_og_type($type){
  return 'video';
}
add_filter('themify_og_type', 'custom_og_type');

 

Description

This tag specifies a description for your page. In the implementation, the home page uses the site description entered in WordPress settings and the post excerpt for single views of entries. The associated filter is 'themify_og_description' and it can be used like this:

function custom_og_description($description){
  return 'Another fixed description';
}
add_filter('themify_og_description', 'custom_og_description');

 

Image

This tag specifies the featured image for your page. In the implementation, only the single views of entries display an image. The associated filter is 'themify_og_image' and as an example, this code would set a fixed image for the thumbnails of your posts, which could be useful if all your posts don't include an image and you want to set a default one:

function themify_og_image($image_url){
  return 'http://example.com/alternative-image.jpg';
}
add_filter('themify_og_type', 'themify_og_image');

 

General filter

The filter that encompasses all the content outputted is 'themify_open_graph' and as an example, we will add an image for the home page:

function custom_open_graph($meta_tags){
  if( is_front_page() )
    $meta_tags .= '';
  return $meta_tags;
}
add_filter('themify_open_graph', 'custom_open_graph');

This will append the image tag to the rest of tags in the home page.

External resources

The Open Graph protocol
Facebook Open Graph Debugger