itthinx

<p>The <a href="https://ogp.me/" rel="nofollow ugc">Open Graph protocol</a> 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.</p>
<p>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.</p>
<p>If you find this plugin useful and would like to support our work, you can do so by purchasing in our <a href="https://www.itthinx.com/shop/" rel="nofollow ugc">Shop</a>, thank you!</p>
<p>Supports <a href="https://wordpress.org/plugins/woocommerce/" rel="ugc">WooCommerce</a> to include essential product metadata on product pages.</p>
<h3>Usage</h3>
<p>Install and activate the plugin. It will automatically render the following metadata for posts, pages, etc. :</p>
<ul>
<li><code>og:title</code> : The page’s title is used, this provides the title for posts, pages, archives etc.</li>
<li><code>og:type</code> : The type will be <code>article</code> in general, <code>website</code> for the front page and <code>blog</code> for the blog homepage.</li>
<li><code>og:image</code> : For post types that support featured images, the URL of the featured image is used. Additional metadata <code>og:image:width</code>, <code>og:image:height</code>, <code>og:image:url</code>, <code>og:image:secure_url</code> and <code>og:image:alt</code> are added.</li>
<li><code>og:url</code> : The URL of the current page.</li>
<li><code>og:site_name</code> : The name of the site.</li>
<li><code>og:description</code> : 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.</li>
<li><code>og:locale</code> : The current locale.</li>
<li><code>og:locale:alternate</code> : Indicates additional locales available with <a href="https://wpml.org/" rel="nofollow ugc">WPML</a> and <a href="https://wordpress.org/plugins/polylang/" rel="ugc">Polylang</a>.</li>
</ul>
<p>The content of the <code>og:image:alt</code> property is based on the Alt Text of the featured image, the image’s Caption in lack thereof, or ultimately the image’s Description in lack of the latter. If any of those are empty, the property is not rendered.</p>
<h3>Filters</h3>
<p>This section is for developers. If you’re not a developer, you can safely skip it.</p>
<p>The plugin provides the following filters:</p>
<h4><code>open_graph_protocol_meta</code></h4>
<p>This filter allows to modify the value of the <code>content</code> attribute for a given meta tag.<br />
It is invoked for every supported type of metadata.</p>
<p>Parameters:</p>
<ul>
<li><code>string</code> <code>content</code> – the current value of the <code>content</code> attribute</li>
<li><code>string</code> <code>property</code> – the metadata name, for example <code>og:title</code></li>
</ul>
<p>Filters must return:</p>
<ul>
<li><code>string</code> the desired value of the <code>content</code> attribute</li>
</ul>
<h4><code>open_graph_protocol_meta_tag</code></h4>
<p>This filter allows to modify the actual HTML <code><meta></code> tag that is rendered in the <code><head></code> section of pages.</p>
<p>Parameters:</p>
<ul>
<li><code>string</code> HTML <code><meta></code> tag</li>
<li><code>string</code> <code>property</code> – the metadata name, for example <code>og:title</code></li>
<li><code>string</code> <code>content</code> – the value of the <code>content</code> attribute</li>
</ul>
<p>Filters must return:</p>
<ul>
<li><code>string</code> the desired output for the HTML <code><meta></code> tag</li>
</ul>
<h4><code>open_graph_protocol_metas</code></h4>
<p>This filter allows to add or remove metadata before it is rendered.</p>
<p>Parameters:</p>
<ul>
<li><code>array</code> of metadata indexed by metadata name</li>
</ul>
<p>Filters must return:</p>
<ul>
<li><code>array</code> of metadata indexed by metadata name</li>
</ul>
<h4><code>open_graph_protocol_echo_metas</code></h4>
<p>This filter allows to modify the HTML that renders the plugin’s meta tags in the <code><head></code> section.</p>
<p>Parameters:</p>
<ul>
<li><code>string</code> HTML with <code><meta></code> tags to be rendered</li>
</ul>
<p>Filters must return:</p>
<ul>
<li><code>string</code> HTML with <code><meta></code> tags to be rendered</li>
</ul>
<h4><code>open_graph_protocol_framework_ext</code></h4>
<p>This filter allows to determine whether additional meta tags should be produced for supported integrations.</p>
<p>Parameters:</p>
<ul>
<li><code>boolean</code> whether to process the integration</li>
<li><code>string</code> the integration</li>
</ul>
<p>Filters must return:</p>
<ul>
<li><code>boolean</code> whether to process additional meta tags for the integration</li>
</ul>
<h3>Why this plugin?</h3>
<p>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.</p>
<p>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:</p>
<ul>
<li>must be compatible with WordPress 3.5</li>
<li>must automatically add meta tags for featured images</li>
<li>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</li>
<li>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</li>
<li>must not ask to provide your Facebook account details or application ID when there is no need for it</li>
<li>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</li>
</ul>
<h3>Logo Attribution</h3>
<p>The logo used for this plugin’s icon and banner is the <a href="https://commons.wikimedia.org/wiki/File:Open_Graph_protocol_logo.png#/media/File:Open_Graph_protocol_logo.png" rel="nofollow ugc">Open Graph protocol logo</a> by Facebook – <a href="https://ogp.me" rel="nofollow ugc">ogp.me</a>. Licensed under Public Domain via <a href="https://commons.wikimedia.org/wiki/" rel="nofollow ugc">Wikimedia Commons</a>.</p>
<h3>Validators</h3>
<p>To test the generated metadata you can use several tools, among those:</p>
<ul>
<li><a href="https://cards-dev.x.com/validator" rel="nofollow ugc">X Card Validator</a></li>
<li><a href="https://developers.facebook.com/tools/debug/" rel="nofollow ugc">Meta Sharing Debugger</a></li>
</ul>


