Cover Image Code

Currently, the article cover image feature for X (formerly Twitter) is implemented by modifying the Astro framework, with assistance from Gemini Q&A.

The primary files modified were BaseHead.astro, content.config.ts, and BlogPost.astro.

I won’t document every minute detail here; the changes mainly involved parameter passing and function implementation.

Sharing Results

The image below illustrates three different sharing outcomes:

The bottom entry consists of text + a link + an image (this image was uploaded manually by me, so clicking it does not redirect to the link).

The middle entry represents exactly what I wanted: text + an image (with an embedded link). Clicking the image redirects to the article. Furthermore, this image is automatically scraped from the article’s designated cover image, meaning no separate manual upload is required.

The top entry is the problematic one: text + an image (with an embedded link, but the image displayed is a default placeholder rather than the article’s actual cover). While it is clickable and redirects correctly, the image content does not match the accompanying text, and it lacks the proper link preview thumbnail effect.

Testing with This Article

Theoretically, the middle and top entries should appear identical; however, I am unsure if the discrepancy is due to a caching issue.

Therefore, this new article serves as a test case to verify whether the image displayed on X is indeed the article’s designated cover image, and to determine if caching is the root cause of the issues observed in certain other articles.

The image below has been set as the cover image for this article.