Hosting Tutorial & Guide

How to Set Up and Use Twitter Cards to Market Your Website

updated on Jan 28, 2015
How to Set Up and Use Twitter Cards to Market Your Website Since Twitter has become one of the most popular social networking, the developers of Twitter are busy in bringing users more surprises, among which Twitter card enjoys great popularity thanks to its enhanced features. And now, most webmasters have regarded it as a great method to drive website traffic so as to get higher ranking on the result page.

The guide on how to set up and use Twitter cards helps you get the whole picture of Twitter and the way to use it for website marketing.

What Is Twitter Card?

Twitter card enables you to attach various media files to tweets, such as video, photo, product showcase, and so on. That is to say, when you publish a link to a certain page within a tweet, then the summary of this page and give your followers a rough idea about the web content. If visitors are interested in the summary, they are more likely to click the given link and access to your website. It is a great method to drive more traffic.

There are 7 card types available for you, coming down to summary, summary card with large image, gallery, photo, player, app and product.
  1. Summary Card is available for you by default, and it leaves enough room for tweet title, content, thumbnail and your account attribution. This is the most common-used Twitter card suitable for any web content.
  2. Summary Card with Large Image is much the same as Summary Card. The only difference is that this card comes with an area for large featured image.
  3. Gallery Card makes it possible to showcase a series of photos in a tweet, created for people who need to display a group of photos.
  4. Photo Card allows you to place a photo in the tweet signally. Visitors are able to click the photo and then have a detailed view. This is designed for people who just wish to showcase a photo in the tweet.
  5. Player Card enables you to insert a player in the tweet to show visitors audio, video or music. This is a great method to make the tweet vividly.
  6. App Card, as the name suggests, enables you to include mobile application in the tweet and show visitors the way to install this app so as to get more installs.
  7. Product Card is created for users who are running a shopping site and wish to showcase detailed product information, including product image, description and some other highlights.

With Twitter cards, your web content is more likely to be noticed by visitors and then arouse their interest. Perhaps, the website traffic is increased at a great lick. Accordingly, you are required to select the most suitable card type to market your website. After having a comprehensive understanding about what is Twitter card and the main Twitter types, let's get started to learn how to set up and use Twitter cards.

How to Enable Twitter Cards in Your Website?

Method 1: WordPress has released multiple plugins to enable Twitter cards, among which WordPress SEO by Yoast is selected in this guide thanks to its high popularity and usability. If you have installed this plugin, you just need to follow the steps one by one. If not, you have to search this plugin via WordPress Dashboard > Plugins > Add New and then install WordPress SEO by Yoast in real time.

To make your website work with Twitter cards properly, you need to add the following code to the hearder.php file, which is included in Appearance > Editor.

<meta name="twitter:card" content="summary" />


And now, the SEO option appears in the dashboard sidebar. Move your mouse onto SEO and click the "social" option.

WordPress SEO by Yoast Social

There are three tabs available for you, including Facebook, Twitter and Google+. Pitch on Twitter and enter your Twitter username. Besides, you are required to check the option “Add Twitter card meta data”. Click the Save Changes button.

WordPress SEO by Yoast Social Option

Go to Users > Your Profile and find out the Contact Info section. Enter your Twitter username in the specific field. Click the Update Profile button at the bottom of this page.

Users Contact Info

In addition, there are many other plugins for you to enable Twitter cards, such as Twitter Card Generator, WP Twitter Cards Shop, Jetpack, and so on so forth. The use of plugin is a great way for some beginners who lack understanding of hard code. However, if you have had a rough idea about code, then the second method to enable Twitter cards is created for you.

Method 2: You are required to add the following code to the header.php file. Go to Appearance > Editor and open the header.php file included in the sidebar. Note that, you should replace some information to your own, such as site, thumbnail, twitter card type, etc. And then, click Update File button to confirm all changes.

<?php
# twitter cards hack
if(is_single() || is_page()) 
{
    $tName   = str_replace('@', '', get_the_author_meta('twitter'));
    $tUrl    = get_permalink();
    $tTitle  = get_the_title();
    $tDesc   = get_the_excerpt();
    $tThumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $tThumb  = $tThumbs[0];
    if(!$tThumb) 
    {
        $tThumb = 'Your Avatar URL';
    }
?>

<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $tZUrl; ?>" />
<meta name="twitter:title" value="<?php echo $tTitle; ?>" />
<meta name="twitter:description" value="<?php echo $tDesc; ?>" />
<meta name="twitter:image" value="<?php echo $tThumb; ?>" />
<meta name="twitter:site" value="@TwitterID" />
<? if($tname) { ?>
<meta name="twitter:creator" value="@<?php echo $tName; ?>" />
<? } }?>


If you are not quite capable of coding stuff and bother to modify the certain information, then the WordPress plugin is the better option for you.

Preview Your Twitter Card

Twitter allows you to preview the Twitter card by using the Cards Validator (https://cards-dev.twitter.com/validator). You just need to copy and paste the page URL to be shared on Twitter and then click "Preview card" button to check if it is ideal enough. For example, we select the default Twitter card called Summary, so our card should be like the following screenshot.

Card Validator