Twitter Cards Missing Images

[timothystewart6]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Describe the bug

When cards render on twitter, the images are missing example tweet

This has worked in the past past working example tweet

Steps To Reproduce

1. Using chirpy theme jekyll-theme-chirpy (6.4.2)
2. visit twitter.com
3. paste link inside of tweet composer
4. see the tweet without an image

Expected Behavior

Twitter cards should render images as they did previously.

Environment

• Ruby: ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin23]
• Jekyll: jekyll 4.3.3
• Chirpy: 6.4.2

  * jekyll-theme-chirpy (6.4.2)
	Summary: A minimal, responsive, and feature-rich Jekyll theme for technical writing.
	Homepage: https://github.com/cotes2020/jekyll-theme-chirpy
	Documentation: https://github.com/cotes2020/jekyll-theme-chirpy/#readme
	Source Code: https://github.com/cotes2020/jekyll-theme-chirpy
	Wiki: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
	Bug Tracker: https://github.com/cotes2020/jekyll-theme-chirpy/issues
	Path: /Users/user/.rvm/gems/ruby-3.2.2/gems/jekyll-theme-chirpy-6.4.2

Anything else?

@bigsk1 suggested this fix in the tweet above, however I didn't want to replace the theme's version of head.html at this time

https://github.com/bigsk1/bigsk1.github.io/blob/main/_includes/head.html

[timothystewart6]

Also, after testing @bigsk1's changes in his repo, I can confirm the card now works. Tested by DM'ing myself on Twitter to (hopefully) prevent caching

[bigsk1]

The issue seems to be needing absolute url for twitter cards

<meta name="twitter:image" content="https://bigsk1.com/assets/images/bigsk1.webp">

not

<meta name="twitter:image" content="/assets/images/bigsk1.webp">

My example in head.html

Twitter Image Meta Tag: In both the {% if page.image %} and {% elsif site.social_preview_image %} sections, I added . This ensures Twitter has the correct image URL for both specific pages and the site-wide fallback.

Absolute URL for Page Image: For page.image, I've ensured the absolute URL is used by applying {{ src | absolute_url }}.

{%- capture seo_tags -%}
  {% seo title=false %}
{%- endcapture -%}

<!-- Setup Open Graph image -->

{% if page.image %}
  {% assign src = page.image.path | default: page.image %}

  {% unless src contains ':https://' %}
    {%- capture img_url -%}
      {{ src | absolute_url }}
    {%- endcapture -%}

    {%- capture og_image -%}
      <meta property="og:image" content="{{ img_url }}" />
      <meta name="twitter:image" content="{{ img_url }}" />
    {%- endcapture -%}

    {% assign old_meta_clip = '<meta name="twitter:card"' %}
    {% assign new_meta_clip = og_image | append: old_meta_clip %}
    {% assign seo_tags = seo_tags | replace: old_meta_clip, new_meta_clip %}
  {% endunless %}

{% elsif site.social_preview_image %}
  {%- capture img_url -%}
    {{ site.social_preview_image | absolute_url }}
  {%- endcapture -%}

  {%- capture og_image -%}
    <meta property="og:image" content="{{ img_url }}" />
    <meta name="twitter:image" content="{{ img_url }}" />
  {%- endcapture -%}

  {% assign old_meta_clip = '<meta name="twitter:card"' %}
  {% assign new_meta_clip = og_image | append: old_meta_clip %}
  {% assign seo_tags = seo_tags | replace: old_meta_clip, new_meta_clip %}
{% endif %}    

{{ seo_tags }}

[timothystewart6]

Thank you @bigsk1. I can confirm after using the local template with these changes, it works techno-tim/techno-tim.github.io@4608f15

[timothystewart6]

hmmm, this seems to have broken it on other platforms (discord)

[bigsk1]

try removing

<meta name="twitter:card" content="summary"> 

from top of head ?

[bigsk1]

testing open graph shows ok

https://www.opengraph.xyz/

[timothystewart6]

interesting. It does look correct on OG however it does not in Discord
https://technotim.live/posts/crowdsec-traefik/

[timothystewart6]

I am not too familiar with liquid but it seem like there's a page image getting assigned and a site image.

[timothystewart6]

I see, now I have 2 og:image tags. Trying to fix

[timothystewart6]

All fixed! Seems like it is now fixed for both twitter and og cards. I have an image preview in twitter and the images on other socials only render once: https://github.com/techno-tim/techno-tim.github.io/blob/master/_includes/head.html

I am happy to open a PR, but @bigsk1 did most of the work and I am not sure if my hacks to his liquid code are right 🤣

[bigsk1]

oh nice I was off trying to solve also and saw this great, let me check it out

[timothystewart6]

Proof that it worked on twitter:
https://twitter.com/TechnoTimLive/status/1748480321060733110

Proof that it worked with OG
https://mastodon.social/@technotim/111785120941155450

I actually posted this on all socials (FB, LinkedIn, etc) and it rendered fine everywhere

[bigsk1]

@timothystewart6 looks good bring it on home

[bigsk1]

@timothystewart6 I just submitted one

[cotes2020]

@timothystewart6 Thanks for submitting this, but it's essential to note that describing a topic in a dozen posts will make it difficult for maintainers to understand the point of the issue.

Since there has already been a PR submitted, I will update the progress of the issue there (#1498).

[timothystewart6]

@cotes2020 the initial issue describes the issue. The other posts are supporting facts.

[bigsk1]

@timothystewart6 I updated the head.html based on some feedback, can you verify all working ok for you, I dont use discord but all is checking out ok for me https://github.com/bigsk1/bigsk1.github.io/blob/main/_includes/head.html