Open Graph Protocol

logo


Download

Download the free Open Graph Protocol plugin for WordPress.

Description

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

This WordPress plugin is aimed at automating the process of adding basic and optional metadata to a site’s pages. It is also designed to act as a framework for other plugins or themes and allows to modify and adapt the information provided as needed.


Usage

Install and activate the plugin. It will automatically render the following metadata for posts, pages, etc. :

  • og:title : The page’s title is used, this provides the title for posts, pages, archives etc.
  • og:type : The type will be article in general, website for the front page and blog for the blog homepage.
  • og:image : For post types that support featured images, the URL of the featured image is used. Additional metadata og:image:width and og:image:height is added.
  • og:url : The URL of the current page.
  • og:site_name : The name of the site.
  • og:description : Uses the full excerpt if available, otherwise derives it from the content. For author and archive pages, the type of page and title is used.


Filters

This section is for developers. If you’re not a developer, you can safely skip it.

The plugin provides the following filters:

open_graph_protocol_meta

This filter allows to modify the value of the content attribute for a given meta tag. It is invoked for every supported type of metadata.

Parameters:

  • string content – the current value of the content attribute
  • string property – the metadata name, for example og:title

Filters must return:

  • string the desired value of the content attribute

open_graph_protocol_meta_tag

This filter allows to modify the actual HTML <meta> tag that is rendered in the <head> section of pages.

Parameters:

  • string HTML <meta> tag
  • string property – the metadata name, for example og:title
  • string content – the value of the content attribute

Filters must return: – string the desired output for the HTML <meta> tag

open_graph_protocol_metas

This filter allows to add or remove metadata before it is rendered.

Parameters:

  • array of metadata indexed by metadata name

Filters must return: – array of metadata indexed by metadata name

open_graph_protocol_echo_metas

This filter allows to modify the HTML that renders the plugin’s meta tags in the <head> section.

Parameters:

  • string HTML with <meta> tags to be rendered

Filters must return: – string HTML with <meta> tags to be rendered


Why this plugin?

This plugin was created because we needed an extendable way to render meta tags based on the Open Graph protocol, which would allow to modify the meta tag content rendered or add meta tags when appropriate based on external data.

None of the existing plugins provided a sufficiently flexible way of doing that, among other reasons we needed a solution that would comply with all of these requirements and none of the existing solutions does:

  • must be compatible with WordPress 3.5
  • must automatically add meta tags for featured images
  • must be automated and create sensible meta tag content for each page, we don’t want to manually indicate the tag content for every page
  • must provide a framework for extension through hooks and filters on every tag, and provide a design that allows other plugins to modify the meta tags in flexible ways
  • must not ask to provide your Facebook account details or application ID when there is no need for it
  • must not be bloated with features you don’t want or need when you simply want Open Graph metatags to be rendered automatically for your pages

