Do you wish to add Fb Open Graph meta knowledge to your WordPress themes?
Open Graph metadata helps Fb 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 Fb.
On this article, we’ll present you the best way to simply add Fb open graph metadata in WordPress themes. We’ll share three completely different strategies, so you’ll be able to select one which works finest for you.
All in One SEO is a well-liked WordPress search engine optimisation plugin utilized by over 2 million web sites. It permits you to simply optimize your web site for search engines like google and yahoo in addition to social platforms like Fb and Twitter.
First, it is advisable set up and activate the All in One SEO plugin. For extra particulars, see our step-by-step information on the best way to set up a WordPress plugin.
Upon activation, it is advisable go to All in One SEO» Social Networks web page. Right here you’ll be able to enter your Fb web page URL and all of your different social networks.
Subsequent, click on on the Fb tab on the high of the web page, and also you’ll see that Open Graph Markup is enabled by default. You may click on the “Add or Choose Picture” button to decide on a default Fb OG picture if an article doesn’t have an open graph picture. Should you scroll down, you’ll be able to customise your website identify, description, and extra settings. Don’t neglect to click on the blue Save button when you’re completed making modifications. Now that you’ve set site-wide open graph meta tags, the subsequent step is so as to add open graph meta knowledge for particular person posts and pages. By default, AIOSEO will use your put up title and outline for open graph title and outline. You can too manually set the Fb thumbnail for every web page and put up. Merely edit the put up or web page and scroll all the way down to the All in One SEO part beneath the editor. From right here, swap to the Social tab and also you’ll see a preview of your thumbnail. You may set the social media picture right here in addition to title and outline. Simply scroll all the way down to the Picture Supply area. You may select to make use of the featured picture, add a customized picture, or different choices.
Methodology 2. Set Fb Open Graph Meta Information utilizing Yoast SEO
Yoast SEO is one other glorious WordPress search engine optimisation plugin that you need to use so as to add Fb open graph meta knowledge into any WordPress website.
Very first thing it is advisable do is set up and activate, the Yoast SEO plugin. For extra particulars, see our step-by-step information on the best way to set up a WordPress plugin.
As soon as activated, it is advisable go to search engine optimisation » Social and easily verify the field subsequent to Add Open Graph meta knowledge.
It can save you your settings or proceed and configure different Fb social choices on the display screen.
You may present a Fb app ID in the event you use one in your Fb web page and insights. You can too change your homepage Open Graph meta title, description, and picture.
Lastly, you’ll be able to set a default picture for use when no picture is ready for a put up or web page.
Yoast SEO additionally permits you to set Open Graph metadata for particular person posts and pages. Merely edit a put up or web page and scroll all the way down to the search engine optimisation part beneath the editor.
From right here, you’ll be able to set Fb thumbnail for that specific put up or web page. Should you don’t set a put up title or description, then the plugin will use your search engine optimisation meta title and outline.
Now you can save your put up or web page and the plugin will retailer your Fb open graph meta knowledge.
Methodology 3. Manually Add Fb Open Graph Meta Information into Your WordPress Theme
This methodology requires you to edit your theme information, so just be sure you again up your theme information earlier than making any modifications.
After that merely copy and paste this code in your theme’s capabilities.php file, or in a site-specific plugin.
[php]
//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 );
[/php]
Word: Keep in mind to vary the Website Title the place it says “Your Website Title Goes Right here”. After that, change the default picture URL with the picture of yours. You additionally want so as to add your personal Fb app ID, Should you don’t have a Fb app, then you’ll be able to take away the Fb app ID line from the code.
We’d advocate placing a picture along with your brand there, so in case your put up doesn’t have a thumbnail, then it pulls your website’s brand.
That’s all it is advisable do. As quickly as you save your capabilities.php file (or site-specific plugin) it’s going to begin exhibiting Fb open graph metadata within the WordPress header.
Read More