<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Social Media | Attack on Life</title><link>https://en.1991421.cn/tag/social-media/</link><atom:link href="https://en.1991421.cn/tag/social-media/index.xml" rel="self" type="application/rss+xml"/><description>Social Media</description><generator>Hugo Blox Builder (https://hugoblox.com)</generator><language>en-US</language><lastBuildDate>Sat, 21 Mar 2026 21:56:10 +0800</lastBuildDate><image><url>https://en.1991421.cn/media/sharing.png</url><title>Social Media</title><link>https://en.1991421.cn/tag/social-media/</link></image><item><title>Twitter Card Sharing Configuration</title><link>https://en.1991421.cn/2026/03/21/twitter-card-sharing-configuration/</link><pubDate>Sat, 21 Mar 2026 21:56:10 +0800</pubDate><guid>https://en.1991421.cn/2026/03/21/twitter-card-sharing-configuration/</guid><description>&lt;blockquote>
&lt;p>I often share blog content on Twitter/X, both for pure sharing and personal promotion. Sometimes I notice that blog images don&amp;rsquo;t display correctly, and sometimes the title or content doesn&amp;rsquo;t seem appropriate. After researching, I discovered that Twitter Cards can also be configured. Below are some basic configuration items for your reference.&lt;/p>
&lt;/blockquote>
&lt;h2 id="configuration">
&lt;a class="heading-anchor-link" href="#configuration">Configuration&lt;/a>
&lt;button
class="heading-anchor"
type="button"
data-anchor="configuration"
aria-label="Copy anchor link"
title="Copy anchor link"
>
&lt;span class="heading-anchor-wrap" aria-hidden="true">
&lt;svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
&lt;path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z">&lt;/path>
&lt;/svg>
&lt;svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
&lt;path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z">&lt;/path>
&lt;/svg>
&lt;/span>
&lt;/button>
&lt;/h2>&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">meta&lt;/span> &lt;span class="na">name&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;twitter:card&amp;#34;&lt;/span> &lt;span class="na">content&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;summary_large_image&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">meta&lt;/span> &lt;span class="na">name&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;twitter:site&amp;#34;&lt;/span> &lt;span class="na">content&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;@alanhe421&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">meta&lt;/span> &lt;span class="na">name&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;twitter:creator&amp;#34;&lt;/span> &lt;span class="na">content&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;@alanhe421&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">meta&lt;/span> &lt;span class="na">name&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;twitter:title&amp;#34;&lt;/span> &lt;span class="na">content&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;Article Title&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">meta&lt;/span> &lt;span class="na">name&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;twitter:description&amp;#34;&lt;/span> &lt;span class="na">content&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;Article Description&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">meta&lt;/span> &lt;span class="na">name&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;twitter:image&amp;#34;&lt;/span> &lt;span class="na">content&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;https://...image-url&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">meta&lt;/span> &lt;span class="na">name&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;twitter:image:alt&amp;#34;&lt;/span> &lt;span class="na">content&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;Image Description&amp;#34;&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="recommendations-for-sharing-article-images">
&lt;a class="heading-anchor-link" href="#recommendations-for-sharing-article-images">Recommendations for Sharing Article Images&lt;/a>
&lt;button
class="heading-anchor"
type="button"
data-anchor="recommendations-for-sharing-article-images"
aria-label="Copy anchor link"
title="Copy anchor link"
>
&lt;span class="heading-anchor-wrap" aria-hidden="true">
&lt;svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
&lt;path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z">&lt;/path>
&lt;/svg>
&lt;svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
&lt;path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z">&lt;/path>
&lt;/svg>
&lt;/span>
&lt;/button>
&lt;/h2>&lt;p>Using my personal blog as an example, the priority order for selecting images is as follows.&lt;/p>
&lt;p>twitter:image priority (high → low):&lt;/p>
&lt;ol>
&lt;li>twitter[0].image (frontmatter twitter: - image:)&lt;/li>
&lt;li>image.filename (frontmatter, HTTP URL)&lt;/li>
&lt;li>First image in content ($first_content_image)&lt;/li>
&lt;li>featured_image file (featured resources in page directory)&lt;/li>
&lt;li>assets/media/sharing.png (site fallback image)&lt;/li>
&lt;/ol>
&lt;h2 id="card-validator">
&lt;a class="heading-anchor-link" href="#card-validator">Card Validator&lt;/a>
&lt;button
class="heading-anchor"
type="button"
data-anchor="card-validator"
aria-label="Copy anchor link"
title="Copy anchor link"
>
&lt;span class="heading-anchor-wrap" aria-hidden="true">
&lt;svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
&lt;path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z">&lt;/path>
&lt;/svg>
&lt;svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
&lt;path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z">&lt;/path>
&lt;/svg>
&lt;/span>
&lt;/button>
&lt;/h2>&lt;p>In the past, to verify if the configuration was correct, you could access the &lt;a href="https://cards-dev.x.com/validator" target="_blank" rel="noopener">Card validator&lt;/a>. 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&amp;rsquo;s correct without actually publishing.&lt;/p>
&lt;p>&lt;figure class="image-figure">
&lt;img
src="https://static.1991421.cn/2026/03/2026-03-21-220504.jpeg"
alt="https://static.1991421.cn/2026/03/2026-03-21-220504.jpeg"
loading="lazy"
decoding="async"
class="rounded-lg"
/>
&lt;/figure>&lt;/p>
&lt;h2 id="final-result">
&lt;a class="heading-anchor-link" href="#final-result">Final Result&lt;/a>
&lt;button
class="heading-anchor"
type="button"
data-anchor="final-result"
aria-label="Copy anchor link"
title="Copy anchor link"
>
&lt;span class="heading-anchor-wrap" aria-hidden="true">
&lt;svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
&lt;path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z">&lt;/path>
&lt;/svg>
&lt;svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
&lt;path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z">&lt;/path>
&lt;/svg>
&lt;/span>
&lt;/button>
&lt;/h2>&lt;p>&lt;figure class="image-figure">
&lt;img
src="https://static.1991421.cn/2026/03/2026-03-21-221807.jpeg"
alt="https://static.1991421.cn/2026/03/2026-03-21-221807.jpeg"
loading="lazy"
decoding="async"
class="rounded-lg"
/>
&lt;/figure>&lt;/p>
&lt;h2 id="configuration-correct-but-not-working">
&lt;a class="heading-anchor-link" href="#configuration-correct-but-not-working">Configuration Correct, But Not Working?&lt;/a>
&lt;button
class="heading-anchor"
type="button"
data-anchor="configuration-correct-but-not-working"
aria-label="Copy anchor link"
title="Copy anchor link"
>
&lt;span class="heading-anchor-wrap" aria-hidden="true">
&lt;svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
&lt;path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z">&lt;/path>
&lt;/svg>
&lt;svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
&lt;path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z">&lt;/path>
&lt;/svg>
&lt;/span>
&lt;/button>
&lt;/h2>&lt;p>It&amp;rsquo;s a caching issue. Try sharing the link again and let X re-fetch it.&lt;/p>
&lt;h2 id="final-thoughts">
&lt;a class="heading-anchor-link" href="#final-thoughts">Final Thoughts&lt;/a>
&lt;button
class="heading-anchor"
type="button"
data-anchor="final-thoughts"
aria-label="Copy anchor link"
title="Copy anchor link"
>
&lt;span class="heading-anchor-wrap" aria-hidden="true">
&lt;svg class="heading-anchor-icon heading-anchor-icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
&lt;path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z">&lt;/path>
&lt;/svg>
&lt;svg class="heading-anchor-icon heading-anchor-icon-copied" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
&lt;path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm107.1 145.1L230.6 325.6c-6.2 6.2-16.4 6.2-22.6 0l-59-59c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l47.7 47.7 121.1-121.1c6.2-6.2 16.4-6.2 22.6 0s6.3 16.4.1 22.5z">&lt;/path>
&lt;/svg>
&lt;/span>
&lt;/button>
&lt;/h2>&lt;p>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.&lt;/p></description></item></channel></rss>