Sharing is Caring! We heard this word all over the place, however before to care, the look and show of your posts should looks appealing and eye Snappy.
At that point, people Will tap on the connection and enter the site to get data.
But, as of now if we share the website links in Facebook, it looks like below image:
You can see the very small image, which looks not so attractive. If a people view the below post, there is less opportunity to get snaps and likes for this Sharing.
So here comes a solution for this as Open graph Protocol. By using these OG tags, an immense effect will occur on your click-through-rate.
What is Open Graph Protocol?
Open Graph Protocol was structured by Facebook and now it’s under Open Web Foundation, for sharing your website, App information in a social graph of rich text .
On the F8 Developer Conference, CEO of Facebook Mark Zuckerberg has conveyed the 3 new features, one of that is about Open Graph Protocol.
These open graphs are added to your website through Meta Tags or plugins. By this protocol added on your site, you can make post/site as specified display size for image, title & description etc…in facebook.
Before adding Open Graph protocol to your site, if you share your site, posts in Facebook, it looks like above image as mentioned earlier.
Once if you add your OG tags in your site, it looks like below:
You can even set the different picture size to show according to your desire.
Example:
<meta property=”og:image:width” content=”450″>
<meta property=”og:image:height” content=”450″>
<meta property=”og:image:type” content=”image/jpg” />
Examples of Open Graph Meta Tags in Website:
Below are the example of an Open Graph Protocol in Meta tag under Header section, which will create a graph object of your webpage.
<meta property=”og:title” content=”Title of the Site”/>
<meta property=”og:type” content=”blog”/>
<meta property=”og:url” content=”http://www.sample.com/blog/”/>
<meta property=”og:image” content=”http://www.sample.com/blogimg.jpg”/>
<meta property=”og:site_name” content=”My Site Name”/>
<meta property=”fb:app_id” content=”1234567890987654321″/>
<meta property=”og:description” content=”A short description of site profile.”/>
How to implement Open Graph for Static Website:
Do you need to add open graph in static website? So, first copy the above Meta tags and paste it on the Header section of the each page where you want to add.
(Under <head>….</head>)
How to implement Open Graph for WordPress Website:
If you run WordPress site, it’s quite easy to install Open Graph Protocol by WordPress SEO Plugin.
Just Click the link to Download the Plugin – Download
Once you have installed & activated the plugins,
- Switch to SEO–>Settings tab
- Make a click on the checkbox ‘Add Open Graph Meta Data‘
- Input the Facebook Admin ID
- Then Click on ‘add Facebook Admin Button‘ if you required
- Save the changes .
By empowering the above strategy, you can effectively introduce the Open Graph Protocol in wordpress site.
How to implement Open Graph for Dynamic Website:
If you wanna include open graph protocol in dynamic websites, it’s quite different. You can find the header file that might be included in every page sites.
Here you can’t add the above code like that, because title, image,… Varies accordingly in different pages, but theme file will have only one header file.
For Example,
Homepage may have diverse title & image whereas Blog Page has distinctive title, picture. If you add the above code in dynamic site, then for every page of Your image, title.. might be same, which is irrelevant.
To add in dynamic site, follow these steps:
1. Create a Facebook Page if you dn’t have already .If you have already just log in.
2. After creating the page, you will get the Facebook Admin ID. Make a note of it.
3. Then open the header file (header.php) in your website theme folder, and paste the below before the tag
xmlns=”https://www.w3.org/1999/xhtml”
xmlns:og=”https://ogp.me/ns#”
xmlns:fb=”https://www.facebook.com/2008/fbml”
4. Go to function file (function.php) in your site and paste the below code at the bottom .
function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\'”]([^\'”]+)[\'”].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = “/images/default.jpg”;
}
return $first_img;
}
By doing this, it automatically fetches the first image of your page and display it on Facebook, when you shared the link.
Or
Another Method:
Add the below code in the functions.php file
//Adding the Open Graph Protocol
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’);
//Open Graph Meta Information
function insert_fb_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
echo ”;
echo ”;
echo ”;
echo ”;
echo ”;
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
$default_image=”http://example.com/sample.jpg”; //replace this with a default image on your server or an image in your media library
echo ”;
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘medium’ );
echo ”;
}
echo “
“;
}
add_action( ‘wp_head’, ‘insert_fb_in_head’, 5 );
Make a change on the User ID & Site name of yours, and save the changes.
We can identify the Facebook ID by https://graph.facebook.com/FB Page Name
(Replace FB page name as your name)
Check/Debug Your Open Graph (OG) Tags:
Test the OG tags implemented properly or not by the debugger tool provided by Facebook
https://developers.facebook.com/tools/debug/
Copy and Paste the above link in the URL , you might get what page it displays and which content can be fetched from the page and what type of errors you are getting.
Check whether a Website has Open Graph Protocol Included:
- Open the site which you need to check.
- Right click and go to the View page source.
The following type of code (not exact but similar) will be visible on the page.
If it so, the page has OG tags included on it.
