Twitter rolled out a feature in 2012 called Twitter Cards, which allows users to attach media experiences to tweets that link to your content, so that when you paste a link, it automatically adds a preview with the title, summary and thumbnail image of your site’s content.
Twitter cards allow you to attach media (images, galleries or video) to tweets that link to your content. For example, this is an example of a normal tweet, before Twitter cards.
The Lowdown
Using Twitter cards, you can break through the sea of text that usually makes up the average person’s Twitter feed by simply embedding a small bit of code into your site and validating it via Twitter Developer. This will allow your tweets to feature photos, videos, and even drive sales to your online store. You can tell if a tweet utilizes Twitter cards when you see the view summary link.
A major advantage of using Twitter cards is that it can increase the number of Twitter followers you have through content attribution. More often than not, people will tweet links to your content without giving your proper credit (e.g. not mentioning your Twitter handle). For example, if I retweet a post from @amplifound without including the Amplifound Twitter handle, and then someone else retweets me @marianna_morris, people are more likely to follow me rather than @amplifound, who is the original author and, rightfully so, deserves the attribution.
Now with Twitter cards, when someone tweets out an Amplifound article and neglects to mention @Amplifound, that tweet will automatically show up as a Twitter card and give Amplifound full credit.
Card Types
There are 9 types of Twitter cards, but for the purposes of this tutorial, we’ll use the summary card as an example. The summary card, which includes the title of your content, description, thumbnail image and Twitter account, is the most popular choice for bloggers.
How to Install Twitter Cards via WordPress (Self or Third Party Hosted)
While you can hard code it yourself, the easiest way to integrate Twitter Cards into a WordPress site is to take advantage of a downloadable plug-in. There are three different plug-ins you can choose from: Jetpack, JM Twitter Cards and WordPress SEO by Yoast. For demonstration purposes, I chose to go with WordPress SEO by Yoast.
-
Login to your WordPress Admin Dashboard
-
On the left sidebar, click on “Plugins” and select “Add New”
-
In the search bar, type in “Yoast” and install the “Wordpress SEO by Yoast” plug-in.
-
Once Yoast is successfully installed, you should see a new entry in the left sidebar—“SEO”
5. Click on “SEO” and navigate to “Social.”
6. Click on the Twitter tab at the top of the page and check the box next to “Add Twitter card meta data.”
7. In the box next to “Site Twitter Username,” type in the Twitter username you would like to associate with the Twitter cards e.g. your blog or personal Twitter account. Save changes.
8. Once you’ve saved your changes, you’ll need to navigate to your user profile page.
9. Under “Contact Info”, enter your Twitter username without the @ symbol. If you are running a multi-author site, then advise each of your authors to complete this part in their profile as well. This way, each author gets credit for their work.
10. Test your site with Twitter’s Card Validator tool.
11. Validate and apply. In the application form, you don’t have to submit the actual summary card URL, simply submit an example–which can be any single post (not the homepage) on your website.
How to Install Twitter Cards via Blogger
-
Log into your Blogger account
-
In the left sidebar, navigate to “Template→Edit HTML”
-
Click on “Proceed” to bypass the pop-up window (if one appears)
-
In the editor pane, search for <b:includable id=’post’ var=’post’>. Pro tip: you can speed up your search by using ctrl + f and typing in “b:includable.”
-
Right below the <b:includable id=’post’ var=’post’> tag, add the following sample code (so the sample code is “nested” in the b:includable tag:
6. Make sure the @mytestsite above specifies your site.
7. Click “Save Template”
8. Test your site with Twitter’s Card Validator tool.
9. Validate and apply. In the application form, you don’t have to submit the actual summary card URL, simply submit an example–which can be any single post (not the homepage) on your website.
Have you ever used Twitter Cards? Have additional questions/tips? If so, let us know in the comments and we’ll be sure to get back to you!
