SumTips
SumTips
Blogging How To?

Add Twitter Cards Meta Data in WordPress Themes & Other Sites

Print View Mobile View

Twitter recently introduced a new system called Twitter Cards that aims to enhance user experience by showing content previews, images, videos, and more when Tweets containing links are expanded on Twitter. Twitter Cards works much in the same way as OpenGraph tags allowing website owners to determine how their posts will look like when shared on Twitter.

Twitter Cards Preview

If you are a website owner, you can make your website ready for Twitter Cards implementation by adding a set of meta tags (shown below) to your site, and by opting-in for the program (more on that later).

Add Twitter Cards on Any Website

Simply drop these lines of HTML tags inside your page’s <head>… </head> tags, and users who Tweet links to your content will have a “card” added to the Tweet:

<meta name="twitter:card" value="summary"> <!-- Card type: summary, photo or video player !-->
<meta name="twitter:site" value="@SumTips"> <!-- Website's Twitter ID !-->
<meta name="twitter:creator" value="@Renji_T"> <!-- Original content creator's Twitter ID !-->

Above meta tags are the only “must have” tags for Twitter Cards, i.e. if you already have OpenGraph tags. If other tags (seen below) are missing, Twitter will simply fall back to OpenGraph tags, just as Google+ does.

<meta name="twitter:url" value="http://example.com"> <!-- URL of the content !-->
<meta name="twitter:title" value="Example Post"> <!-- Title of the content !-->
<meta name="twitter:description" value="This is an example post"> <!-- Content description !-->
<meta name="twitter:image" value="http://example.com/image.png"> <!-- An URL representing the content !-->
<meta name="twitter:image:width" value="400"> <!-- Image width !-->
<meta name="twitter:image:height" value="300"> <!-- Image height !-->

Add Twitter Cards on WordPress

WordPress Users have mutliple methods available: Manually edit template files or simply install a plugin.

Code Method
Open your active theme’s functions.php file in a text editor, and paste the following code within the <?php and ?> tags:

//Add Twitter Cards Meta Info
function add_twitter_card_info() {
	global $post;
	if ( !is_singular())
		return;
	echo '<meta name="twitter:card" content="summary"/>';
	echo '<meta name="twitter:url" content="' . get_permalink() . '"/>';
	echo '<meta name="twitter:title" content="' . get_the_title() . '"/>';
	echo '<meta name="twitter:description" content="' . get_the_excerpt() . '"/>';
	echo '<meta name="twitter:site" content="SumTips"/>'; //optional: username of website
	echo '<meta name="twitter:creator" content="SumTips"/>'; //optional: username of content creator
	if(!has_post_thumbnail( $post->ID )) { //use a default image if no featured image set
		$default_image="http://example.com/image.jpg"; //replace this with a default image
		echo '<meta name="twitter:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta name="twitter:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "\n";
}
add_action( 'wp_head', 'add_twitter_card_info');

Note: Only use one of the above said methods.

Or, open header.php file and add below code inside head tags:

<?php
#Add Twitter Cards Meta Info
if(is_single() || is_page()) {
	$wppost_url    = get_permalink();
	$wppost_title  = get_the_title();
	$wppost_desc   = get_the_excerpt();
	$wppost_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), medium );
	$wppost_img  = $wppost_image[0];
	if(!$wppost_img) {
		$wppost_img = 'http://example.com/image.jpg';
	}
	$twitter_user   = str_replace('@', '', get_the_author_meta('twitter'));
?>

<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $wppost_url; ?>" />
<meta name="twitter:title" value="<?php echo $wppost_title; ?>" />
<meta name="twitter:description" value="<?php echo $wppost_desc; ?>" />
<meta name="twitter:image" value="<?php echo $wppost_image; ?>" />
<meta name="twitter:site" value="@SumTips" />
<?
  if($twitter_user) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_user; ?>" />
<?
  }
}
?>

Add Twitter Contact Field in WordPress

WordPress doesn’t have a Twitter User ID field in Users profile page. So to retrieve a post author’s Twitter ID, we need to add such an option. Add this code in the functions.php file:

function add_twitter_contactmethod( $contactmethods ) {
  // Add Twitter
  if ( !isset( $contactmethods['twitter'] ) )
    $contactmethods['twitter'] = 'Twitter';

  return $contactmethods;
}
add_filter( 'user_contactmethods', 'add_twitter_contactmethod', 10, 1 );

Once added, go to your profile page, add your Twitter ID in the new Twitter Contact Info field, and save changes.

Twitter Cards WordPress Plugins

Yoast’s WordPress SEO plugin already supports this new option. Many other SEO plugins will follow suit soon. Here’s a dedicated plugin for Twitter Cards, called the same. Note that I haven’t tested this plugin myself.

Opt-in for the Twitter Cards program

Twitter Cards isn’t available for all users just yet. To participate in this experimental program you need to fill out a form on this page. You’re required to provide a URL on your domain with the Card markup. Make sure to have one before signing up.

If you run into any issue anywhere, drop in a comment below so that I can help you out.

Related tips: