Introduction:
Let’s understand the Open Graph Tags and Twitter Cards and how you maximize their impact and how they work on WordPress sites. Have you shared a link on Social networks and noticed that the link automatically generates a rich fragments, This indicates that a large image is displayed with a title and a short description of the shared page. Well, it does not happen by chance. This is a direct result of adding appropriate meta data or “tags” to the source code of the web page.
Why are these tags crucial?
Tags of social networks such as Facebook, Google+, LinkedIn, etc., the Open Graph Tags are the source of these fragments. Twitter has special Twitter tags (that is, Twitter cards) that are essential for adding multimedia to tweets. By adding a open graph tags that is open to your site, social networks can find out which photos,title, description etc. are used when someone shares the page on your website. The open graph tags are similar to the schema.org element. Both can set a specific part of the site’s value, such as Facebook, Twitter, and other social networking sites.
How can I get it?
The website has several ways to add open graph tags or twitter cards, but I use a simple manually handwritten OpenGraph/TwitterCards tags markup for WordPress themes and extensions. It is very useful for developers who want to build open graph protocol support in their themes and extensions.
Here is an example markup looks like these tags:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- open graph tags --> <meta property="og:type" content="" /> <!-- post /page type i.e article --> <meta property="og:title" content="" /> <!-- post/page title --> <meta property="og:description" content="" /> <!-- post/page description --> <meta property="og:image" content="" /> <!-- post/page image --> <meta property="og:url" content="" /> <!-- post/page url --> <meta property="og:site_name" content="" /> <!-- site Name --> <!-- twitter card tags --> <meta name="twitter:card" content="" /> <!-- post /page type i.e summary --> <meta name="twitter:site" content="" /> <!-- Site Name --> <meta name="twitter:title" content="" /> <!-- post/page title --> <meta name="twitter:description" content="" /><!-- post/page description --> <meta name="twitter:image" content="" /> <!-- post/page image --> |
Most tags are clear. The og:type property is the only change and must be defined. In most cases, you can place the og:type property on an article or website. Twitter is a necessary twitter: card, twitter cards are the same as og: type. It determines what kind of things you share. You can choose from seven options: summary, photos, videos, products, apps, galleries, and “large version” summary.
Here is an example code for Open Graph Meta Tags and and Twitter Card:
1. Get the required post data for social markups.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/** * get post data for social markups. */ function get_markup_data_callback($tags ='open_graph'){ //init $post_data = array(); //set default image here $default_image ="http://yoursite.com/images/default.png"; //check if (is_single() || is_page()) { global $post; //check if(get_the_post_thumbnail($post->ID, 'thumbnail')) { $thumb_id = get_post_thumbnail_id($post->ID); $thumb_object = get_post($thumb_id); $image = $thumb_object->guid; } else { // set default image $image = $default_image; } //set post details $post_data['title']=$post->post_title; $post_data['type']=($tags =='open_graph') ? "article":"summary"; $post_data['image']=$image; $post_data['url']=get_permalink($post->ID); //get author $author_id=$post->post_author; $author = the_author_meta( 'user_nicename' , $author_id ); if(empty($author)){ //set default $author ='admin'; } //set author $post_data['author'] =$author; //post excerpt as description $description = strip_tags($post->post_excerpt); //check if(empty($description)){ //set $description = substr(strip_tags($post->post_content),0,200) . '...'; } //set description $post_data['description']=$description; }else{ //set site details $post_data['type']=($tags =='open_graph') ? "website":"summary"; $post_data['title']= get_bloginfo('name'); $post_data['image']=$default_image; $post_data['url']=site_url(); $post_data['description']=get_bloginfo('description'); $post_data['author']=get_bloginfo('name'); } //set $post_data['site_name']= get_bloginfo('name'); //return return $post_data; } |
2. Add post data to Open Graph Tags markup.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** * open graph tags markup. */ function opengraph_markup_callback(){ //get markup data $data= get_markup_data_callback('open_graph'); //extract extract($data); //init $html =""; //check if(is_single() || is_page()){ $html .='<meta property="og:title" content="'.$title.'" />'; }else{ $html .='<meta property="og:site_name" content="'.$site_name.'" />'; } //set $html .=' <meta property="og:type" content="'.$type.'" /> <meta property="og:image" content="'.$image.'" /> <meta property="og:url" content="'.$url.'" /> <meta property="og:description" content="'.$description.'" />'; //display print $html; } |
3. Add post data to Twitter Card Tags Markup.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** * twitter card tags markup */ function twittercard_markup_callback(){ //get markup data $data= get_markup_data_callback('twitter_card'); //extract extract($data); //init $html =""; //init $html .= ' <meta name="twitter:card" value="'.$type.'" /> <meta name="twitter:title" content="'.$title.'" /> <meta name="twitter:description" content="'.$description.'" /> <meta name="twitter:image" content="'.$image.'" /> <meta name="twitter:site" content="@'.$author.'"> <meta name="twitter:creator" content="@'.$author.'">'; //display print $html; } |
4.Add Open Graph & Twitter Cards Tags markup to page header.
|
1 2 3 4 5 6 7 8 9 |
/** * hook open graph tags markup. */ add_action('wp_head', 'opengraph_markup_callback'); /** * hook twitter card tags markup */ add_action('wp_head', 'twittercard_markup_callback'); |
Finally, Open your current active theme’s functions.php file and drop this PHP code in or create a plugin and place, here the sample create file named as “share_Link_on_social_media.php” and create plugin header like below after that drop this PHP code in or you can download full code here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php /** * @package Share_Link_On_Social_Media * @version 1.0 */ /* Plugin Name: ScriptHere's Share Links On Social Media with Rich Snippets. Plugin URI: https://github.com/blogscripthere/ShareLinksOnSocialMedia Description: Simple Open Graph Tags and Twitter Cards to WordPress posts and pages. Author: Narendra Padala Author URI: https://in.linkedin.com/in/narendrapadala Text Domain: shot Version: 1.0 Last Updated: 16/12/2017 */ |
Check your work :
You can now share all your blog posts correctly with social networks. Facebook and Twitter developers are a great tool to assess whether all meta tags are correctly placed when they submitted WordPress post and page URLs to the Facebook debugger and Twitter debugger distribution tools I want.
Conclusion :
On the other hand, your metadata on your site turned out to be a good SEO recommendation recommended by Google. To get the good positioning, you’ll need to include a meta tags on the site. Moreover, the more you promote social networking, the more opportunities for more visits. Use the appropriate meta tags to display meta data of different networks correctly. It is the first idea that it is important.
