Twitter Cards
Twitter Cards are meta data added to webpage that tell Twitter information about the page’s content. Twitter uses this information when a Tweet links to your page, which enriches the tweet. The information is typically shown when the user clicks “Expand” on the tweet. It could include a summary of an article, an image, a video, product information, and more.
“Summary” Twitter Card for a Blog Article
How to set up Twitter Cards meta tags (technical)
The meta information is added via <meta> tags added to the <head> of the web page HTML. Here is an example of a card for the blog entry pictured above:
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@senktec" /> <meta name="twitter:domain" content="www.senktec.com" /> <meta name="twitter:title" content="Ruby vs Python" /> <meta name="twitter:creator" content="@senktec" /> <meta name="twitter:image:src" content="http://www.senktec.com/wp-content/uploads/2013/06/python_vs_ruby.png" /> <meta name="twitter:description" content="Ruby and Python are similar programming languages in that ..." />
There are several types of card. In the example above, it’s a “Summary” card with all the common fields included. Most of the fields are optional, except the “twitter:card” field, and different card types have different fields. Currently, the available card types include:
- Summary
- Summary Large Image
- Product
- Photo
- Player
- App
- Gallery
How to set up Twitter Cards on WordPress (easy)
With the Yoast SEO plugin, click on “SEO” in the admin menu, select “Social” in the sub-menu and then choose the “Twitter” tab. Check the box to enable adding Twitter meta data to your site and add the site or author’s Twitter username, if you have one. When viewing the source of a page, you should now see the Twitter meta tags appearing. If the authors have different Twitter usernames, these can be set when editing the user and the “twitter:creator” field will be populated with that username for each article written by them. Find out more about the SEO plugin at Yoast.com.
Validating and claiming your domain
Once the meta tags are in the webpage, the Twitter Validator can be used to check they’re correctly being read by Twitter. The validator is found at dev.twitter.com/docs/cards/validation/validator. Use your Twitter account to login.
Before the Twitter card will show up in the tweets, the page must be validated and approved by Twitter. Click “Request Approval” for the correctly validating card to send the card for approval by Twitter. Each different card type used on the site must be validated and claimed for the domain. You’ll get an email back from Twitter when the card has been approved. This can happen quickly, but may take a couple of weeks.