Twitter Cards with Nunjucks and 11ty

Using cards makes sharing your content on Twitter look much nicer.

Published on – Read time: roughly two minutes.Written by

When sharing links on Twitter, there's a handy feature to make those links look prettier. Twitter "cards" will turn your simple text link into a rich card complete with an image and structured title and description data. Here's a recent tweet from my podcast's[1] account. When writing the tweet, we simply included the url https://aquestionofcode.com/52-what-gear-do-you-use/ in the text, and Twitter automatically added the card content.

There are several types of card, including summary, player, and summary with large image. They all serve different purposes and are activated in different ways. You can find the full details on Twitter's developer overview.

Adding support for Twitter Cards to your own site

Does this happen to all links? Sadly not. To activate this feature, the page you're linking to needs to include some Twitter-specific metadata in it's <head>. Here's what that metadata for this page looks like:

<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="{{site.authorTwitterUrl}}" />
<meta property="og:url" content="{{site.url}}{{page.url}}" />
<meta property="og:title" content="{{title}}" />
<meta
    property="og:description"
    content="{% if excerpt %}{{excerpt}}{% else %}{{site.summary}}{% endif %}"
/>
<meta name="twitter:image" content="{{site.url}}/images/pages_stack_bg.jpg" />
<meta property="og:image" content="{{site.url}}/images/pages_stack_bg.jpg" />

Adding the metadata in 11ty

My site is built with Eleventy (a.k.a. 11ty), and I use the Nunjucks templating engine.[2] I chose Nunjucks because it's the de-facto standard in all the code example in the 11ty docs, and it's about as lightweight and intuitive as any other templating language.

That same block of metadata that I showed before looks like this in a Nunjucks file:

<meta name="twitter:card" content="{{cardType}}" />
<meta name="twitter:creator" content="{{site.authorTwitterUrl}}" />
<meta property="og:url" content="{{site.url}}{{page.url}}" />
<meta property="og:title" content="{{cardTitle}}" />
<meta
    property="og:description"
    content="{% if excerpt %}{{excerpt}}{% else %}{{site.summary}}{% endif %}"
/>
<meta name="twitter:image" content="{{cardImage}}" />
<meta property="og:image" content="{{cardImage}}" />

Because the way 11ty templates and layouts are put together, I had to add the metadata to my site's master main.njk layout file. This is the main layout that wraps all my pages, so I need to include some custom logic to account for a few scenaris:

  • Pages that don't have an image of their own (most pages on my site, in fact) fall back to using a generic site-logo image.
  • If we're using the generic site-logo image, I switch the card's type from summary_with_large_image to simply summary, which creates a smaller card that is better suited to a icon or simple logo.

Gotchas

I have to confess that it took me several attempts to get the images loading correctly[3]. Twitter provides a helpful Card validator. Having access to that meant I could test and debug without having to spam my followers with tweets full of broken card links (which was a relief, I can say). It still needs a valid real-world url to work, however, and that's not something my current dev-setup can provide for this site (where I normally just rely on a localhost url for testing and development). I just YOLO'd it by repeatedly deploying to my Netlify instance. Probably not "best practice", but it got the job done.

  1. #shamelessPlug
    A podcast, you say? Why yes! be sure to check out A Question of Code in your podcatcher of choice. ↩︎

  2. Convienently, the syntax is the same for Liquid (which is the other popular templating language used with Eleventy) ↩︎

  3. Note to self, Twitter cards don't like relative paths for images! ↩︎

Related posts

If you enjoyed this article, RoboTom 2000™️ (an LLM-powered bot) thinks you might be interested in these related posts:

RSS in 2021 (yes, it's still a thing)

Adding an RSS feed to an Eleventy site is (mostly) easy peasy.

Similarity score: 62% match . RoboTom says:

"This is similar to what you've just read because both posts focus on enhancing content distribution for bloggers using specific technologies (Eleventy in both cases) and highlight customization of your blog to provide better control over how content is shared and appears externally."

Static site generators: Hugo vs Jekyll vs Gatsby vs 11ty

I have an obsession with SSGs, and Eleventy is my favourite (even better than Hugo, Jekyll, and Gatsby).

Similarity score: 56% match (okay, so not very similar). RoboTom says:

"This is similar to what you've just read because both posts discuss the practical application and advantages of using Eleventy (11ty) in web development projects, connecting how Eleventy facilitates both the creation of Twitter Cards and the construction of efficient static websites."

Newer post:

CSS Naked Day

Published on

Older post:

The things I use

Published on

Signup to my newsletter

Join the dozens (dozens!) of people who get my writing delivered directly to their inbox. You'll also hear news about my miscellaneous other projects, some of which never get mentioned on this site.