Twitter Cards allow you to enhance tweets to your content and grow your following. So how do you add them to your website?
Twitter Cards add a rich media element to tweets linking to content. A few lines of HTML added to a page informs Twitter of the page’s intent. Twitter can then create a “card”. The enhanced presentation of your tweet allows you to stand out from your competition. They help you improve your social media marketing efforts.
Twitter Cards come in three types:
- Summary Cards
- Photo Cards
- Player Cards
Twitter has optimized each of these types on their website. They have also optimized them for the Android and iOS mobile apps. TweetDeck’s web and desktop applications have long supported summary cards. Yesterday they added support for Photo and Player Cards. TweetDeck’s mobile apps do not support any Twitter Cards.
Twitter requires you to apply to take part in Twitter Cards. They are manually validating websites at this time. Expect the approval process to take weeks. Validate your markup before submitting your application. This will increase the likelihood of approval.
Twitter does an exact match for the domain name field in the application process. This means that example.com and www.example.com are different sites. Get it right the first time so that you are not approved for example.com and then have to re-apply for www.example.com. Configure your server to only allow one version or submit two applications at the same time. This will also improve your SEO.
Twitter tends to grant applicants support for the photo card when they approve summary cards. They do so even if you do not supply an example. Player Card support requires an active URL during the application process.
Twitter Cards: Summary Card
The summary card is the card that most websites care about. A summary card will display the page title, description, and primary image front and center. It will also display the author and the publisher of the page. By referring to the author and publisher’s Twitter accounts they are given attribution. This happens even if the person who wrote the tweet does not mention them. This will increase the likelihood of growing your following. It also prevents them from passing off the content as their own.
All cards need you to add meta tags to the
<head> of your page. If your website supports Facebook’s Open Graph meta tags then you already have most of the meta tags needed for a summary card. The remaining meta tags look like:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@COMPANY_TWITTER_ACCT">
<meta name="twitter:creator" content="@AUTHOR_TWITTER_ACCT">
Single author sites should omit either the site or creator meta tag. For sites with multiple authors we recommend you give them credit for article. This goes with building your author’s AuthorRank to improve SEO.
Twitter Cards: Photo Card and Player Card
Most sites will find little need for Photo Card support. Less will need Player Card support. A Photo Card is a card that displays a large image with a description underneath. A Player Card is a card meant for more interactive media such as audio and video.
Photo Cards are useful for photo sharing sites such as Instagram. Surprisingly, neither Flickr nor Pinterest seem to support Photo Cards. I have never seen Instagram include the creator meta tag. Instagram allows you to connect your account to Twitter. Hopefully Instagram’s new web profiles will see a closer integration between the two sites. Animated gifs are not supported by Photo Cards.
Player Cards are useful for rich media sites like YouTube and Vimeo. YouTube does not include creator attribution with videos. Vimeo does include the creator attribution with videos. They do not include the site attribution meta tag. Twitter does somehow automatically includes attribution. I don’t know why this might be.
Will you be applying for Twitter Card support? Have you already been using Twitter Cards? Let us know how you feel about them.