facebook open graph

How to add Facebook Open Graph Metadata in Flatsome Powered Site

Sharing content on social media is a common method to attract attention to a website. You may be wondering how to make your content more shareable, clickable, and noticeable on social media.

It’s not a secret that Facebook has become a major traffic driver for all types of websites. Nowadays, even large companies direct consumers toward their Facebook pages instead of the business site directly.

There are like and recommend widgets on almost every website. But one problem we have noticed with sharing URL is that you have no control over how your content appears when shared on Facebook.

It happens when Facebook doesn’t receive the right information. In some cases, FB doesn’t grab the correct thumbnail image during the automatic updates when an article is published.

In this tutorial, we will show you how to add Facebook Open Graph metadata in Flatsome powered site.

What is Facebook Open Graph metadata

The Open Graph protocol connects website content to Facebook by creating graph objects. It pulls metadata from the post to display on its system.

Through the Open Graph protocol, you can tell Facebook how your shared content should be displayed on Facebook. The protocol tells Fb that which title, image, URL, and description of your page or blog post should be used when shared.

Basic WordPress Open Graph tags

There are a lot of Open Graph properties. But only four protocols are required for Facebook to understand the basics of your page.

1. Og: title – This tag is used to share the tile of your article on the social media network (e.g., ‘WooCommerce Variation Swatches’).

2. Og: image – The open graph title tag can preview the image of your blog post. It represents the content.

3. Og: type – The type of object you are sharing, (e.g., article, video, etc.)

4. Og: URL – The URL of the content, (e.g., https://storepress.com/woocommerce-variation-swatches/ )

Benefits of Facebook Open Graph

So why would you take the trouble to set up and configure Open Graph metadata or tags?

Main benefits are:

  • Help in your brand visibility through search.
  • They tell people what the content is about at a glance.
  • Allow you to control how your content is seen on social media.
  • Help to make content more sys-catchy in social media feeds.

How to add Facebook Open Graph metadata in Flatsome

To add Open Graph data to your WooCommerce site, you can follow both manual methods or use a plugin.

Method 01: Add manually into your Flatsome theme

This method needs you to edit your theme files. So, make sure that you backup your theme files before making any changes.

After that, copy and paste this code into your functions.php file or a site-specific plugin.

//Adding the Open Graph in Language Attributes

function add_opengraph_doctype( $output ) {

return $output . ‘ xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”‘;

}

add_filter(‘language_attributes’, ‘add_opengraph_doctype’);

// Let’s add Open Graph Meta Info

function insert_fb_in_head() {

global $post;

if ( !is_singular()) //if it is not a post or(a page)

return;

echo ‘<meta property=”fb:admins” content=”YOUR USER ID”/>’;

echo ‘<meta property=”og:title” content=”‘ . get_the_title() . ‘”/>’;

echo ‘<meta property=”og:type” content=”article”/>’;

echo ‘<meta property=”og:url” content=”‘ . get_permalink() . ‘”/>’;

echo ‘<meta property=”og:site_name” content=”Your Site NAME Goes HERE”/>’;

if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image just use a default image

$default_image=”http://example.com/image.jpg”; //Just replace with a default image on the server or (image in media library)

echo ‘<meta property=”og:image” content=”‘ . $default_image . ‘”/>’;

}

else{

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘medium’ );

echo ‘<meta property=”og:image” content=”‘ . esc_attr( $thumbnail_src[0] ) . ‘”/>’;

}

echo “

“;

}

add_action( ‘wp_head’, ‘insert_fb_in_head’, 5 );

Note: change the site name where it says “Your Site Goes Here”. Change the default image URL with the image of yours. We recommend you to add an image with your logo there so if your post does not have a thumbnail then it pulls your website’s logo. Then add your own Facebook app ID. You can remove the FB app ID line form the code if you don’t have a FB app.

That’s all you require to do. As soon as you save your functions.php file or site-specific plugin, it will start displaying FB open graph meta data in the WordPress header.

Method 2: Using Yoast SEO plugin

Yoast SEO is one of the most comfortable WordPress social sharing options to use for Open Graph. It is an excellent useful tool to create optimized content, sitemaps, and more.

The first thing you need to do is install and activate the Yoast SEO plugin.

For that, you need to install and activate the Insert Headers and Footers plugin. To learn how to install a plugin, we have created a tutorial that explains it step by step.

Once the plugin is activated, the SEO feature will be added on the left screen.

Navigate to Facebook tab from Social under SEO menu.

Then enable the checkbox next to Add Open Graph metadata. 

You can save your settings or continue to configure other Facebook social options on the screen. Click on Save changes button once done.

If you use your Facebook page and insights, you can provide a Facebook app ID. Moreover, you can change your homepage Open Graph meta title, description, and image. Lastly, you can change a default image to be used when no image is set for a page or post.     

Yoast SEO plugin also allows you to set Open Graph metadata for individual pages or posts. You need to edit a post or page and scroll down to the SEO section below the editor.

From this screen, you can set a thumbnail for Facebook for a particular page or post.

Note: The plugin will use your SEO meta title and description if you don’t set a post title or description.

Open Graph data are important for your social media presence. But there’s no need to spend a lot of time on them. Just try to focus on getting the basics including tags, social media previews and etc.

If you need more tutorials on Flatsome theme or WooCommerce, let me know in the comment section. I’ll write the next tutorial for you.