Twitter card with large summary image not working with jekyll seo tag plugin

Help
1

I’m using jekyll seo tag to automate meta tags generation for my blog.

The following meta tags about twitter is generated by Jekyll seo tag:

<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://yixtian.com//images/2023-04-25-1-hangzhou.jpg" />
<meta property="twitter:title" content="A first look at learning, from a slow learner" />
<meta name="twitter:site" content="@YixinTian123" />
<meta name="twitter:creator" content="@YixinTian123" />

which is different from twitter’s official documentation on twitter card where they use name prop in meta tags instead of property

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Has anyone encountered similar issue?
image

2

Same thing with facebook. No summary image being displayed. This is a new blog so I suspect it might take crawler some time to crawl the image?

3

I do not use the Jekyll SEO Tag Plugin. Instead, I use Liquid to create variables and then put them into the <head /> section of each post as an include in the layout:

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@billraymonde" />
  <meta name="twitter:title" content="{{- page.title -}}">
  <meta name="twitter:image" content="{{- card-filename -}}">

I also add the Open Graph standard so most other social media sites can easily generate the image, like this:

  <meta property="og:image" content="{{- card-filename -}}">
  <meta property="og:description" content="{{- page.title -}}"/>
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="675">

Rather than attempt creating a new post on Twitter, try using their Card Validator that will reload your image. In the past, when I cared about Twitter, my cards displayed correctly after the fact.

Look at the source of this Jekyll post. That link contains the following output:

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@billraymonde" />
  <meta name="twitter:title" content="Using metrics to drive value delivery">
  <meta name="twitter:image" content="https://www.agileinaction.com/uploads/wf-featured-images/2023-05-09-using-metrics-to-drive-value-delivery.png">
  <meta property="og:image" content="https://www.agileinaction.com/uploads/wf-featured-images/2023-05-09-using-metrics-to-drive-value-delivery.png">
  <meta property="og:description" content="Using metrics to drive value delivery"/>
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="675">

Here is the source code (keeping in mind it could change over time: agile-in-action-minima/head.html at main · BillRaymond/agile-in-action-minima · GitHub

Unfortunately, Twitter used to have a nice Card Validator. A certain overlord decided to remove that helpful developer’s tool and move it to the Twitter Campaign tool, where you must create an ad to test your card. Therefore, you might want to try using this tool to ensure the format is correct for your website.

Sometimes you will be testing your link over and over again, and it does not display correctly to find out the site will need to re-crawl the site, so if that tool I just shared displays correctly and Twitter does not, maybe give it some time or try re-adding your link in a private browsing session.

I hope this helps!

1 Like
4

Thanks so much Bill. I’ve added Liquid template to my head.html (they’re pretty handy to use).

I also tested my url using the new Twitter card validtor you provided and seemed that the summary image is working now. It might take some time for Twitter crawler to recrawl my blog so let’s see (fingers crossed)

1 Like
5

Great! I hope it works out for you! Sometimes it is the crawler and sometimes it is cookies or session variables, or local storage that reads the original cached image, so very often I can open a different browser or use private mode and the social media platform will immediately pull the new image.