Skip to content

Supporting Twitter Cards with Jekyll

David Ensinger
(Last updated: )

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.

Summary Card

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:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:title" content="Title">
<meta name="twitter:url" content="URL">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="@creator_username">
<meta name="twitter:image:src" content="http://path/to/image.jpg">

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.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:creator" content="@creator_username">

Title

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.

{% if page.title %}
  <meta name="twitter:title" content="{{ page.title }}">
{% else %}
  <meta name="twitter:title" content="{{ site.title }}">
{% endif %}

URL

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.

{% if page.url %}
  <meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
{% endif %}

Description

Likewise, I have a general site description and a page specific description:

{% if page.description %}
  <meta name="twitter:description" content="{{ page.description }}">
{% else %}
  <meta name="twitter:description" content="{{ site.description }}">
{% endif %}

A different approach to the page description is to escape and truncate the page content, which is how Paul Stamatiou handles it:

<meta name="twitter:description" content="{{ page.content | strip_html | xml_escape | truncate: 200 }}">

Image

I’ve also set a default image, if there’s not an image for the current page.

{% if page.image %}
  <meta name="twitter:image:src" content="{{ site.url }}/path/to/image/{{ page.image }}">
{% else %}
  <meta name="twitter:image:src" content="{{ site.url }}/path/to/image/logo.png">
{% endif %}

All Together Now

Here’s what my final block of code looks like:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:creator" content="@creator_username">
{% if page.title %}
  <meta name="twitter:title" content="{{ page.title }}">
{% else %}
  <meta name="twitter:title" content="{{ site.title }}">
{% endif %}
{% if page.url %}
  <meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
{% endif %}
{% if page.description %}
  <meta name="twitter:description" content="{{ page.description }}">
{% else %}
  <meta name="twitter:description" content="{{ site.description }}">
{% endif %}
{% if page.image %}
  <meta name="twitter:image:src" content="{{ site.url }}/path/to/image/{{ page.image }}">
{% else %}
  <meta name="twitter:image:src" content="{{ site.url }}/path/to/image/logo.png">
{% endif %}

Validate

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.