SuperAPI AI 工具集

twitter-cards

前端与建站

查看项目

更新于 10-16 06:42

技能介绍

用途:解决在 X(Twitter)分享页面时只显示裸链接的问题。Twitter Card 元标签可为分享卡片补充图片与描述,提升社交流量点击率。适用于任何计划在 X 上分享的页面,也适用于审查社交分享预览或为新站点补充社交元标签。

主要能力与要求:在 <head> 中添加 <meta name="twitter:card" content="summary_large_image"> 以启用富预览;最少需要的标签为 twitter:card、twitter:title、twitter:description。若缺少 Twitter 专属标签,X 会回退到 Open Graph 标签(og:title、og:image)。summary_large_image 推荐图片尺寸为 1200×630 px,最大 5 MB,支持 JPG/PNG/WebP。

检查方式:检查 <head> 中是否存在 twitter:card、twitter:title、twitter:description、twitter:image,确认卡片类型有效(summary 或 summary_large_image),并在 X Card Validator 中测试 URL。

修复方式:给 <head> 添加必需的 Twitter Card 元标签;文章/博客页面使用 summary_large_image;确保 twitter:image 指向绝对 URL,图片至少 300×157 px(理想为 1200×630 px)且小于 5 MB。

代码审查:审查与添加 Twitter Card 元标签相关的元数据生成、渲染后 HTML、结构化数据与响应头,指出面向搜索的输出违反该规则的具体路由或模板,并说明如何验证最终页面输出。完整实现细节、代码示例与框架相关指导见 references/rule.md。规则页面:https://frontendchecklist.io/rules/seo/twitter-cards。

限制:本资料未提供定价、平台支持范围之外的收费信息、具体框架实现步骤及其他未列明内容。