Open graph meta data, Facebook and other social media websites, which helps the data on your post pages. It will also allow you to control how your content will appear when it shared on Facebook?
Social networking is the right way for your website which can bring huge amount of traffic. Social is all about visuals. So if you want your content to work well then you need to use all the right visual cues.
But how can you ensure that the imagery you want is being used correctly?
How can you be in control when you share your content instead of selecting an image for you on a random topic when you are using your social choice on the network?
Both theme and plugin in can actually automate it. But that move is a killer because you lose control. On the other hand, you should decide. This requires you to make recommendations for social networks so that it knows what you want to show? And to do this you will need to use a language social network to understand. The language is called Open Graph.
In this article we will discuss various ways to install Open Graph on your WordPress website.
How does the graph work?
To make Open Graph work properly, you need to add some meta tags to the header of your HTML to WordPress. This is where information about your webpage is stored. Not visible to users. Each meta tag follows a key format. You provide a termination content value.
After you do this, third party services, different social media platforms, can use this information to display your content in a more meaningful way.
Some of these platforms have a proprietary way of collecting this information such as Twitter cards, but most use open graphs as a baseline for information. That is why the page has a user.
By adding just, a little data about it, you can make sure that when your URL is copied and pasted into the social field it comes with a custom, image description and more.
Steps to Add Facebook Open Graph Meta Tags to WordPress Themes
Add Facebook Open Graph Meta Data with WordPress SEO help.
WordPress SBI helps you to add title and meta details. This is the complete site optimization package for Word Press. It is equipped with social features including the ability to add Facebook open graph meta data to the Word Press theme.
First install and activate WordPress SEO through Yoast plug-in.Yoast SEO plug-in makes it very easy to add Facebook’s Open Graph Meta Tag and Convert Website to WordPress Theme. This feature is enabled by default.
- Login to your WordPress website. When you log in you will be in your dashboard. Click on SEO.
- Left side you will see a menu, click on SEO in that menu. Click on Social.
- SEO Settings will provide you additional options. Click on social.
- Click on Facebook tab.
- Add Open Graph Meta Data and toggle the switch. To enable the feature, toggle the switch on. To disable the facility, toggle the switch off.
- Customize your open graph. Customize your open graph by adding a default image for pages without images. If you have a Non-located homepage, then you can set the home page open graph here as well.
- Click Save Changes.
After activation SEO goes to social and checks the box next to add open graph meta data. Just save or continue your settings and configure other Facebook social options on the screen. After that you can add your site as an administrator to your Facebook users account.
By doing this you will be able to see the information of Facebook of this site. You can provide the URL of your Facebook page and then it will be added to the Facebook open graph meta data.
You can add an image and description for your front page on a single page. Also, when an article does not have an image associated with it, add the default image to be used. Now you have successfully added Facebook Open Graph Meta Data to your WordPress theme.
2. Adding Open Graph Data to Word Press using the official Facebook plug-in.
If you are using another SEO plug-in like All in One SEO or some Word Press SEO Plugin or simply do not want to install the WordPress SEO plug-in, then you are still official for WordPress You can add Facebook Open Graph data using Facebook login.
First you need to install and activate Facebook plug-in. Activating Facebook login will add open graph data to your theme header. You have implement Facebook Open Graph Meta data on your WordPress site. Using the official Facebook plug-in allows you to use many other features that this robust plug-in provides.
For example, you can use it to add Facebook Like Box Fan Box. Facebook status can be embedded. Can add a follow button for authors and more.
3. Manually add Facebook Open Graph meta data to Word Press Theme.
This method desires you to arrange your theme files. So confirm that you back up your theme files ahead making any changes. Just copy and paste this code into your themes function PHP file or site specific plug-in.
| 1234567891011121314151617181920212223242526272829 | //Adding the Open Graph in the Language Attributesfunctionadd_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 functioninsert_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 defaultimage on your server oran 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 |
Note: Remember to change the site name. Where it says where your site name goes. Change the images default with your image URL. Would recommend putting an image with your people there. So if your post does not have a thumbnail then it attracts people to your site.
Studies show that posts shared without thumbnails are less effective than those with thumbnails. Also, do not forget to add your user ID.
All you have to do is as soon as you have saved your function. It will start showing Facebook Open Graph Meta data in Word Press Header.
Author Bio:
Brandon Graves is working as a Sr. WordPress Developer at WordPress Development Company – HireWPGeeks.com. Being a tech geek, she keeps a close watch over the industry focusing on the latest technology news and gadgets. For more information about the company, you can visit here.
