Tuesday, November 24, 2020
Home Blogging How to Add Facebook Open Graph Meta Data in WordPress Themes

How to Add Facebook Open Graph Meta Data in WordPress Themes

Do you need to add Facebook Open Graph meta knowledge to your WordPress themes?

Open Graph metadata helps Facebook and different social media web sites get meta knowledge about your posts pages. It additionally permits you to management how your content material seems when shared on Facebook.

In this text, we’ll present you the way to simply add Facebook open graph metadata in WordPress themes. We’ll share three completely different strategies, so you possibly can select one which works finest for you.

Add Facebook open graph meta data in any WordPress theme

Method 1. Adding Facebook Open Graph Meta Data with All in One website positioning

All in One website positioning is a standard WordPress website positioning plugin utilized by over 2 million web sites. It permits you to simply optimize your web site for serps in addition to social platforms like Facebook and Twitter.

First, you want to set up and activate the All in One website positioning plugin. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

Upon activation, you want to go to All in One website positioning » Feature Manager web page. From right here you want to activate the ‘Social Meta’ function.

Enable Social Meta feature in All in One SEO

Next, you want to go to All in One website positioning » Social Meta web page. From right here, you possibly can merely fill in the fields to enter your Facebook meta knowledge.

Social meta page allows you to enter Facebook Open Graph meta data

You can begin by offering title, picture, and outline to your homepage.

Below you can set a default picture to be used if an article doesn’t have an open graph picture. You also can present the width and top of the picture.

Set default Open Graph image

Need assist selecting picture sizes? See our full social media cheat sheet for supreme picture sizes that you need to use on all social media platforms together with Facebook.

If your web site is utilizing a Facebook App or has a Facebook web page, then you possibly can present your Facebook app ID in the following part. This permits you to get knowledge for Facebook insights.

Facebook app settings

Optionally, you may also alter settings for Twitter and run a scan to keep away from duplicate Open Graph tags in your web site.

Once you’re finished, don’t overlook to click on on the ‘Update Options’ button to retailer your modifications.

Now that you’ve got set site-wide open graph meta tags, the following step is to add open graph meta knowledge for particular person posts and pages.

By default, All in One website positioning will use your put up title and outline for open graph title and outline. You also can manually set the Facebook thumbnail for every web page and put up.

Simply edit the put up or web page and scroll down to the All in One website positioning part under the editor. From right here, change to the Social tab and fill out open graph meta knowledge. You can set the social media picture right here in addition to title and outline.

Open graph settings for posts and pages

Method 2. Set Facebook Open Graph Meta Data utilizing Yoast website positioning

Yoast website positioning is one other wonderful WordPress website positioning plugin that you need to use to add Facebook open graph meta knowledge into any WordPress web site.

First factor you want to do is set up and activate, the Yoast website positioning plugin. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

You may see : 6 Best WooCommerce Payment Gateways for WordPress

Once activated, you want to go to website positioning » Social and easily test the field subsequent to Add Open Graph meta knowledge.

Enable Facebook Open Graph

You can save your settings or proceed and configure different Facebook social choices on the display screen.

You can present a Facebook app ID in the event you use one to your Facebook web page and insights. You also can change your homepage Open Graph meta title, description, and picture.

Lastly, you possibly can set a default picture to be used when no picture is about for a put up or web page.

Yoast website positioning additionally permits you to set Open Graph metadata for particular person posts and pages. Simply edit a put up or web page and scroll down to the website positioning part under the editor.

Set open graph meta data for post and pages

From right here, you possibly can set Facebook thumbnail for that exact put up or web page. If you don’t set a put up title or description, then the plugin will use your website positioning meta title and outline.

You can now save your put up or web page and the plugin will retailer your Facebook open graph meta knowledge.

Method 3. Manually Add Facebook Open Graph Meta Data into Your WordPress Theme

This technique requires you to edit your theme recordsdata, so just remember to again up your theme recordsdata earlier than making any modifications.

After that merely copy and paste this code in your theme’s features.php file, or in a site-specific plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//Adding the Open Graph in the 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');
//Lets 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:app_id" content="Your Facebook App 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, use a default image
        $default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your 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: Remember to change the Site Name the place it says “Your Site Name Goes Here”. After that, change the default picture URL with the picture of yours. You additionally want to add your personal Facebook app ID, If you don’t have a Facebook app, then you possibly can take away the Facebook app ID line from the code.

We would suggest placing a picture along with your brand there, so in case your put up doesn’t have a thumbnail, then it pulls your web site’s brand.

That’s all you want to do. As quickly as you save your features.php file (or site-specific plugin) it would begin exhibiting Facebook open graph metadata in the WordPress header.

We hope this text helped you add Facebook open graph meta knowledge in WordPress. You may additionally need to see our choose of the finest social media plugins for WordPress to develop your social following, and our troubleshooting information on how to repair the Facebook incorrect thumbnail challenge in WordPress.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

24 Best Online Jobs from Home Without Investment

Do you already know online jobs and work from dwelling jobs have gotten a scorching development after Covid-19. Earlier there have been a handful...

Top 25 Data Entry Jobs from Home Online/Offline: No Investment

Data Entry jobs are actually nice for individuals who need to work from house however not a lot certified. Whether you're a housewife, a...

What is the average salary in India?

Why you should learn about the average salary in India and remainder of the world. It is essential to your profession so it's a must...

Best Courses after 10th Standard

Results for 10th normal are simply being declared throughout India. As pupil or guardian, you should be fearful about greater schooling courses after 10th normal. Nowadays, there...

Recent Comments