Overriding Open Graph Content in Wordpress

Any web solution that needs to be properly fit into today's social sharing content has to implement OG tags - which stands for Open Graph tags.

Image Credit: Own Creation

---

What is Open Graph

Open Graph is a protocol that allows the inclusion of special meta data into the header of the page, so as when shared on social media channels, such as facebook, twitter,... its different components would be properly identified, but also plays a role in SEO optimization.
Those components include, for example, the title, description, url, site name, key image,... and they would come in the shape of meta data, in format similar to the below, and normally preceded by the "og" identifier

<meta property="og:type" content="website" />
<meta property="og:title" content="website title" />
<meta property="og:description" content="website description" />
<meta property="og:url" content="http://www.mysiteurl.com" />

This standard is widely accepted, so providing the proper og content is a sure way to have your site display properly when shared on social media. Specific social media, such as twitter, can also provide particular additional tags for its use, which they call the open card protocol, in a format preceded by twitter, so those would be twitter:title, twitter:description,...

---

How to add OG tags to a wordpress installation?

In order to implement OG tags into a wordpress site, one can easily deploy a plugin for this purpose. And one of those essential plugins for such purposes, would be Yoast SEO plugin

While Yoast and other similar plugins allow to set general standard for values of this content from the administration interface, yet many times one needs to perform additional adjustments that just cannot be done from the interface, and would require coding, which is basically what we are doing in the code below.

---

Coding our way into adjusting OG tags

For example, let us try to modify the og:title content within the single post display, of a custom post type we have called "bank_entry", and add the post type into the title. The code (PHP since it's wordpress) would go as follows:

/* overriding og:title format for bank entry post types */
function gk_bank_entry_wpseo_og_title( $title ) {
    //only perform this action on single posts
    if ( is_singular() ) {
      //grab currently available post
      $post = get_queried_object();
      //check for match of the intended post type
      if (get_post_type($post) == 'bank_entry'){
        //append the post type to the title
        $title .= ' '.get_post_type($post);
      }
    }
    return $title;
}
add_filter( 'wpseo_opengraph_title', 'gk_bank_entry_wpseo_og_title' );

Let's take another example and make it more interesting, whereby we want to modify the description content, to make it dynamic based on another custom text field 'bank_entry_sharing_description' we had created within the custom post type. The code (again PHP-wordpress) would go as follows:

/* overriding og:description field with custom content from a custom field */
function gk_bank_entry_wpseo_opengraph_desc( $desc ) {
    //only perform this action on single posts
    if ( is_singular() ) {
      //grab currently available post
      $post = get_queried_object();
      //check for match of the intended post type
      if (get_post_type($post) == 'bank_entry'){
        //replace the description with the content of the custom field if the field has content, otherwise use the default value
        $overriding_desc = get_post_meta( $post->ID, 'bank_entry_sharing_description', true );
        if (!empty($overriding_desc) && $overriding_desc != ''){
          $desc = $overriding_desc;
        }
      }
    }
    return $desc;
}
add_filter( 'wpseo_opengraph_desc', 'gk_bank_entry_wpseo_og_desc' );

The full code can be found under my following gist:
https://gist.github.com/mcfarhat/64c3e0d4334e8ef58a76aa016f2d1c37#file-custom_og_content-php

Hope you found this useful !

@mcfarhat

---

Posted on Utopian.io - Rewarding Open Source Contributors

---