技能介绍

问题：裸链接的预览是「黑箱」

当你在群里贴一个 URL，多数平台只能显示一串文字加一个小图标。缺少结构化元数据时，Facebook、LinkedIn、Slack、Discord 等平台无法判断页面内容，只好给出最朴素的展示。资料中提到，配置正确的 Open Graph 标签后，点击量通常是裸链接的 2–3 倍。差距不来自设计，而来自是否告诉平台：这张卡片该显示什么。

技能如何工作

这个技能把 OG 标签拆解成可执行的最小集合：

四个必备标签：og:title 控制在 60 字符内且贴合内容；og:description 写 150–200 字符并偏向转化；og:image 必须使用 https:// 绝对地址，推荐 1200×630px；og:url 用规范地址避免重复分享被拆散。
推荐补充标签：og:type 标注 website/article/video/product，og:site_name、og:image:width/og:image:height、og:image:alt、og:locale 分别处理站点名、图片尺寸、可访问性和多语言地区。
图片规范：1200×630px（1.91:1），JPG/PNG/WebP 且小于 5MB，一律绝对 URL，尽量每页一张独立图。
实现与验证：给出 Next.js（App Router）和通用 HTML 两种写法；改完后用 Facebook Sharing Debugger 和 LinkedIn Post Inspector 实际抓取预览确认。

适用边界

它只负责把 og:image 设置进去；如果需要程序化生成图片，应交给 og-image-generator。文章页记得用 og:type: article，og:url 要与 canonical 一致，Twitter 会回退到 OG 标签。另外，本技能不自动安装依赖或改动系统权限，涉及发布、部署等外部写入时，会先展示目标和影响并等你明确确认。