Do you wish to add Twitter Cards to your WordPress site? Twitter Cards makes it possible for you to connect rich media to tweets that link to your content. this can be terribly similar to sharing a link on Facebook that automatically displays a preview with title, summary, and thumbnail of your page content. during this article, we’ll show you how to add twitter cards in WordPress site.

How will Twitter Cards Work?

How to Add Twitter Cards in WordPress Site

When your tweet has a link to a website that has twitter cards enabled, there’s an choice to view summary. Whenever another user clicks on the tweet, they’ll see this summary just like the screenshot below. you’ll see the live example by going to our Twitter page.

The biggest advantage of getting twitter cards is that it will increase the number of people following your twitter accounts through content attribution. usually people tweet your links without giving you correct attribution.

We have noticed this specifically from some popular content curators. they’ll tweet our articles with none via @lifenan99 or RT @lifenan99. this can be their right, however we/you as publishers miss out specially when others retweet your content with somebody else’s attributes.

Often content curators do that to stay the tweet lengths short and ensure retweets of their own tweets. With twitter cards, this problem is resolved because you get credit to your website from every tweet that mentions your article. Note: we aren’t choosing on content curators. this can be a flaw of 140 character limit, and twitter is helping fix it with Twitter cards.

Now that you know the benefits of twitter cards, lets take a look at how to implement in WordPress site.

How to Add Twitter Cards in WordPress

There are two ways of adding twitter cards in WordPress. Let’s take a look at both of them.

Method 1: Add Code it yourself

This method needs adding code to your theme or child theme files. simply open the header.php file and add this code just before the </head> tag.

<?php
#twitter cards hack
if(is_single() || is_page()) {
$twitter_url    = get_permalink();
$twitter_title  = get_the_title();
$twitter_desc   = get_the_excerpt();
$twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
$twitter_thumb  = $twitter_thumbs[0];
if(!$twitter_thumb) {
$twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
}
$twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@lifenan99" />
<?
if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
}
}
?>

If you don’t know how to work with PHP or running into issues with Method 1, then please use Method 2.

Method 2: Yoast SEO plugin

If you’re using WordPress SEO by Yoast plugin, then you’re in luck. Yoast has built-in integration for twitter cards, thus turning it on may be a matter of few clicks.

Simply go to the “Social” page of Yoast SEO settings page. Enter your Twitter username and save changes.

After that click on the Twitter tab. Under the Twitter tab you need to check the box for Add Twitter card meta data. Select a default card type to choose. You can choose to show summary or summary with large image.

Twitter card meta data

Next factor you wish to do is go to Users » My Profile page. you’ll see a new field under Contact info for your twitter username. Enter your twitter username there.

If you’re running a multi-author website, then advise your authors to complete this part in their profile. this way each specific author gets credit for their work similarly.

That’s all you have successfully added Twitter Cards meta tags to your WordPress site. This method is by far the easiest method. Since we use WordPress SEO by Yoast on all of our websites, we are using this method.

Test and Validate Twitter Card

Before links from your WordPress website begin showing Twitter Cards, you wish to first check it in Twitter card validator.

Simply head over to the card Validator page on Twitter developers website. Enter URL of any post from your WordPress website and click on on preview card button.

Twitter will show you a preview of your Twitter card. Twitter has implemented a system that automatically whitelists domains when you test them with the validator or just share a URL on Twitter. We hope this article helped you add Twitter cards in WordPress.