Happy Easter! The entire Themify store is 20% off. Use EASTER discount code to check out.

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 do so in the Themify options panel under Themify > Settings > General, as shown below.

general-settings-tab

ogtag-remove

Available filters

You can use filters in custom functions to customize the output of the Open Graph tags, and you can use these by first creating a file named 'custom-functions.php' in your theme directory and adding the code needed, such as:

<?php
function custom_og_description($description){
  return 'A fixed description';
}
add_filter('themify_og_description', 'custom_og_description');
?>

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