UD5工具箱
Twitter Card
Twitter Card 是 Twitter/X 平台提供的一种富媒体展示格式，用于在推文中以视觉化卡片形式呈现链接内容。当一个包含 Twitter Card Meta 标签的网页链接被分享到 Twitter 时，平台会自动将纯文本链接渲染为包含标题、描述、图片等元素的富媒体卡片。Twitter Card 的主要目的是提升链接在社交媒体上的视觉吸引力和点击率，让用户在不离开信息流的情况下就能了解链接内容的大致信息。Twitter 官方定义了多种卡片类型，包括 Summary、Summary Large Image、Player 和 App 等，每种类型适用于不同的内容场景。
Summary Card（小图卡片）
Summary Card 是 Twitter Card 的基础类型，在推文中以紧凑的格式展示链接信息。卡片布局为左侧显示一张正方形缩略图（推荐尺寸 144×144 像素，最小 120×120 像素），右侧显示标题和简短描述。Summary Card 适用于大多数常规网页内容的分享场景，如新闻文章、博客帖子、产品页面等。它的优势在于占用空间较小，不会在信息流中过度占据用户的视觉注意力，同时仍然能够提供足够的视觉信息来吸引点击。配置 Summary Card 需要将 twitter:card 标签的值设置为 "summary"。
Summary Large Image Card（大图卡片）
Summary Large Image Card 是 Summary Card 的扩展版本，在卡片顶部展示一张宽幅大图（推荐尺寸 1200×630 像素，最小 300×157 像素），图片下方显示标题和描述。相比小图卡片，大图卡片具有更强的视觉冲击力和信息传达能力，适合用于需要突出视觉内容的场景，如产品展示、活动宣传、视觉故事、摄影作品分享等。大图卡片在 Twitter 信息流中占据更大的面积，能够更有效地吸引用户注意力，但也可能因为占用空间较大而引起部分用户的反感。配置大图卡片需要将 twitter:card 标签的值设置为 "summary_large_image"。
Meta 标签
Meta 标签是 HTML 文档 <head> 区域中的特殊标签，用于向浏览器和社交媒体平台提供页面的元数据信息。对于 Twitter Card 而言，所有配置信息都通过以 "twitter:" 为前缀的 Meta 标签来传递，如 twitter:title、twitter:description、twitter:image 等。Meta 标签不会直接显示在网页的可视区域中，但会被 Twitter 的爬虫程序读取和解析，用于生成推文卡片的渲染数据。正确配置 Meta 标签是确保 Twitter Card 正常工作的前提条件，标签的格式、位置和内容都必须符合 Twitter 官方规范。
twitter:card
twitter:card 是 Twitter Card 配置中最核心的 Meta 标签，用于指定卡片的类型。该标签的值决定了卡片的整体布局和展示形式。常见的可选值包括："summary"（小图卡片，图片在左侧，标题和描述在右侧）、"summary_large_image"（大图卡片，大图在上方，标题和描述在下方）、"player"（播放器卡片，嵌入音频或视频内容）和 "app"（应用卡片，推广移动应用下载）。twitter:card 标签是唯一必需的 Twitter Card 标签，如果不设置此标签，Twitter 将无法识别页面的卡片类型，链接分享时将回退到默认的纯文本格式。
twitter:title
twitter:title 标签用于定义推文卡片上显示的标题文字。这个标题是卡片中最醒目的文本元素，直接影响用户是否会点击阅读。Twitter 官方建议标题长度控制在 70 个字符以内，超过这个长度的部分可能会在某些设备或界面布局下被截断显示。标题应当简洁有力、准确概括链接内容的核心信息，同时具有足够的吸引力来激发用户的好奇心和阅读欲望。如果未设置 twitter:title 标签，Twitter 会尝试使用 HTML 文档中的 <title> 标签内容作为替代，但这并不能保证最佳的显示效果，因此建议始终显式设置此标签。
twitter:description
twitter:description 标签用于定义推文卡片上显示的描述文字，出现在标题下方，为用户提供关于链接内容的补充信息。Twitter 官方建议描述长度控制在 200 个字符以内，超出部分同样可能被截断。描述文字应当简明扼要地概括页面内容的要点，帮助用户在不点击链接的情况下就能判断内容是否与自己相关。好的描述能够有效提升卡片的点击率，因为它为用户提供了做出点击决策所需的关键上下文信息。建议在描述中自然融入关键词，既能提升可读性，又能在 Twitter 搜索中获得更好的匹配。
twitter:image
twitter:image 标签用于指定推文卡片上显示的图片 URL 地址。图片是 Twitter Card 中最具视觉吸引力的元素，一张高质量的图片能够显著提升卡片的点击率和互动率。Twitter 官方推荐的图片尺寸为 1200×630 像素（适用于大图卡片）或至少 144×144 像素（适用于小图卡片的缩略图），图片文件大小不超过 5MB，支持 JPG、PNG 和 GIF 格式。图片 URL 必须是绝对路径（以 https:// 开头），不能使用相对路径。此外，图片必须可以通过公开访问获取，不能设置访问权限限制，否则 Twitter 的爬虫将无法加载图片。
twitter:site
twitter:site 标签用于指定与该网站关联的 Twitter 账号，在卡片上以 @username 的形式显示在标题下方。这个标签的作用是为推文卡片添加品牌归属信息，让用户知道内容来自哪个组织或品牌的 Twitter 账号。账号格式为 @ 加上 Twitter 用户名（不包含 @ 符号本身），例如 "@ud5com"。设置 twitter:site 标签不仅能够增强卡片的品牌辨识度，还能够在用户通过其他账号转发包含该卡片的推文时，自动添加对网站账号的引用，从而增加品牌曝光度。建议所有网站都配置此标签，即使其他标签暂时留空。
twitter:creator
twitter:creator 标签用于指定创建该页面内容的个人 Twitter 账号，与 twitter:site 标签的区别在于，site 标签指向的是网站或品牌的官方账号，而 creator 标签指向的是具体内容的作者或创作者的个人账号。这个标签在多人协作的内容平台上特别有用，它能够在卡片上同时展示品牌账号和作者个人账号，既体现了品牌归属，又为内容创作者提供了个人品牌曝光的机会。如果你是独立运营的个人博客或自媒体，可以将 site 和 creator 设置为同一个账号。此标签为可选标签，但对于内容创作者生态而言具有重要价值。
Twitter Card Validator
Twitter Card Validator 是 Twitter 官方提供的在线验证工具，用于检查网页的 Twitter Card Meta 标签是否正确配置。使用方法是输入目标页面的 URL，工具会模拟 Twitter 的爬虫程序抓取页面内容，解析 Meta 标签，并返回卡片的渲染结果以及任何配置错误或警告信息。Twitter Card Validator 是部署 Twitter Card 后进行最终验证的权威工具，建议在每次修改 Meta 标签后都使用它来确认配置的正确性。需要注意的是，Twitter 会对已验证的页面进行缓存，因此修改 Meta 标签后可能需要等待一段时间或使用不同的 URL 参数来刷新缓存。
Open Graph 协议
Open Graph 协议（简称 OG 协议）是由 Facebook 主导的一套网页元数据标准，用于控制链接在社交媒体平台上分享时的显示方式。OG 协议定义了一系列以 "og:" 为前缀的 Meta 标签，如 og:title、og:description、og:image 等，功能与 Twitter Card 的 twitter: 前缀标签类似但有所区别。Twitter 同时支持读取 Twitter Card 标签和 Open Graph 标签，当某个 twitter: 前缀标签缺失时，Twitter 会尝试从对应的 og: 标签中获取信息作为降级方案。然而，为了确保最佳的显示效果和完全的控制权，建议始终显式配置 Twitter Card 专用标签，而不是依赖 Open Graph 标签的降级机制。