Published on April 3rd, 2013 | by charliesaidthat1
How To Add Twitter Card Support To Your Website
So this is pretty damn cool, could result in a lot of extra exposure and should take all of about 15 minutes to implement on your site if you’re on WordPress.
You can now allow your site to support Twitter Cards.
So, What The Hell Are Twitter Cards?
OK, let’s get this straight. Twitter Cards are not business cards.
Twitter cards allow you to display rich content about your site when it is shared on Twitter, before users click a link.
How does this work?
When someone shares a URL on Twitter, Twitter crawls the site looking for tags that add this additional content to the tweet. These tags need to sit in the head section of your site in order to be located.
As a Twitter user, you may recognise those tweets that expand when you click on them? – They contain data about your site, such as the title, description and any media that may appear in that post… Like this:
As you can see, underneath the article title, description and image, the content author is credited and receives a “one click follow button”. This means that by adding these tags to your site, you increase your potential exposure when your articles are RT’d or shared outside of your network.
How Do I Set Up Twitter Cards For My Website
Are you on WordPress and are you are using WordPress SEO by Yoast? If so, you are in luck his plugin supports Twitter cards (and this is what I use).
- 1. Go to the SEO Options (should be at the bottom, left of your admin panel) > Social.
- 2. Find the Twitter Section at the bottom and add your Twitter username.
- 3. Check under “Users” that your WordPress profile has your Twitter account @handle, not the full URL. You are now good to go!
If you use WordPress but don’t use Yoast’s SEO, fear not as you can use the JM Twitter Cards plugin, which is a one use plugin and also super easy to use. Simply, fill in the form and you should be all set up.
And last, but not least: if you need to install this on a static website, you’ll have a little more work setting this up for each page. You’ll want to define the following for each page:
- Website Twitter account
- Author’s Twitter account
- URL of the page
- Image you want to appear on your Twitter Card
- Title of the page you want to appear on the Twitter Card
- Description of the page you want to appear on the Twitter Card
Luckily though you are able to borrow Facebook’s open graph title and URL tags for this. You do have Facebook Open Graph installed on your site right? The code should look a little like this for each page.
View code here
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:creator" content="@username2" />
<meta content="Title of your fantastic website goes here" />
<meta content="http://charliesaidthat.com/digital/" />
<meta name="twitter:image" content="http://1.gravatar.com/avatar/be6780b6ac6355db92d368d8f4f89c7d" />
<meta name="twitter:description" content="You'll want to put a whole bunch of awesome writing about your page here" />
Yey! Now We All Have Twitter Cards.
Let me know how you get on.