Types of Twitter Cards
Twitter Cards makes an ordinary tweet standouts, gain attention and improves the engagement between you and your audience. Twitter had made this interesting feature available on desktop, iOS and Android devices; so if you have not started using Twitter Card, you may be missing quite a fair bit. There are two ways to use Twitter Cards with WordPress: either via coding, or using WordPress plugins. In this article, we show both methods.
For the benefit of those new to this, you just need to know there are 4 types of Twitter Cards, and the first and second card is what most of us will use:
- Summary Card,
- Summary Card with Large Image,
- App Card,
- and Player Card.
All cards are capable of displaying title, description, pictures (different sizes), while the App Card is used to encourage mobile app (Andriod/iOS) downloads, and the Player Card is utilized when you want to embed audio/video onto the tweet (e.g. YouTube). Note that the Player Card requires prior approval from Twitter before you can use it.
Using codes are practical for people when they want tighter and better management or because they are not on WordPress platform. To use Twitter Card, the following codes need to be inserted into the HEAD section of your page.
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@imstash"> <meta name="twitter:creator" content="@imstash"> <meta name="twitter:title" content="descriptive title for content"> <meta name="twitter:description" content="description representing content correctly"> <meta name="twitter:image" content="http://yourdomain.com/images/post-image.jpg">
The blue and red text are card properties that defined what you want in the Twitter Card. Below for your reference:
- twitter:card – since we are using Summary Card with Large Image, use the text as “summary_large_image”
- twitter:site – put in your site’s username
- twitter:creator – put in the username belonging to you or your author’s
- twitter:title – a clear and concise title for the related content
- twitter:description – a description representing the content correctly
- twitter:image – a URL to the image representing the page. The image should be unique and not generic, with at least 280px for width, and 150px for height. Image size must be less than 1.5 MB
To learn more about the cards markup tag reference, visit this page for the codes.
Using WordPress Plugins
If you are not familiar or want to avoid coding, you can use WordPress plugins to do the job.
- Yoast SEO
- JM Twitter Cards
WordPress plugin #1 : Yoast SEO
As there are many WordPress bloggers using Yoast SEO and the plugin had this feature included, below are the step-by-step guide, on how to link up Wordress with Twitter Card. First, access the Yoast SEO plugin menu and go to Social > Accounts
On the Accounts tab, enter your Twitter username. No need to include the symbol “@”.
Next click on the Twitter tab.
- check the box “Add Twitter Meta Data”,
- select “the default card type to use”, in this guide we are using Summary with Large Image
- click the button to Save Changes
WordPress plugin #2 : JM Twitter Cards
Currently, Yoast SEO plugin does not offer the option on using the “App Card”. An App Card, is a Twitter Card that detail a mobile app with direct download. So if you need this, JM Twitter Cards is your solution. After activating the plugin, go to Options, and complete the details required. The free plugin provides the option for you to specific the twitter image for display, have a custom field title and description, with the capability to export/import data on your Twitter Card settings via *.JSON files.
WordPress plugin #3 : Jetpack
Jetpack by WordPress, is easy to setup, however it does not offer you much control on how the tweets are being sent out as Jetpack automatically scans your content and determine what is the best Twitter Card to use. Instructions as follows:
Go to Jetpack > Settings, then scroll down and look for Publicize, and click Configure
Next connect and authenticate your blog with Twitter account.
Once everything is setup properly on Jetpack, you can have a tweet send out the moment you publish content. An advantage of using Jetpack/Publicize is that you can add more social networks to automatically broadcast updates when you release new content on your blog.
Validating your Setup to Make Sure it Works
To preview and ensure that your Twitter Card feature is implemented correctly, visit the Twitter Validator page, and copy and paste the post URL you want to test. Twitter Card does not require anymore whitelist approval, however if you are getting error such as “WARN : Not Whitelisted“, the reason may be caused by not having any images on the post, or that the feature image you selected is not appearing on the post.
A successful implementation of “Summary with Large Image” Twitter card looks like this:
To get the most out of Twitter, don’t miss out the best 25 proven ways to increase engagement on Twitter.
Latest posts by lincoln (see all)
- Twitter Search Operators for Geeks – Change the Way You Search - April 21, 2016
- How to Auto Publish from Instagram to WordPress Using Instagrate - April 19, 2016
- 20 Best Ways to Use Twitter Advanced Search to Find Leads - April 17, 2016