技能介绍

要解决的问题

页面链接被分享到微信、Twitter/X、Facebook、LinkedIn 等平台时，平台会读取页面里的 Open Graph（OG）元数据并渲染一张预览卡片。如果缺少 og:image、og:title、og:description 这类标签，或者封面图尺寸、路径不对，分享出去的就是一个光秃秃的链接：没有封面、品牌感弱、点击率低。手动为每个页面配 1200×630 的封面图、写 meta 标签、再验证爬虫能否正确抓取，是一件重复且容易出错的体力活。

技能如何工作

这个技能面向 Frontend Development 场景下的 open graph creator 任务，核心能力包括：

按步骤给出 open graph creator 的操作指引，而不是只丢一段代码
遵循行业内的最佳实践与模式
生成生产可用的代码与配置（如 OG meta 标签及相关配置）
按通用标准对输出做校验，并返回校验结果与实践建议

典型流程：提出你的分享卡片需求 → 技能给出分步指引并生成对应的配置/代码 → 校验输出 → 返回生成的配置、最佳实践建议与校验结果。

适用边界与注意点

前置条件：需要配置好相关开发环境、能访问必要的工具与服务、具备基础前端知识
常见错误：Configuration invalid（缺少必填字段，按文档补全参数）、Tool not found（依赖未安装，按前置条件安装）、Permission denied（权限不足，检查凭证）
它属于前端开发技能类目（标签：react、vue、css、accessibility、web），输出的是代码与配置层面的辅助，实际的封面图素材仍需你自己准备并接入项目
适合在常规前端流程里集成使用，不适合拿来替代完整的设计系统或图片素材生产链路