jekyll-theme-chirpy: Twitter Cards Missing Images

@timothystewart6 I just submitted one

@timothystewart6 looks good bring it on home

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 🤣

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 <meta name="twitter:image" content="{{ img_url }}" />. 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 '://' %}
    {%- 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 }}