• Latest Articles

    how to use Facebook open graph meta tags code

    You may thining that this topic is valueless! where SEO plugins do the job automatically then why need to learn it? 

    Let's start with the Example from the most popular WP plugin Yoast. In Yoast and Open Graph for Facebook, Twitter can be set up with only updating images( mainly called: property; image). But how you can ensure that all open graph codes are properly optimized? At this point, you should check your website/links with Facebook's official tools.
    how to use Facebook open graph

    If you find any error then it can be fixed with the help of your all in one SEO or Yoast SEO plugin.

    Anyway, I love to set up manually and It's very easy to set up and 100% confidential works.  

    For WordPress, Just copy and paste this code in your function.php. Otherwise, It's safe by using a very simple plugin Code Snippets
     //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 );  
    

    Now, Learn how to implement open graph tags in blogger blog manually. 

    Just Copy and paste the code below in your blogger blog HTML code above the <head>

    Open graph for blogger




     <b:if cond='data:blog.pageType == &quot;index&quot;'>  
       <meta content='Digital Marketing tips are presenting articles on online learning about On-page SEO with tricks, Social media marketing, and freelance marketplaces. ' name='description'/>  
       </b:if>  
       <!-- Description and Keywords (end) -->  
       <meta content='article' property='og:type'/>  
       <b:if cond='data:blog.url == data:blog.homepageUrl'>  
     <meta content='https://1.bp.blogspot.com/-Dl0ekrfXlcA/X0_vpaVaFQI/AAAAAAAAJlQ/-FR2c-xXIUMrjaozotObspF9ddJAO-xUgCLcBGAsYHQ/s668/ds.jpg' property='og:image'/>  
     <meta content='668' property='og:image:width'/>  
     <meta content='250' property='og:image:height'/>  
     </b:if>  
     <meta expr:content='data:blog.title' property='og:site_name'/>  
     <meta content='1172432706107382' property='fb:admins'/>  
     <b:if cond='data:blog.pageType == &quot;item&quot;'>  
     <meta content='https://www.facebook.com/mailtomaruf' property='article:author'/>  
     </b:if>  
     <meta content='en_US' property='og:locale'/>   
       <meta expr:content='data:blog.pageName' property='og:title'/>  
     <b:if cond='data:blog.postImageThumbnailUrl'>  
      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>  
     </b:if>  
     <meta expr:content='data:blog.title' property='og:title'/>  
     <meta expr:content='data:blog.canonicalUrl' property='og:url'/>  
     <b:if cond='data:blog.metaDescription'>  
      <meta expr:content='data:blog.metaDescription' property='og:description'/>  
     </b:if>  
    

    Note: Change the image link of line number 7 with your image link. You have to change your Facebook username and app id also. 

    I hope you will find this short article helpful. feel free to comment if you cant implement on your website.



    No comments:

    Post a Comment

    Thanks for your comment

    SEO Service

    Web Programming

    WordPres