Following our complete guide for Twitter Cards setup, you can attach rich photos, videos, and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.
In 2012, Twitter introduced a system called Twitter Cards, which allows site owners to display enhanced tweets on their websites using a syntax similar to OpenGraph. Thanks to this new system, Twitter can show nicer-looking tweets, including ones containing media such as images, audio, and video.
What are Twitter Cards?
Anyone who watched Vine, watched a YouTube video or clicked a photo in a Twitter stream has been exposed to Twitter Cards. Twitter’s card infrastructure enables us to have these rich media experiences within Twitter, well beyond the 140-character written message.
By adding a few lines of HTML to your web page (don’t worry, we’ll cover this; it might be easier than you think), you can also create this experience for your audience.
All users whose Tweets link to your content will have a “card” added to the Tweet, visible to all followers. For example, when I shared a recent article about how The Verge’s Twitter card streamed its information directly into my Twitter stream.
With four different card types to choose from, you can use Twitter Cards to ask your audience to:
- Look at a picture
- Watch video
- Visit the landing page.
- Download an mobile app
No need to leave Twitter. You also get additional benefits such as:
- Consistent post appearance across platforms (everyone sharing content with a Twitter card code will result in the same rich media tweet)
- Consistent attribution can drive more traffic to your website and increase the number of people following you
- A custom title and description for your photo or URL (lots of extra space on top of the default 140 for tweets!) and
- Provide your audience with a great mobile experience.
Are you in there? Okay, now let’s find out which Twitter card is right for you.
How Does Twitter Cards Work?
As mentioned in the introduction, Twitter Cards use a very similar syntax to OpenGraph. Twitter has some properties that are specific to its platform, which you can see in the following snippet:
<metaname="twitter:card"content="summary"/> |
<metaname="twitter:site"content="@yoast"/> |
<metaname="twitter:creator"content="@michielheijmans"/> |
The propertytwitter:card Is required and defines the type of card you want to show. You have four flavors here: summary, summary_large_image,app And.player The difference between all these different cards can be found in the documentation.
Both twitter:site and twitter:creator are optional and point to the website’s Twitter account publishing the content and the author.
OpenGraph
When it comes to parsing URLs, images, and descriptions, Twitter makes use of existing og: properties. You can overwrite these propertiesog: with Twitter-specific ones, but this isn’t something you’d want most of the time. If your goal is to display completely different information on Twitter, then these tags allow you to override the default behavior.
There’s one thing to consider when using the Twitter and OpenGraph options. Twitter uses toname specify the attribute, whereas OpenGraph makes use of the attributeproperty. Take this into account if you plan on manually implementing Twitter Cards.
Implementing Twitter Cards: Setup
As with other meta tags setup, you need to add Twitter cards tags to your website and ensure that the values are correctly set per page. This can quickly become an unwieldy task for a blog, so we built a feature that generates the proper meta tags for you.
Want to change the look of the Twitter Card for a specific post or page? Just use the form on the Social tab. Here you can tweak particular properties to your liking.
Additionally, our Yoast plugin contains Social Previews, which display what the Twitter Card will eventually look like based on the current page or post: Twitter Card: Preview your Twitter post with Yoast SEO Twitter Cards are a great (visual) addition and can help increase traffic to your website!
Twitter Cards Setup Guide If Your Website is Based on WordPress
You can try three different plugins. Twitter recommends three plugins to integrate your WordPress site with Twitter Cards: Jetpack, JM Twitter Cards, and Yoast’s WordPress SEO. Jetpack: Install Jetpack and navigate to the Social Networks section to verify your Twitter handle and activate your Twitter card. Jetpack automatically scans your message content and determines the best card type.
- Firstly, the Twitter card will be set to the summary if your post doesn’t contain an image.
- Secondly, your post contains 1 to 4 images, the Twitter card will be set to an extensive photo summary.
- Finally, the options that your post contains more than 4 images, the Twitter card will be set to gallery.
WordPress SEO: Install Yoast’s WordPress SEO and navigate to Social > Twitter, where you can choose between snippets and a large photo snippet card. Bonus: Yoast also contributes to the Facebook Open Graph!
JM Twitter Cards: Install JM Twitter Cards, and you can enable snippets, large photo snippets, apps, and photo cards. Whichever plugin you use, you’ll need to complete your process by getting the URL from your blog or website (not the primary website name; the specific URL you want the map to appear at) and running it through the Twitter Card validator. You’ll probably end up receiving such a message.
From here, click the “Request Approval” button and fill out the quick information requested by the form (your website, a description of your website, your Twitter handle, and your email address). Twitter said it could take a few weeks to get approval, but all my tests for this article were immediately approved. You will receive an email if you are approved.
Another good plugin to this task is this one:
Ideas for Twitter Cards Usage
So far, we’ve discussed all the advantages of Twitter cards, and there are many of them. There are also some caveats to know.
Call To Action
First, your Twitter card ensures that all your additional information is delivered to Twitter with every article. However, there is no guarantee that your audience will click to view. For example, the Huffington Post might want you to check out their posts.
Pay Attention to Images
Twitter is very good at finding and resizing images to fit your posts, but helping yourself by including your images in card-enabled posts and the pictures you use for lead generation and unique cards like website cards will cost you more time.
Once your cards are in place, it may be tempting to let them do their work and cut down on photos of tweets, but still prioritize attached photos! Tweets with images received 18% more clicks, 89% more favorites, and 150% more retweets than tweets without images.
