页面图片在Twitter分享时无法显示的技术咨询

问题描述 #

我有一个包含图片的页面，分享到Twitter时图片无法加载，但分享到其他平台时图片可正常展示。相关页面代码片段如下：

...
<main id="main">

    <section class="single-page">
      
        <div class="container" data-aos="fade-up">
          <div class="row">
            <div class="col-lg-8">
                <h2 >Lorem Ipsum is not simply random </h2>
              <div class="d-flex align-items-center details-post-data">
                <div class="post-meta d-flex">
                  <p class="post-author">Mystic Rivers </p>
                  <p class="post-sperator"> - </p>
                  <p class="post-date">
                    <time datetime="2023-01-01">02-04-2024 16:00</time>
                  </p>
                </div>
                  <p><br/>&nbsp;</p>
              </div>
              <div class="col-lg-12">
                <img src="/assets/images/blog/saturn.jpg" class="img-fluid rounded-4 mb-4"  />
              </div>
...

相关截图显示：Twitter分享卡片中未加载出图片，仅展示了标题和基础文字内容。

原因分析 #

Twitter抓取分享内容时，严格依赖Open Graph（OG）元标签来获取图片、标题等核心信息。你的页面未配置这类标签，导致Twitter无法识别要展示的图片；而其他平台可能会自动解析页面内的图片资源，因此能正常显示。

解决方案 #

1. 添加OG元标签
   在页面的<head>标签内添加以下元标签，注意og:image必须使用完整的绝对URL（不能用相对路径）：

<!-- Open Graph 分享标签 -->
<meta property="og:title" content="Lorem Ipsum is not simply random" />
<meta property="og:description" content="填写页面的简短描述内容" />
<meta property="og:image" content="https://你的网站域名/assets/images/blog/saturn.jpg" />
<meta property="og:url" content="https://你的网站域名/当前页面的完整URL" />
<meta property="og:type" content="article" />

2. 调整图片规格
   确保图片符合Twitter的要求：推荐尺寸1200×630像素，格式为JPG/PNG，文件大小不超过5MB，避免因规格不符被过滤。

3. 验证并刷新缓存
   使用Twitter官方的卡片验证工具检查标签配置是否正确，确认图片可被正常抓取。若之前分享过该页面，可能需要等待Twitter更新缓存，或使用工具强制重新抓取页面信息。

内容的提问来源于stack exchange，提问作者Nunyet Calçada