Open Graph Protocol Framework

Quick and dirty, this plugin does the job. Activate it and the tags will start showing up in the markup and sharing on facebook becomes more completed. So that is great, that it requires no skill to get where you want to go.

But then you start realizing that a bunch of other stuff no longer works on your site like Woocommerce notices, or you start seeing any add_actions that you added to templates doubling up. 

This plugin calls the full apply_filters on the_content when it renders which makes everything within that stack fire twice causing anomalies which are very hard to track down.

In closing: This plugin will probably work great for you if you have a vanilla site without too much customization. If you have a complex site with things like Woocommerce it's not a good fit.



Works but too invasive.

The Open Graph Protocol enables any web page to become a rich object in a social graph. This plugin renders meta tags within an extension framework.

Alex MacArthur

<p>There’s no shortage of plugins that promise to be THE all-in-one solution for all things SEO. Unfortunately, this often means lack of flexibility, confusing implementation, or just a big, bloated plugin that carries way too many features for your needs.</p>
<p>This plugin is built on an alternative philosophy: do one thing and one thing well. Complete Open Graph provides automatic, comprehensive, just-makes-sense Open Graph management, whether it’s for a simple blog or a complex site with diverse sets of content.</p>
<p>Out of the box, Complete Open Graph generates all the basic tags your site should have, making it ready for social sharing on platforms including Twitter, Facebook, LinkedIn and Google+, and gives you full programmatic access to filter this data as you need.</p>
<p>TL;DR: This plugin does Open Graph. Freaking good Open Graph.</p>
<h3>Using the Plugin</h3>
<p>Upon activation, Complete Open Graph is ready to generate Open Graph meta tags, with an intuitive set of fallbacks in place. Literally no configuration is required to begin making your site socially shareable.</p>
<h4>Available Fields</h4>
<p>On each page and post, the following fields are automatically generated, based on available page data. Many of these can be manually set at the page/post level.</p>
<ul>
<li>og:site_name</li>
<li>og:locale</li>
<li>og:type</li>
<li>og:title</li>
<li>og:url</li>
<li>og:description</li>
<li>og:image</li>
<li>og:image:width</li>
<li>og:image:height</li>
<li>twitter:card</li>
<li>twitter:creator</li>
<li>twitter:title</li>
<li>twitter:description</li>
<li>twitter:image</li>
<li>twitter:url</li>
<li>twitter:site</li>
<li>profile:first_name (Currently only displayed on individual author pages.)</li>
<li>profile:last_name (Currently only displayed on individual author pages.)</li>
</ul>
<h4>Default Settings</h4>
<p>As a fallback for values that aren’t filled automatically by a page or post, you can set default values for Open Graph data. If desired, you can force these individual values to be used globally, overriding whatever is set at a page/post level. You’re able to force individual fields, or force all of them at once.</p>
<ul>
<li>og:type</li>
<li>og:title</li>
<li>og:image</li>
<li>og:image:width</li>
<li>og:image:height</li>
<li>og:description</li>
<li>twitter:card</li>
<li>twitter:description</li>
<li>twitter:creator</li>
<li>twitter:site</li>
<li>fb:admins</li>
<li>fb:app_id</li>
</ul>
<h3>Filters</h3>
<p>The <code>complete_open_graph_all_data</code> filter allows the customization of the entire set of Open Graph values, as well as the addition of new meta tags (including those that aren’t Open Graph).</p>
<p>Example for customizing out-of-the-box Open Graph data:</p>
<pre><code>function modify_open_graph_data($data) {
  $data['og:site_name']['value'] = 'whatevs';
  return $data;
}
add_filter('complete_open_graph_all_data', 'modify_open_graph_data');
</code></pre>
<p>Example for adding a standard, old meta tag:</p>
<pre><code>function add_new_open_graph_fields($data) {
    $data['keywords']['attribute'] = 'name';
    $data['keywords']['value'] = 'keyword1,keyword2,keyword3';
    return $data;
}
add_filter('complete_open_graph_all_data', 'add_new_open_graph_fields');
</code></pre>
<p>The <code>complete_open_graph_processed_value</code> filter allows you to modify a single field after it’s gone through the progression of priorities. For that reason, it will only be effective on the following fields:</p>
<ul>
<li>og:description</li>
<li>og:title</li>
<li>og:type</li>
<li>og:image</li>
<li>twitter:card</li>
<li>twitter:title</li>
<li>twitter:image</li>
<li>twitter:description</li>
<li>twitter:creator</li>
</ul>
<p>Example for manipulating a processed value:</p>
<pre><code>function manipulate_processed_value($value, $field_name) {
    if($field_name === 'og:description') {
        return 'WHATEVER I WANT.';
    }
    return $value;
}
add_filter('complete_open_graph_processed_value', 'manipulate_processed_value', 10, 2);
</code></pre>
<p>The <code>complete_open_graph_{$tagName}</code> filter allows you to modify a single field by identifying it by name and returning a modified value. These names are the “name” or “property” attributes on the meta tags. See “Available Fields” above for these names.</p>
<p>Example for manipulating a single value by name:</p>
<pre><code>function modify_title($value, $field_name) {
    return 'My Newly Modified Title!'
}

