Twitter Card Sharing Configuration

I often share blog content on Twitter/X, both for pure sharing and personal promotion. Sometimes I notice that blog images don’t display correctly, and sometimes the title or content doesn’t seem appropriate. After researching, I discovered that Twitter Cards can also be configured. Below are some basic configuration items for your reference.

Configuration

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@alanhe421">
  <meta name="twitter:creator" content="@alanhe421">
  <meta name="twitter:title" content="Article Title">
  <meta name="twitter:description" content="Article Description">
  <meta name="twitter:image" content="https://...image-url">
  <meta name="twitter:image:alt" content="Image Description">

Recommendations for Sharing Article Images

Using my personal blog as an example, the priority order for selecting images is as follows.

twitter:image priority (high → low):

1. twitter[0].image (frontmatter twitter: - image:)
2. image.filename (frontmatter, HTTP URL)
3. First image in content ($first_content_image)
4. featured_image file (featured resources in page directory)
5. assets/media/sharing.png (site fallback image)

Card Validator

In the past, to verify if the configuration was correct, you could access the Card validator. However, this site is no longer functional. Currently, the only way is to preview directly on X when composing a tweet. You can see if it’s correct without actually publishing.

Final Result

Configuration Correct, But Not Working?

It’s a caching issue. Try sharing the link again and let X re-fetch it.

Final Thoughts

The above are some configuration and usage tips for Twitter Cards. Feel free to reference and use them. If you have better suggestions, feel free to leave comments and discuss.