55 comments

  • Anthony

    Looks like another awesome plugin sir!

  • Thanks for this plugin Kento this is one nice Christmas present! easiest facebook open graph plugin I have used yet. I am using it on my website http://johnrlive.com

  • Hi Kento,

    That plugin is exactly what I was looking for, unfortunately it does not add a ög:image tag on my blog http://www.cadcam-blog.de. It’s installed since article http://cadcam-blog.k-magazin.de/?p=6372.

    Any ideas?

    Cheers, Ralf

    • antonio

      Hi,
      Open Graph protocol use for og:image the “featured image”, you must set the featured image’s post/page.

      cheers

  • Hi Antonio,
    problem is my theme doesn’t support featured images, it’s a rather old, but (internally) heavily reprogrammed theme. We look into if we can activate featured images, but it woulsd be nice if the plugin just used the first image in a post when there’s no featured image.

    Take it easy, Ralf

    • antonio

      Hi,
      maybe if you use a featured image, even though the theme doesn’t use it. I’m not sure, but you could try it.

      cheers.

  • Hi Kento,
    this is a great plugin! I’ve just installed it on my blog and it works out of the box.
    But one little issue I have: When I try to publish my homepage on google+ for example it shows my blogname in the description field. Everything is ok on a post page but not on the homepage.

    Can you change this, that the plugin uses the wordpress description field for the open graph description tag?

    Thanks a lot,
    Marc

  • Now I have modified your file
    class-open-graph-protocol-meta.php

    in the function
    public static function wp_head()

    to include the site description if is_home() is true

    } else if ( is_home() ) {
    $description = get_bloginfo( ‘description’ );

    I hope you will integrate this in your plugin.

  • Great plugin! I am wondering, though, how can I make the medium size image or the thumbnail the “default” image. Mostly because my featured image size is really lenghty and looks weird on facebook.
    Thank you so much for an awesome plugin, though!

    • Thank you so much for your kind comment :) One way to achieve this would be using the open_graph_protocol_meta filter on the og:image property (also on the og:image:width and og:image:height properties to set the right dimensions).

      Do you know how to add filter hooks?

      Cheers

  • I love this plugin. Is there a way to get it to generate an open graph tag for “product” instead of “article” – I could just change this in the code I suppose. But my real question is can I make the plugin generate the following tag for Woocommerce

    The price would be whatever the product price is of course. This will help with Pinterest Rich Pins. Thanks!

    • Hey thanks Matt, it’s really so nice to hear that from users! Always appreciated :)

      You don’t need to change anything in the code, it would rather be some kind of extension based on the open_graph_protocol_metas filter that the plugin provides (see details on it on the plugin’s documentation page).

      Oohhh … WooCommerce extension idea ;)

  • Sorry the tag didn’t show up on my first post because I forgot to drop the tags .. I need it to generate meta property=”og:price:amount” content=”15.00″ – where the 15.00 is the price of whatever the product is on the page.

    • Yes, then the filter should really be a good idea. You would just have to pull that data from WooCommerce and add it.

      • I am pretty much a novice with this stuff. I tried adding the code to generate the tag on the product page itself rather than messing with the plugin by trying a couple code variations. I looked thru the code that supposedly generates the price on each product page but I think I have done something wrong. I tried the following two things with no success.

        ?php echo $product->get_price_html(); ?

        and

        ?php echo get_woocommerce_single_product_price(); ?

        One creates white screen of death. The other doesn’t break anything but the tag simply does not generate when I view page source.

        • You should rather use the filter, it seems you are simply trying to output the price somewhere on the product page. The filter will allow you to have the meta tag correctly generated when the others are rendered (at the right place on a page).

  • Bob

    I didn’t see a support category for this so I hope asking here is acceptable.

    Installed the plugin and it worked perfectly first try! Always a good sign. My posts will often not have images. Is there a way to set a default image to be used for the og:image tag that is used when no featured image is specified? Without one, Facebook grabs a theme-related image and I end up advertising Woothemes instead.

    • Sure, this is the right place and your question is very welcome, too :)

      It is possible to set a default image using the filters, but there’s no setting in the user interface, so it would have to be coded as an extension (well not an “extension” really, just a function that implements the filter). Do you know how to use the filters?

  • Gia

    Hello!

    Great plugin –thank you! I am having difficulty getting my custom description to appear for my homepage. It seems like the plugin is only pulling from the surrounding text (which doesn’t exist–it’s only a slider, so the shortcode appears). On other pages, the surrounding text is fine, but I’d like for the custom description to come up on the home page.

    Additionally, I updated the og-logo in my File Manager. How long does it cache usually take for the new image to start appearing?

    Many thanks,
    Gia

    • Hi Gia,

      On the home page it takes the site’s description as the default, with single entries it first looks at the excerpt and if empty, derives it from the content. If you want a specific description, you can try indicating an excerpt and it should use that for the page.

      One thing I’ve noticed and wasn’t aware of before, is that it takes shortcodes and puts them in the description tag ‘as is’. That’s something that could be improved, taken note of it.

      Oh, by the way, there are two entities rendering OG meta tags on your site, one from this plugin and there’s another set. Jetpack? You should have only one rendering those.

      I can’t really say about the image getting updated, but try clearing the site’s cache.

      Thanks for the feedback, this is useful as I’ve discovered the thing with shortcodes in the description thanks to you :)

      Cheers

      • Gia

        Thank you! I’ll try that! Cheers!

      • I’m having the same issue with shortcodes popping up in the descriptions. How would one “indicate an excerpt”?

        • Hi Megan, thanks for reminding me about the issues with the shortcodes appearing. What happens is that it looks in the post content directly and doesn’t apply the rendering process, I think that should be changed in the plugin. It might also be a good idea to at least have it as an option to use the excerpt for the description.

  • Great plugin. Thanks!
    It would be nice if you had a bit of customization.

    Particularly, I would like to be able to choose an OG image – I like to create one that may or may not actually appear on the page, but rather one which is a composite of site images or an attractive summary image to pull people to the page.

    Anyway, awesome job!

    • Many thanks for your feedback! It’s planned to extend the plugin so it allows you to choose a specific image (or none), I think that would be in line with what you’re saying and what others have also suggested.

  • JGendron

    Thanks for your plugin. My WordPress site is now sporting proper og tags.

    Now my problem is the linkedin won’t show a image when I share.

    There troubleshooting site says that they want specifiy width and height also. Specifically this: og:image width > 150 && og:image height > 80

    Is there a way for me to edit this?

    Here is a link to their specifications are here if you choose to help me dig into this problem.

    Thank you.

    Julie

    • Thanks for your feedback Julie, the width and height metas are based on the attachment image width and height and created automatically. Maybe it’s a problem of the validator they use? The meta tags seem to be created fine normally.

  • I think this is exactly what I’m looking for, it instantly fixed my Pinterest sharing however I’m still having trouble with Facebook. I’m VERY new to trying to code my site myself so it’s probably something very easy and small. When I check FB’s debugger, I get this: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fjoshuatrent.com%2Frosemary-sweet-potato-fries%2F
    It’s still pulling the wrong image and saying I don’t have proper meta tags. If anybody out there can help, I greatly appreciate it!

    • Hi Joshua,

      These fries look yummy, 5* from me :)

      But the markup has issues – you should fix what’s causing issues with the markup, for example the ‘Stray end tag head’ validation error, probably some unclosed tags in there?

  • I installed the plug in, but when someone shares to Facebook the words “About SHARE!” appear as the description instead of the actual article description. Click on the below article URL and share it to Facebook, you’ll see what I mean.

    http://www.growmyrevenue.com/3684/how-to-increase-sales-the-smart-way/

    Where is the setting in WP that allows me to set what is pulled for the description? I have NO IDEA where it is getting the text “About SHARE!”

  • I just I want to say thanks
    I been looking over tree hours for a plugin that would work as it does Open Graph Protocol

    Thanks

  • Ian

    This looks like the plugin I’ve been looking for, but I’m at a loss to find the settings option on my dashboard. Am I just being dense?

    • Hi Ian,

      It doesn’t have a settings page (yet) – up to now with what it offers it’s not needed, but the plugin has filters that allow to customize things. If you’d like to have a look at those, see its documentation please.

  • I like the plugin as it’s very simple to use. My problem is that the open graph tags end up in the body instead of the header. Any idea why?

  • I found the problem. While following the steps to use google authorship I added “Google+” to the top of the header.php file above the section. This as it turns out is a bad thing. Moving it down in the file after the corrected the issue.

  • JT

    Any thoughts as to why LinkedIn still doesn’t pull images when sharing WP blog pages that seem to be tagged properly? Thanks in advance for any assistance.

    • It looks like your og:image is correct, have you tried asking them if they know of any issues related to their system not recognizing images?

  • Jan

    Hi there,
    I’ currently building a new website with your OGP plugin and I think I’ve found a bug.

    On 404-pages I get this in the :
    Notice: Trying to get property of non-object in /var/www/html/web200/html/janbrinker_dev/wp-content/plugins/open-graph-protocol-framework/lib/core/class-open-graph-protocol-meta.php on line 67

    And because it’s not wrapped in some tag my visitors would see it at the top of the page.

    I’m running WP 3.8.2 and OGP 1.0.6

  • Kristoffer

    Great plugin! Only problem I have with it is that I have a page with a wordpress shortcode, and the plugin put the shortcode in the og:description-tag, instead of the actual content it generates.

  • Just installed the plugin on our dev site and works great. Is there an easy way to get other tags such as og:author to be pulled in automatically as well?

  • How the heck do I uninstall this plug in from my WordPress blog site? Unlike other plugins, this one does not show an uninstall button.

Leave a comment

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

*

Please follow the Support guidelines.

Premium Support is available for customers in the Forums.