EnlightenCode

Twitter Card 使用指南及注意事项 🐦 ​

什么是 Twitter Card? 🤔 ​

Twitter Card 是一种强大的社交媒体元数据标记，能让你在 Twitter 上分享链接时，展示更丰富的内容预览，而不是简单的纯文本链接。通过正确设置，可以显示精美的图片、标题和描述，大大提升链接的点击率和分享效果。

实现方案 💡 ​

1. Meta 标签设置 ​

设置社交媒体元标签 ：可以通过在 HTML 文档的中包含某些标签，来将这些富媒体社交共享功能添加到你的站点，从而实现定制化分享的显示内容。

html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourtwitterhandle" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your Description" />
<meta name="twitter:image" content="URL_OF_YOUR_IMAGE" />

重要参数说明 📝 ​

  • twitter:card (必填) ⭐

    • summary: 标准卡片
    • summary_large_image: 大图卡片
    • app: 应用展示卡片
    • player: 视频播放卡片

  • twitter:title (必填) ⭐

  • twitter:image: 图片 URL（必须可公开访问）

  • twitter:description: 描述文字

  • twitter:site: 关联的 Twitter 账号

2. 分享实现 ​

javascript
const shareToTwitter = () => {
    const webUrl = encodeURIComponent(`${window.location.href}/${taskId}`);
    const hashtags = ['ChatAvatar', 'GenerativeAI']; // 最多推荐使用 5 个
    const text = encodeURIComponent('分享文案');
    const shareUrl = `https://twitter.com/intent/tweet?text=${text}&url=${webUrl}&hashtags=${hashtags.join(',')}`;
    window.open(shareUrl, '_blank');
}

注意点 ​

  1. 重点是这个 webUrl ，twitter可以解析对应网站，如果设置了twitter card元数据，推文就会展示对应的card信息

    • 如果你的twitter card中的img不需要动态变化，每次分享都展示同一个，就直接使用你对应的window.location.href就可以了，如果需要动态的img，注意以下的工作随记点

  2. hashtags 可以为推文增加#标签 ，起到引流、话题分类的作用，Twitter对单条分享的hashtag数量有限制,一般最多5个左右

  3. encodeURIComponent 用于对 URL 中的特殊字符进行编码，以确保URL 的解析和使用不会出现问题，从而保证系统的稳定性和安全性。

  4. 动态改变展示的meta image URL

  • 前端动态改变meta，Twitter是没有办法捕获的，他拿到的还是之前的meta元数据！！
  • 需要后端提供一个api，大致逻辑如下
    • 前端动态获取到想要改变的img url 传给后端，后端生成对应的html文件，并且meta中拼接好你传过去的img url，然后在script标签中replace到你的推文中twitter card想要跳转到的url地址

工作随记指南 ⚠️ ​

1. 动态图片问题 ​

🔴 重要提示：Twitter 无法捕获前端动态修改的 meta 标签！

解决方案：需要后端配合，提供专门的 HTML 生成 API：

最后我们只需要把share的url改成这个api的地址就好了，twitter拿到分享的url可以读取到meta，并且可以重定向到对应的新地址

html
<html>
<head>
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content="动态图片URL" />
    <!-- 其他 meta 标签 -->
</head>
<body>
    <script>
        window.onload = () => {
            window.location.href = "实际跳转地址";
        }
    </script>
</body>
</html>

2. 图片比例优化 📐 ​

Twitter Card想要完全展示图片，最好控制图片宽高比1.9:1，否则会截取部分

javascript
const optimizeImage = () => {
    const canvas = document.createElement('canvas');
    const width = 1200;  // 推荐宽度
    const height = 630;  // 保持 1.9:1 比例
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, width, height);
    
    // 居中绘制原图
    const originalImage = /* 你的原始图片 */;
    const scale = Math.min(width / originalImage.width, height / originalImage.height);
    const x = (width - originalImage.width * scale) / 2;
    const y = (height - originalImage.height * scale) / 2;
    
    ctx.drawImage(originalImage, x, y, originalImage.width * scale, originalImage.height * scale);
    return canvas.toDataURL();
}

Facebook Open Graph 支持 📱 ​

类似 Twitter Card，Facebook 也有自己的元标签系统：

html
<meta property="og:title" content="页面标题" />
<meta property="og:type" content="article" />
<meta property="og:url" content="页面链接" />
<meta property="og:image" content="展示图片URL" />

常用 og:type 值 📋 ​

  • website: 普通网站
  • article: 文章页面
  • profile: 个人主页
  • video: 视频页面

最佳实践建议 💪 ​

  1. 始终提供高质量的预览图片
  2. 确保所有 URL 都是可公开访问的
  3. 使用 Twitter Card Validator 测试效果
  4. 定期检查图片链接是否有效
  5. 注意文案长度，保持简洁有力