Jekyll: Twitter Card Image Caching


When regenerating a Twitter Card for a blog post because of image changes, there is an issue with the caching of images used by the card at the Twitter end.

To post a tweet for a blog post, you auto generate it by pasting its link in the Twitter Composer, or when viewing the post in a browser choose to share it, then target Twitter.

There are two formats for blog post notifications on Twitter as Twitter Cards:

  • Summary Card: Title, description, and thumbnail.
  • Summary Card with Large Image: Similar to the Summary Card, but with a prominently-featured image.

For this blog site these are generated using the meta-data via an include file twitter_card.html that in turn uses site properties defined in _config.yml:


<meta name="twitter:card" content="{% if page.pic %}summary_large_image{% else %}summary{% endif %}"/>
<meta name="twitter:site" content="@{{ site.twitter.username }}"/>
<meta name="twitter:creator" content="@{{ site.twitter.username }}"/>
<meta name="twitter:title" content="{{ site.title }}:{{ page.title }}-{{ page.subtitle }}"/>
{% if page.description %}
    <meta name="twitter:description" content="{{page.description }}" />
{% else %}
    <meta name="twitter:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 150 }}{% else %}{{ site.description}}{% endif %}"/>
{% endif %}
{% if page.pic %}
    <meta name="twitter:image:src" content="{{site.url }}/images/{{ page.pic}}"/>
{% else %}
    <meta name="twitter:image:src" content="{{site.url }}/images/{{ site.twitter.thumbnail}}"/>
    <meta name="twitter:image:width" content="{{ site.twitter.thumbnail_width}}" />
    <meta name="twitter:image:height" content="{{ site.twitter.thumbnail_height}}" />
{% endif %}

twitter_card.html

This file is included in the site default template and so is included in every post page. Note the conditionals. The default card template is the Summary. If an an image is specified for the page via the pic property then the Summary with Large Image layout is used and the image specified by that pic property is used as the large image.

The Summary uses a thumbnail image, say a square one 100 to 400 pixels square, that must be no more than 1MB. JPG, PNG, WEBP and GIF formats are supported.

The large image format requires images that support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported.

Elsewhere it is stated that the aspect ratio for the large image is 1.91:1 : “The ultimate guide to Twitter image sizes”.

The Twitter Card Image Issue

At issue is caching at the twitter end. It was found that if, for example, you change the thumbnail image for the Summary format, recreation of the Twitter card for the post does not change, probably due the caching.

Summary Twitter Card where the thumbnail has been correctly referenced.

Summary Twitter Card where the thumbnail has NOT being correctly referenced.

One suggested method is to use the Card Validation Tool. With that you submit the URL of an existing post with Twitter meta-information and then action a validation. The suggested method to “bump” the cache is to enter the link there with some query parameters. That may or may not work ???

The approach I ended using was to slightly rename the post page so that the post is now has a different URL when the site is generated. Changes to the images are then reflected in any regenerated cards.

Large Image Summary Card

With the twitter include file as above, the default card is the Summary format. To use the Large Image format, an image needs to be specified in a page’s FrontMatter in the pic property.

A Large Image Summary Twitter Card.

Nb: page.image wasn’t used as this generated some spurious results. … A fix!

Footnote

The Twitter Card meta-information can be included in at least 3 ways:

  • The twitter_card.html approach as above
  • In an included Open Graphics (og) file
  • Using the seo gem plugin jekyll-seo-tag which uses meta-information in the _config.yml file.

Nb: Whatever way it is done, if more than one is used, the last one in the header for a page takes precedence.

Also, it was found previously that Twitter could find the first image on a page and render a large image card with that. Whether by design or accident, that does not occur now. Hence taking control of what image is used on a card as above.

Further

In another post I saw, a list of all images on a page is provided as FrontMatter for the page. They are then referenced in image tags on th e page using Liquid code as an indexed array. The pic property of the page could also be assigned from the array as well.

 TopicSubtopic
   
 This Category Links 
Category:Web Sites Index:Web Sites
  Next: > Jekyll
<  Prev:   Azure DevOps