Open Graph Objects & Facebook – Creating Rich Snippets to Share on Facebook and Google Plus

Facebook’s Open Graph “helps people tell rich stories on Facebook from your website through a strongly typed API”. What this essentially means is that it permits you to structure your webpage in such a way that you can define various property types on your webpage (title, description, image etc.) to describe your object as you would like to see it represented in Facebook’s Open Graph.

Updated: New code here.

In essence, when somebody shares a page on your website to Facebook, the image, title and description (and other elements) can automatically be populated as you would like your readers to see it. If the Open Graph tags aren’t defined, social networks use other elements such as the (meta) title and description, and a random page image to depicts your page DNA.

This page used to share both Genesis and non-Genesis code. To avoid the confusion, we’ve altered the article to focus on just the default WordPress install. We’ll add the Genesis code another time.

It’s a good idea to take care with how your post is represented in your Open Graph meta data because it becomes the way in which your page is represented in other parts of media. It gives you control and, as we’ll touch on later, can vastly increase your conversion rates. It also assists with search engine optimisation.

Meta data has evolved into a means of representing your brand better outside of your website rather than within it.

Open Graph works by defining property data (meta tags) in your header as follows:

Meta Data

Open Graph Meta Data (Example)

This article will provide both Shortcode and a WordPress plugin to accomplish what we’ll describe on this page. A fully featured WP plugin is forthcoming so some of this shortcode may become a little redundant.

What the code will do

Using our code, we will:

  • Add custom fields for the page title and description.
  • Automatically populate the custom fields with OG graph information if they’re not defined.
  • Provide a default fallback image to send to networks if you don’t have a WP featured image set.
  • Provide you with the option of using shortcode to define parts of text in your post content that you would like to use as an OG description. This text is then set in your custom field.

Consider this post on Flight . When sent to Facebook (or Google+, or any number of other networks), the OG tags define what information is populated on the destination website.

Using Shortcode to define OG Description

If you would like to use shortcodes to define the open graph description, wrap your desired content in [obd]tags/[obd]. Of course you would wrap it over the lines of text you want to have represented in other networks. That content will then be saved in your description custom field.

Anything wrapped in sc [obd]tags/[obd] will cache data for a month. This is done so you can alter the description once published – perhaps as a means to measure conversions. Of course, you can alter the description text in the custom field at any time.

Whatever description your provide is trimmed to 50 words (based on an average word length of 5 plus one space). While the description element isn’t clearly defined, most social networks seem to truncate your text around the 50 word mark, or 300 characters.

The purpose of the shortcode in the first place was so that different open graph descriptions could be defined for different geographical regions. One lot of text from your article might be more relevant to one region than another, and the shortcode option ensures this is considered. If open graph tags are good for conversions, consider this open graph on steroids. That said, it’s in the future plugin.

A little Bit on Custom Fields

Custom fields in WordPress are awesome. They allow you to associate virtually any type of content with each post. Assuming you’ve enabled ‘custom fields’ in your Screen Options, you will have an option box to add data that’ll be associated with the post you’re creating.

WordPress Custom Fields

WordPress Custom Fields

We’ll create a text box option for the Open Graph title and description.

Default Custom Fields

Default Custom Fields at Post Creation Time

There’s some comprehensive text on the WordPress Codex website if you’re interested in learning more on Custom Fields.

Including the Meta Data in Your Page

The Open Graph Protocol details all the available property types that can be included as meta data on your page. The code below will provide for title and description with a featured image link. In a future version will include more comprehensive data options.

The fields of Internoetics_Post_Title and Internoetics_Post_Description will automatically be available when you create a new post… just fill in the value field.

The Code

Updated: The code for this plugin has been removed. It’ll be replaced by another version here shortly.

WP Plugin

The above code can be downloaded as a basic plugin here. You’ll have to replace the defaultImage.jpg in the images directory. Upload and activate as you would any other WP plugin.

Shortt URL for this post:

Leave a Reply

Your email address will not be published. Required fields are marked *