Open Graph Protocol Framework

Download

Download the free Open Graph Protocol Framework 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

64 Responses to Open Graph Protocol Framework

  1. Anthony December 20, 2012 at 2:31 am #

    Looks like another awesome plugin sir!

  2. kento December 26, 2012 at 1:33 am #

    It’s hosted on WordPress.org now Open Graph Protocol Framework.

  3. John January 1, 2013 at 10:04 pm #

    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

    • kento January 3, 2013 at 3:52 pm #

      Cool :) Thanks for using it!

  4. Ralf March 14, 2013 at 3:19 pm #

    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 March 15, 2013 at 7:48 am #

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

      cheers

  5. Ralf March 15, 2013 at 10:11 am #

    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 March 18, 2013 at 11:12 am #

      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.

  6. Marc May 11, 2013 at 2:36 pm #

    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

  7. Marc May 11, 2013 at 4:20 pm #

    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.

    • kento May 13, 2013 at 9:39 am #

      Thanks Marc, I’ll review it and include the appropriate changes :)

  8. Louise June 8, 2013 at 2:12 pm #

    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!

    • kento June 11, 2013 at 1:18 pm #

      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

  9. Matt July 23, 2013 at 3:11 pm #

    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!

    • kento July 26, 2013 at 8:31 pm #

      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 😉

  10. Matt July 23, 2013 at 3:45 pm #

    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.

    • kento July 26, 2013 at 8:32 pm #

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

      • Matt July 26, 2013 at 9:14 pm #

        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.

        • kento July 31, 2013 at 3:18 pm #

          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).

  11. Bob August 8, 2013 at 8:58 pm #

    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.

    • kento August 12, 2013 at 7:25 pm #

      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?

      • Olivier Compagne May 24, 2015 at 9:39 am #

        Hi Kento, and thank you for your plugin. I have the same need as Bob to set a default image for all the pages that don’t have one. Unfortunately I don’t know how to use the filters… I’m quite tech savvy in general, so if you could point me to the right direction — if not tell me how to do from A to Z — that’d be super helpful. :)

        • kento May 25, 2015 at 6:56 pm #

          Hi Olivier,

          I haven’t had a chance to take a look at this, so I can’t really point you towards a direct solution other than what I’ve indicated about using the filters. I’d really have to take the time to draft a solution based on that … anyhow, the best would be to allow to choose an image through the user interface. Maybe that would make more sense in general.

          I’d be happy to hear more feedback on the idea :)

        • Tony August 16, 2015 at 12:17 pm #

          try this…

          add_filter(‘open_graph_protocol_metas’,’open_graph_protocol_default_image’);
          function open_graph_protocol_default_image($metas) {
          if (!isset($metas[‘og:image’])) {
          $metas[‘og:image’] = ‘http://mysites.com/logo-images.jpg’;
          $metas[‘og:image:width’] = ‘600’;
          $metas[‘og:image:height’] = ‘600’;
          }
          return $metas;
          }

  12. Gia September 20, 2013 at 1:04 pm #

    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

    • kento September 28, 2013 at 11:24 am #

      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 October 3, 2013 at 3:15 pm #

        Thank you! I’ll try that! Cheers!

      • Megan June 22, 2014 at 3:25 pm #

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

        • kento June 25, 2014 at 4:32 pm #

          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.

  13. Glasgow Gym October 11, 2013 at 7:46 am #

    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!

    • kento October 19, 2013 at 7:38 pm #

      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.

  14. JGendron October 17, 2013 at 5:50 am #

    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

    • kento October 19, 2013 at 8:21 pm #

      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.

  15. Joshua Trent November 4, 2013 at 8:41 pm #

    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!

    • kento November 7, 2013 at 10:11 pm #

      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?

  16. Denise Solan November 13, 2013 at 4:54 am #

    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!”

    • kento November 18, 2013 at 6:20 pm #

      It looks in various places, first place for a post is the excerpt, is it that?

  17. william December 14, 2013 at 7:26 pm #

    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

    • kento December 15, 2013 at 11:22 am #

      Many thanks William :)

      If you can spare a couple of minutes you can also post a review, I appreciate the feedback.

  18. Ian January 9, 2014 at 11:48 am #

    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?

    • kento January 9, 2014 at 4:25 pm #

      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.

  19. Brad February 9, 2014 at 4:47 am #

    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?

    • kento February 13, 2014 at 12:02 pm #

      Thanks Brad, I’ve had a quick look on a page but can’t see any of the og:* tags in the body.

  20. Brad February 13, 2014 at 3:40 pm #

    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.

    • kento February 14, 2014 at 10:19 am #

      Perfect, thanks for the update on that.

  21. JT March 15, 2014 at 7:12 pm #

    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.

    • kento March 26, 2014 at 9:42 am #

      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?

  22. Jan April 9, 2014 at 2:00 pm #

    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

    • Jan April 9, 2014 at 2:02 pm #

      *Inside the head-tag.
      And you don’t sanitize your comment-inputs 😉

      • kento April 15, 2014 at 7:09 pm #

        Not sanitized? Enlighten me please :)

    • kento April 15, 2014 at 7:09 pm #

      Many thanks for pointing that out, fixed in 1.0.7 just released.

  23. Kristoffer April 11, 2014 at 9:44 am #

    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.

    • kento April 15, 2014 at 6:29 pm #

      Thanks Kristoffer :)

      What shortcode and plugin are you using please?

  24. Luis April 25, 2014 at 11:59 am #

    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?

  25. Mary Austin July 13, 2014 at 8:04 pm #

    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.

    • antonio July 14, 2014 at 8:41 am #

      Hi,
      you must deactivate it, then you should have a “Delete” button.
      cheers

  26. CL January 27, 2015 at 9:19 am #

    Hi. I want to use your plug-in, but I’m not sure if it will work for me. I do not use featured image. Have you updated the plug-in to allow us to choose an image from our media file or from the post? Thank you!

    • kento January 28, 2015 at 10:01 am #

      Hi, thanks for asking, this hasn’t been included yet but is pending implementation.

  27. Jessica May 3, 2015 at 9:13 pm #

    When I post a link (http://www.eighty20paleo.com/mornings/baked-goods/orange-cranberry-muffins) on Facebook, the description doesn’t have any punctuation showing up (here is the description -“There is just something about a orange cranberry muffin that I absolutely love Maybe it s the fact that I love muffins for breakfast or maybe it s just because I…”)

    Do you have any idea whats going on? And how to fix it? Thanks.

    • kento May 10, 2015 at 10:18 am #

      Hi Jessica,

      Looks ok here – maybe it was a filter from some other plugin?

      Cheers

  28. Zachary C May 7, 2015 at 6:02 pm #

    Hello! Is there a way to remove the site_name from the feature title (or put a divider like | between the title and site name?)

    Right now on Facebook a link will include the feature’s Headline + Site Name without a space/division.

    Thanks!

    Z

    • kento May 10, 2015 at 10:34 am #

      Hi,

      I’ve tried it on this post http://sprudgewire.com/?p=452 but don’t seem to get the same thing you describe, looks ok here. Have you changed anything since then?

      Cheers

Leave a Reply