Preview image not showing up on X (Twitter)

[plasmamainlinedesign]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

Hi, when I share my main url on X (Twitter), it shows up with the preview image I set in _config.yml under social_preview_image. However, for my posts I include a preview image in the header like so:

image:
    path: <path to image>
    alt: <description>

However, this does not show up on X when I share the direct link to the post. It does show the preview image on Messenger though.

Operations you have already tried

I think it may be related to this excerpt from _includes/head.html:

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

    {% unless src contains '://' %}
      {%- capture img_url -%}
        {% include img-url.html src=src img_path=page.img_path absolute=true %}
      {%- endcapture -%}

      {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
      {%- capture new_url -%}{{ img_url }}{%- endcapture -%}

      {% assign seo_tags = seo_tags | replace: old_url, new_url %}
    {% endunless %}

  {% elsif site.social_preview_image %}
    {%- capture img_url -%}
      {% include img-url.html src=site.social_preview_image absolute=true %}
    {%- endcapture -%}

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

    {%- capture twitter_image -%}
      <meta property="twitter:card" content="summary_large_image" />
      <meta property="twitter:image" content="{{ img_url }}" />
    {%- endcapture -%}

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

If I read this correctly, the twitter:card and twitter:image tags are only set if I don't specify a page-specific image. Is this correct? And if so, can I fix this myself if I am generating the site from chirpy-starter?

Anything else?

No response

[kungfux]

can I fix this myself if I am generating the site from chirpy-starter

Yes, you can give it a try by copying _includes/head.html from this repo into your own and modifying it according to your thoughts. Please give it a try and let me know as I have no account there.

You may find this link useful. Especially the part regarding URL Crawling & Caching.

Good luck.

[plasmamainlinedesign]

I moved the end if statement in the original post to the line above capture go_image as seen here and added the robots.txt file here to my assets directory. This has fixed the issue, though I am unsure whether both changes are necessary or one suffices.

[kungfux]

Thanks for sharing.
It looks like the following change fixes it:

+ <meta property="twitter:card" content="summary_large_image" />
+ <meta property="twitter:image" content="{{ img_url }}" />
- <meta name="twitter:card" content="summary_large_image" />
- <meta name="twitter:image" content="{{ img_url }}" />

P.S. I have used Chrome extension to test it.

That's interesting because they say:

while Twitter cards use name and content. Twitter’s parser will fall back to using property and content, so there is no need to modify existing Open Graph protocol markup if it already exists.

[Hrovatin]

Will this fix be also added to the chirpy repo?

[kungfux]

It was merged in #1615