Something kind of recent to the web development/social media scene is Twitter Cards.
Twitter Cards are snippets of data that Twitter pulls from links you share, like image thumbnails, descriptions, photos, and videos. It’s similar to the method Facebook uses to show content previews when you type a link into your composer:
Twitter just includes a streamlined preview description, image, link, video, and sometimes Twitter author in their previews:
— Happy Medium (@itsahappymedium) December 2, 2012
Adding Twitter Card functionality to your website
Currently, Twitter Cards are only functional on a limited basis. The biggest part of the process is applying for the Twitter card program and entering your website’s data.
First, you need to add the proper meta tags to the of your website. These tell Twitter that 1) your site supports Twitter cards and 2) your site is connected with a Twitter account.
<meta name="twitter:card" content="photo"> <meta name="twitter:site" content="@examplephotosite"> ="twitter:creator" content="@sippey"> <meta name="twitter:url" content="http://example.com/photo/a/"> <meta name="twitter:title" content="Good Morning, San Francisco"> <meta name="twitter:description" content="Great view this morning"> <meta name="twitter:image" content="http://example.com/photo/a/image.jpg"> <meta name="twitter:image:width" content="610"> <meta name="twitter:image:height" content="610">
A great benefit of the meta tag “twitter:creator” is the ability to embed the author’s Twitter handle in addition to the site’s Twitter handle. So when we post our Happy Medium blogs, our individual Twitter handles are marked as the author of that blog post.
The next step is to test a page on which you’ve added Twitter Card meta data. Head over to the Twitter Card Tester and input the link to your page.
After you’ve confirmed Twitter can properly pull the card data from your page, head over and begin the request and approval process. The application will ask that you provide an example of how Twitter Cards will be used on your site.
After anywhere from a few days to a week, you may receive an email saying that your site has been approved for Twitter Card use.
Limitations to Twitter Cards
Right now, the code Twitter provides for Twitter Cards gets flagged as invalid by the W3C. If that matters to you, a workaround is to use property in place of name in the meta tag.
Another interesting topic is the benefit to business. In fact, Instagram pulled support for Twitter Cards this morning. What does this mean? Instagram photo links posted to Twitter will not automatically be pulled in by Twitter. This means exponentially fewer views of photos, but likely more clickthroughs to the Instragram links on Twitter.
Have you began using Twitter cards? Do you find them to be of value? Please let me know in the comments below!