add_filter('complete_open_graph_og:title', 'modify_title', 10, 2);
</code></pre>
<p>The <code>complete_open_graph_maybe_enable</code> filter allows you to disable tag generation altogether by returning a boolean.</p>
<p>Example for disabling generation altogether:</p>
<pre><code>add_filter('complete_open_graph_maybe_enable', '__return_false');
</code></pre>
<p>Example for disabling generation on a specific page:</p>
<pre><code>add_filter('complete_open_graph_maybe_enable', function ($maybeEnable) {
    global $post;

    if($post->post_name === 'my-page') {
        return false;
    }

    return $maybeEnable;
});
</code></pre>
<h3>Order of Priority</h3>
<p>There’s a fallback system set in place for you to effectively leverage this plugin. Below is the order of priority:</p>
<ol>
<li><em>Filters</em> – Any filters you apply in your code will take priority over any fields you have filled in the admin.</li>
<li><em>Forced Global Settings</em> – If you’ve checked the box on these fields on the settings page, they’ll override everything non-filtered.</li>
<li><em>Post/Page COG Fields</em> – Filling out the meta box fields on a page or post in the WordPress Admin will give it priority over any default settings (unless they’re forced).</li>
<li><em>Post/Page Content</em>  – If no specific COG fields on the post/page are set, the post/page content itself will be used. For the Open Graph description, the excerpt will be respected if it’s filled.</li>
<li><em>Default COG Settings</em> – Next, the default COG global settings will used to populate Open Graph tags.</li>
<li><em>Blog Info</em> – When nothing else is overriding them, Open Graph fields will default to your general WordPress site settings.</li>
</ol>
<p>After flowing through this order of priority, if there is still no content to be pulled, those respective Open Graph tags will not be generated. So, don’t worry about having extra, useless tags just sitting there in your markup.</p>
<h3>Feedback</h3>
<p>You like it? <a href="mailto:alex@macarthur.me" rel="nofollow ugc">Email</a> or <a href="https://www.twitter.com/amacarthur" rel="nofollow ugc">tweet</a> me. You hate it? <a href="mailto:alex@macarthur.me" rel="nofollow ugc">Email</a> or <a href="https://www.twitter.com/amacarthur" rel="nofollow ugc">tweet</a> me.</p>
<p>Regardless of how you feel, your review would be greatly appreciated!</p>


Open Graph Protocol Framework vs Complete Open Graph