Social Media is one of the biggest way to get traffic for websites and blogs now everyone use it to get views and share their articles on Social Media to get visitors. One of the biggest Social Media is Facebook from where you are getting traffic. Now when you share the article link only in Facebook then it is not so attractable to catch the viewer attention so you have to show more then a link.
Now if you will add “Open Graph Protocol” Meta Tags in your WordPress blog then it can show more then only link. It will show post title, image, prescription, author, in a beautiful box to catch the attention of viewer but you have to make it to get it. Now you juts have to add “Open Graph Protocol” Meta Tags in your WordPress blog to make your blog also like this.
If you want to add Facebook OpenGraph tags in Blogger or Website then follow our previous article at How To Add “Open Graph Protocol” Meta Tags On Blog And Site?. After adding the below Open Graph Tags, just run a check by following our previous article about How To Create A Perfect URL Or Link To Share On Facebook? and see that did you add in right way.
Features:
1.) Simple And Awesome Code.
2.) Easy To Add And Better In Use.
3.) Best For Social Sharing Sites Like FaceBook And GooglePlus.
4.) It Will Select The Correct Data From Your Blog To Share.
5.) Also Fixed Facebook Error : “The page at [URL] could not be reached.”
6.) Important Meta Tags For SMO.
Basic Object Types And There Properties:
- og:title: This condition represents the title of your posts, blog, etc.
- og:url: This represents the URL of your posts, homepage, etc.
- og:image: This conditions represents the image that should be displayed on Facebook.
- og:type: It represents the type of your page. For example, on the homepage we use “blog” and on article pages we use “article” attribute.
- og:description: It represents the description of your page.
- fb:admins – Your Facebook Profile ID or Username
- fb:app_id – The Application ID provided by Facebook App
How To Add “Open Graph Protocol” Meta Tags In WordPress Without Plugin?
Step 1:) Open Appearance > Editor File In Your WordPress Dashboard.
Step 2:) Open your Header (header.php) File From The List Of Your Theme File.
Step 3.) Press [CTRL+F] To Search <html... Code.
Step 4.) Now Copy The Below Code And Paste It In <html... Code Like “<html xmlns:og='http://ogp.me/ns#' ...“.
xmlns:og='http://ogp.me/ns#'
Step 5.) Now Again Press [CTRL+F] To Search </head> in Header (header.php) theme file.
Step 6.) Now Copy The Below Code And Paste It Before </head> in Header (header.php) theme file.
<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<!-- The Default Values -->
<meta property="og:type" content="blog" />
<meta property="fb:app_id" content="your_fb_app_id" />
<meta property="fb:admins" content="your_fb_admin_id" />
<?php if (is_single()) { ?>
<!-- Only For Content Pages -->
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<?php } else { ?>
<!-- For All Pages Expect Content Page -->
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:image" content="logo.jpg" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php } ?>Step 7.) Click “Update File” And Done.
Customization:
You just have to edit your_fb_app_id and your_fb_admin_id with your own IDs. Also you have to add an image URL at logo.jpg to show this images when there is no image to show. Rest is done.
Theme Files Editing Warning:
Keep in mind that every code that you will add in your themes files will be removed when you will change the theme. So after changing your theme, you have to follow this article again and you will get everything back same as it is now.
Last Words:
This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about WordPress and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.
Be the first to write a comment.