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

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 '://' %}
    {%- 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 }}

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

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

try removing

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

from top of head ?

testing open graph shows ok

https://www.opengraph.xyz/

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

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

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

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 🤣

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

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

@timothystewart6 looks good bring it on home

@timothystewart6 I just submitted one

@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).

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

@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