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 with open graph metadata. You can take help from any social media plugin for WordPress to enhance your content visibility.

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 URLs is that you have no control over how your content appears when shared on Facebook according to open graph metadata.

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 to 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 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 title 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 and if you don’t know how to start a blog website, You can jump to the next article.

See also  9+ Best WordPress WooCommerce Auction Themes of 2023

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?

The main benefits are:

  • Help in your brand visibility through search and you can see analytics with the help of search console insight.
  • 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 essential plugins for WordPress.

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. It will be better if you use a child theme for the customization theme, if you don’t know how to create a child theme on WordPress, you can proceed with our other articles.

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)

See also  Best 10 WordPress Translation Plugin 2023

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 your image of yours. We recommend you 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 from 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 metadata 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 for creating 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. Although the best WooCommerce SEO plugin does similar work for ranking, Yoast has different features.

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

Navigate to the Facebook tab from Social under the 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 the 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. You can also duplicate pages in WordPress so that you can utilize this function well.

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.

Subscribe To Our Newsletter!
Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

Fintech’s biggest hits and misses of 2023

As 2023 comes to a close, we’re here to look back at the biggest fintech stories of the year. Silicon Valley Bank’s implosion felt like a fintech…

It’s critical to regulate AI within the multi-trillion-dollar API economy

Alex Akimov Contributor With two decades of tech leadership experience, Alex Akimov, former head of API at Adyen, now revolutionizes embedded finance at Monite by building best-in-class…

EU’s provisional deal on gig worker rights fails to get enough backing from Member States

Not so fast on that Christmas present for precarious gig workers in the EU: A political deal announced mid month, which aims to bolster platform workers rights…

Arduino exploring India manufacturing to limit counterfeit sales

Arduino is considering manufacturing in India. The startup, best known for its open source microcontroller boards, hopes to restrict the rise of counterfeit boards and cater to…

Top robotics names discuss humanoids, generative AI and more

Last month, I took an extended break. In a bid to keep my robotics newsletter Actuator (subscribe here) up and running, however, I reached out to some…

Pornhub owner pays US government $1.8M to resolve sex trafficking probe

Pornhub’s parent company Aylo Holdings will pay $1.8 million to the U.S. government to resolve a charge of profiting off of sex trafficking. The company, formerly known…