Adding Twitter Cards to Your Wordpress Website

In the past, posting links to your Twitter meant your user needed to click on the link to know more about it. It never showed a synopsis. But, things have changed with Twitter cards. You can attach the title, and a brief preview of the content along with the link. This is almost similar to pasting a link to Facebook status. This is a new introduction to twitter, and using it would help create a brilliant experience for your users. Here's how you can add Twitter cards to your Wordpress website.

Let's understand how Twitter cards work.

Twitter Cards: How they Work?

Your tweet contains a link, and you have enabled Twitter cards. In that case, the link would come with an option “view summary” which will give out a brief on the link. In case of an article, the synopsis of the article will be read. The idea is similar to posting a link on Facebook, giving the user an overview of the contents. With Twitter cards, you get credit for your article, even when you are mentioned in a retweet. Let's elaborate on this a bit.

Say, you posted an article, and have tweeted it in your Twitter account. Content curators will retweet the article, but owing to the limitation in number of characters, they will not be able to give you the credit. With Twitter cards, you get the credit automatically, as the name will be shown in the link synopsis. This will help increase followers to your account, and will help boost your social media presence. You may be getting good retweets in the past, but with this you are getting sufficient visibility too!

Adding Twitter Cards

There are two major methods of adding Twitter cards to your Wordpress website.

SEO by Yoast

Do you use SEO by Yoast plug-in on your Wordpress website? If yes, then you are in for some luck. With an in-built integration provided for Twitter cards, you can easily get started with the process with just a few clicks.

In SEO by Yoast plug-in go to settings>social page>add twitter card meta data. Check this box, enter your Twitter username and get started.

Next, go to Users>My Profile>Twitter username. In case you run a site with multi-authors, then you should necessarily get all authors to fill in this data. This is an easy way to integrate twitter cards to your website.

Hard Code the Twitter Card

Go to header.php file and paste the following code to add Twitter cards programmatically

    #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 ='';
      $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="@libdemvoice" />
      if($twitter_name) {
    <meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />

Applying Twitter Cards

Just adding twitter cards to your website does not guarantee that it will show up in the tweets as well. You will have to apply and activate this card to your website. How to apply? It is a two-step process that you will need to diligently follow

  • Use Preview Tool to test your website
  • Fill out a form to apply

You will need to submit an example summary card URL i.e. the URL of any post on your website. That's it, and you can get started with Twitter cards


Twitter cards have made content authorship easier. You will see that with these cards by your side, you can easily seek credit even when content curators are unable to give it. In case, you are not one of those who prefer coding, you can easily add the cards using yoast plug-in.

Note: don't forget to take a backup before pasting the code.

Deepa is a passionate blogger associated with Semaphore Software. She loves sharing information regarding WordPress tips & tricks. If you are looking for hire wordpress expert then just get in touch with her.

Deepa Ranganathan
  • wordpress website
  • twitter cards
  • twitter card implementation
By Deepa Ranganathan On 12 May, 15  Viewed: 1,223

Other blogs you may like

Customize The Admin Post List in Wordpress Website

What do you see when you click on Admin post list in your Wordpress website? A list of all the posts created by you is displayed with their titles and dates. But, that's about it which is displayed! You won't be able to see any other details related to your post. So, if you want to display some... By Deepa Ranganathan   On 08 May 2015  Viewed: 444

5 CSS Customizations for Your Wordpress Website

<center>![Customizations for Your Wordpresst][1]</center> Have you just started using Wordpress? If yes, then there are a few things that you may want to play around with. Customizing a Wordpress theme at beginner level actually means customizing your stylesheets to make the design look... By Deepa Ranganathan   On 06 May 2015  Viewed: 299