How to Implement Twitter Cards on Squarespace Blog

UPDATE, Dec 16 2014: it seems Squarespace 7 does not play nice with Twitter cards. Squarespace sites that previously had Twitter cards (like this one) have lost their cards and the validator is unable to see any meta data. I reached out to Squarespace about the issue; they said their developers have this flagged as a known issue and are working on a fix as soon as possible. Here's hoping to a quick resolution from here on out. Follow me on Twitter where I'll be sure to announce the fix as soon as I get word from Squarespace. Thanks for reading! 

Updated 11:19am, July 19: added link to Twitter Card validator / approval process at end of article. 

Last year Twitter launched Twitter Cards, a feature that pulls information from tweeted links into Twitter to provide a richer experience within the Twitter ecosystem (twitter.com and its mobile apps). If a blog post or news article is linked to in a Tweet, Twitter Cards displays the title, description, author, author's Twitter username, and a featured image. The result is a more robust, informational tweet further enticing the user to click through for the full story. In addition to editorial content, Twitter Cards can also pull information for products, photos, videos, and apps. All of this, however, does not happen without website owners adding a little code to provide Twitter the information it needs. 

I recently looked to implement the proper markup on my blog, hosted by Squarespace, to provide Twitter Cards the information it needs to render a preview of my blog posts. To give you an idea, here's an example for a NY Times article:

 

twitter-card-example.png

I started by heading to the Code Injection  feature within Settings which allows the authoring of additional markup for placement in the <head> of your site's markup. Thinking I needed to supply the Twitter Card markup for a page's title and description, I sought methods for pulling in this information including Squarespace's proprietary markup or a JSON call.

It turns out Twitter Cards will look for Twitter-specific properties in the markup but will fallback on OpenGraph markup. This allows you to serve different information to Twitter and Facebook or, in my case, avoid duplicate markup by leveraging OpenGraph markup for Twitter's sake.

In the latter case, Twitter Card support on Squarespace is dead simple! Squarespace already renders OpenGraph markup for all pages including title, description, and image. As a result, all you need to add is markup for the type of Twitter Card you'd like Twitter to use when featuring your content. I also added a property for creator  (author).

The solution

  1. Open your Squarespace site's Settings
  2. Select Code Injection from the left-hand menu  
  3. In the Header window, add the following: 
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@your_username">

The card attribute can be whichever card type is most appropriate for your content (i.e. summary, summary large image, photo, gallery, app, player (video), or product). Keep in mind the Code Injection feature will carry across all pages so hopefully one card type will apply to all of your content.

Once your work is done, use the Twitter Card validator to make sure your markup is correct and functioning properly. Upon successful validation, be sure to click the Request Approval button to fill out a form authorizing your site for Twitter Card use.

If you have a question, ask in the comments -- or find me on Twitter or Google+ -- and I'll reply as soon as possible! 

Chris Fohlin

Brooklyn, NY 11201, USA