Website Integrations #3: Twitter cards
You have arrived in the third of three parts in my mini-series on how I implemented rich snippets. In the last two parts I tackled open graph and becoming an oEmbed provider. In this part, I'll be talking a bit about twitter cards, and how I implemented them.
Twitter's take on the problem seems to be much simpler than Facebook's, which makes for easy implementing :D Like in the other two protocols too, they decided to have multiple different types of, well, in this case, cards. I decided to implement the summary card type. Like open graph, it adds a bunch of
<meta /> tags to the header. Sigh. Anyway, here are the property names I needed to implement:
twitter:card- The type of card. In my case this is set to
twitter:site- This one's confusing. Although it's called 'site', it should actually be set to your own twitter handle - mine is @SBRLabs.
twitter:title- The title of the content. Practically identical to open graph's
twitter:description- The description of the content. The same as
twitter:image- A url pointing to an image that should be displayed next to the title and description. Unlike Facebook's open graph, twitter appears to support https urls here with no problem at all.
Since after implementing open graph I already had 90% of the infrastructure and calculations in place already, throwing together values for the above wasn't too difficult. Here's an example set of twitter card
<meta /> tags generated by the updated code:
<meta property="twitter:card" content="summary" /> <meta property="twitter:site" content="@SBRLabs" /> <meta property="twitter:title" content="Running Prolog on Linux" /> <meta property="twitter:description" content="Hello! I hope you had a nice restful Easter. I've been a bit busy this last 6 months, but I've got a holiday at the moment, and I've just received a .... (click to read more)" /> <meta property="twitter:image" content="https://starbeamrainbowlabs.com/blog/images/20151015-learning-swi-prolog-banner.svg" />
Update October 2020: It doesn't look likes Twitter likes SVG images very much. Watch out!
Easy peasy. Next up was testing time. Thankfully, Twitter made this easy too by providing an official testing tool. Interestingly, they whitelist domains based on whether the webmaster has run a url through their tool - so if you want twitter cards to show up, make sure you plug at least one of your website's page urls through their tool.
After a few tweaks, I got this:
With that, my work was complete. This brings us to the end of my mini-series on rich-snippet integrations (unless I've missed a protocol O.o Comment below if I have)! I hope you've found it useful. If you have (or even if you haven't!) please let me know in the comments below :D