Open Graph and Jetpack

If you use the Jetpack plugin to take advantage of any of its modules you should know that it is also capable of generating Open Graph tags. Ah! you don’t know what they are?

Let’s start there…

What are Open Graph tags

Open Graph tags are code tags that tell the most popular social networks how to show your content to their users.

If you create Open Graph tags, manually or through WordPress plugins, they will be seen in the source code of your pages, posts, products, etc.

<meta property="og:locale" content="EN" />
<meta property="og:type" content="website" />
<meta property="og:title" content="PAGE TITLE/ENTRY" />
<meta property="og:description" content="PAGE DESCRIPTION/ENTRY" />
<meta property="og:url" content="https://wphelp.blog/" />
<meta property="og:site_name" content="WEB NAME" />
<meta property="og:image" content="https://wphelp.blog/wp-content/uploads/2016/07/CONTENT-FEATURED-IMAGE.jpg" />
<meta property="og:image:secure_url" content="https://wphelp.com/wp-content/uploads/2016/07/CONTENT-FEATURED-IMAGE.jpg" />
<meta name="twitter:card" content="summary_large_image" /> //TYPE TWITTER CARD
<meta name="twitter:description" content="PAGE DESCRIPTION/ENTRY FOR TWITTER" />
<meta name="twitter:title" content="PAGE TITLE/ENTRY FOR TWITTER" />
<meta name="twitter:site" content="@wphelp" /> //TWITTER USER ASOCIATED TO CONTENT
<meta name="twitter:image" content="https://wphelp.com/wp-content/uploads/2016/11/CONTENT-FEATURED-IMAGE-FOR-TWITTER.png" />
<meta name="twitter:creator" content="@hectorsn" /> //TWITTER CONTENT CREATORCode language: JavaScript (javascript)

An example of Open Graph tags applied to a shared content in networks would be this…

Why are Open Graph tags important?

Simple, because it is proven that shared links in social networks with an attractive image, title and description get more clicks and better positions in the rankings, then improve your SEO.

How are Open Graph labels created and configured?

If you use a plugin like Yoast SEO it is very easy to generate Open Graph tags by default for the main social networks, in the social SEO section.

And then, in each content, you can also configure them in detail.

You can also configure these settings in other plugins such as Rank Math or All in One SEO Pack.

Does Jetpack also generate Open Graph tags?

Yes, even if you don’t use a SEO plugin, the Jetpack plugin can also generate the Open Graph tags, although it doesn’t do it by default. The good news is that you don’t have to configure anything.

Well, I use Jetpack and I don’t get the image or anything of Open Graph in social networks!

This is because for Jetpack to automatically generate Open Graph tags you must have some social network module active.

You can, for example, activate the module called Publicize.

You don’t need to create any connection to automatically publish your contents in your profiles or social network pages, just activate the module and Jetpack will automatically generate the Open Graph tags of your contents.

Or, if you prefer, they are also automatically generated if you activate the social network sharing icon module.

If I don’t have to configure anything in Jetpack how does it know what to put in each Open Graph tag?

As it turns out, by default, Jetpack will use the following to create the Open Graph tags:

• The Twitter user from the Twitter account settings in the sharing module configuration, the social icons.
• For the og:title tag it will use the title of the post/page.
• For the og:description tag use the extract if you have specified it, and otherwise the first text in your content.
• For the og:image tag it will use the featured image from the post/page, and if you have not set this it will use an image from the galleries, and a random image from the content.

You don’t have such precise settings as those offered by plugins like Yoast, but you can customize something, which is what we will see next.

How to add an Open Graph image by default in Jetpack

There will be many cases where you have not defined a featured image in your entries or pages.

One way to avoid Jetpack showing you in social networks random images that do not contribute anything to the content would be to define a default image, which you choose, that at least has something to do with the content of your website, for example, your logo.

To achieve this you must create this function at the end of the functions.php file of your active theme or in your customization plugin:

function custom_jetpack_default_image() {
    return 'https://wphelp.com/wp-content/uplodas/2020/04/FEATURED_IMAGE_OR_LOGO.jpg';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );Code language: JavaScript (javascript)

In the code you must replace, of course, the URL of the example by the image you want to use.

How to add an Open Graph image to the front page of the website with Jetpack

A special case would be the cover of your website. Well, whether it shows a page or blog entries, it usually doesn’t have a prominent image.

By default, Jetpack will use the logo or icon of the site defined by you in the WordPress customizer, but what if it doesn’t?

In this case you can also define the cover image, for when someone shares your domain URL, with this other code:

function fb_home_image( $tags ) {
    if ( is_home() || is_front_page() ) {
        // Remove default blank image from Jetpack
        unset( $tags['og:image'] );
        $fb_home_img = 'https://wphelp.com/wp-content/uplodas/2020/04/FEATURED_IMAGE_OR_LOGO.jpg';
        $tags['og:image'] = esc_url( $fb_home_img );
    }
    return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );Code language: PHP (php)

Again, replace the sample URL with your own.

How do I deactivate the Jetpack Open Graph tags?

To finish, you may also want to use the Jetpack’s Divulge module but prefer to use the Open Graph tag management offered by your favorite SEO plugin.

In this case you should disable the automatic Open Graph tag generation by Jetpack to avoid the generation of duplicated Open Graph tags.

To do this you must add the following to the functions.php file of the active theme or to a plugin you use for customizations:

add_filter( 'jetpack_enable_open_graph', '__return_false' );Code language: JavaScript (javascript)

Jetpack may not be the ideal plugin to manage Open Graph labels but if you have no other option, or it is your choice, you already know how to create and manage them.

Read this post in Spanish: Open Graph y Jetpack