I just added support for Twitter Cards to my website because I wanted more control over how my site displays on Twitter. There are six different card types, although the only one that’s appropriate for my site is the Summary Card, which lets users preview site content within a tweet.
The Summary Card is the default and includes a title, description, thumbnail, and Twitter account attribution. The following markup is provided by the developer docs:
Card, Site, and Creator
These three meta tags and their values stay constant, regardless of page content. I use my Twitter handle for both site and creator, although I’m not sure that I need to. I figure that it can’t hurt to do so, though.
I’ve denoted a site title in my _config.yml and a page title in the YAML Front Matter block that’s specific to every page and post on my site.
I’ve also specified a site.url output as an absolute path in my in my _config.yml, as well as a page.url output in my YAML Front Matter block.
Likewise, I have a general site description and a page specific description:
A different approach to the page description is to escape and truncate the page content, which is how Paul Stamatiou handles it:
I’ve also set a default image, if there’s not an image for the current page.
All Together Now
Here’s what my final block of code looks like:
If you’re curious if your code validates, Twitter has provided a validator so you can easily check. You’ll need to pass the validation test before you can submit a Domain Approval Request, which will whitelist your website for inclusion with the service. It shouldn’t take much time at all to be approved.
More Info: David Walsh has a really great overview of Twitter Cards, which is well worth a read.