构建链接预览所用的标签
当有人把你的链接粘贴到帖子或消息中时，应用会向该页面派发一个抓取工具，读取 <head> 中的若干 <meta> 标签。这些标签来自 Open Graph 协议，其中四个被列为必需：
- og:title：预览中应显示的标题。
- og:type：页面的类型。
website适用于大多数页面，article适用于博客文章。该协议还定义了诸如profile、book、video.movie和music.song等类型。 - og:image：代表该页面的图片 URL。
- og:url：规范 URL，协议称之为该对象的永久 ID。
该协议还定义了可选标签，本生成器会写入有用的几个：og:description、og:site_name，以及图片详情 og:image:width、og:image:height 和 og:image:alt。关于替代文本，协议说得很明确：如果页面指定了 og:image，就应指定 og:image:alt，而该文本描述的是图片中的内容，而非标题说明。
X 新增的内容：twitter:card
X 也会读取 Open Graph。它的 卡片标记参考文档（X 的开发者文档，由于原页面现已跳转，这里通过 Internet Archive 链接）列出了每个标签的后备值：twitter:title 回退到 og:title，twitter:description 回退到 og:description，twitter:image 回退到 og:image，twitter:image:alt 回退到 og:image:alt。因此唯一值得添加的标签是 twitter:card，它决定布局。如果不设置它，同一参考文档指出 X 可能会回退到小型摘要卡片，即便你想要大图卡片：
- summary_large_image：标题上方的全宽图片。X 的 大图卡片页面指出，此类图片支持 2:1 的宽高比，最小尺寸为 300 × 157，最大尺寸为 4096 × 4096 像素，不超过 5MB，格式为 JPG、PNG、WEBP 或 GIF。不支持 SVG。
- summary：带正方形图片的较小卡片。X 的 摘要卡片页面指出，图片支持 1:1 比例，尺寸从 144 × 144 到 4096 × 4096 像素，并会在所有平台上被裁剪为正方形。
同一份参考文档还列出了 app 和 player 卡片，它们需要额外的应用商店或视频播放器字段，因此这里没有包含。文档还规定了上面检查所用的限制：标题 70 个字符，描述 200 个字符，替代文本 420 个字符。
各平台规定的图片尺寸
- LinkedIn：其 让网站可分享的指南 要求提供
og:title、og:image、og:description和og:url，并列出最大文件大小 5 MB、最小尺寸 1200 × 627 像素、推荐比例 1.91:1。 - Meta：其 分享最佳实践 建议为高分辨率屏幕使用宽度至少 1080 像素的图片，并且图片链接广告的图片宽度至少 600 像素。同一页面还要求提供
og:image:width和og:image:height，以便抓取工具无需先下载和处理就能立即渲染图片。
一张 1200 × 630 的图片满足所有要求：对 LinkedIn 来说至少是 1200 × 627，对 Meta 来说宽于 1080，且比例为 1.905:1，与 X 的 2:1 相差在 5% 以内。
检查它，并刷新旧的预览
应用会缓存它们抓取到的内容，所以修复标签并不能修复已经存储的预览。两大网络都为此提供了工具：
- Meta 的 分享调试工具 会显示其抓取工具爬取到的标签，以及任何错误或警告，并触发一次新的抓取。Meta 的 站长指南 对此有说明，最佳实践页面则指出抓取的内容否则会按标准的 24 小时周期更新。
- LinkedIn 的 Post Inspector 会刷新已缓存的 URL。LinkedIn 的 帮助页面 指出，刷新只对新帖子有效：已经包含该 URL 的帖子会保留旧的预览。
这个工具不做什么
它不会抓取你的页面或图片，所以无法看到实际上线的内容，上面的预览只是文字示意，而非真实渲染。它写出标签；你的网站仍需要在页面的 <head> 中、在抓取工具收到的 HTML 里提供这些标签。之后由 JavaScript 添加的标签可能永远不会被看到。它也不会写出 app 或 player 卡片，或 book、video.movie 等类型定义的额外属性。
如果你不想手写这些
Hermoso 让营销自动运转：它会研究你所在市场中已经奏效的广告，制作符合品牌调性的图片和视频广告，安排内容发布，并在你自己的广告账户上投放付费广告。它可在网页应用中使用，也可通过它的 MCP 服务器在 Claude、ChatGPT 和 Cursor 中使用。
免费工具: UTM 链接构建器 · 二维码生成器 · 社交媒体尺寸指南
常见问题
哪些 Open Graph 标签是必需的？
Open Graph 协议列出了四个必需属性：og:title、og:type、og:image 和 og:url。og:description、og:site_name 以及 og:image 的宽度、高度和 alt 标签是可选的，但值得添加。
如果我已经有 og: 标签，还需要 twitter:title 和 twitter:image 吗？
不需要。X 的卡片标记参考说明 twitter:title、twitter:description、twitter:image 和 twitter:image:alt 会回退到对应的 og: 标签。值得添加的是 twitter:card，它用来选择卡片布局。
Open Graph 图片应该用多大尺寸？
LinkedIn 要求至少 1200 × 627 像素、比例 1.91:1、小于 5 MB。Meta 建议至少 1080 像素宽。X 的大图卡片支持 2:1，范围从 300 × 157 到 4096 × 4096。一张 1200 × 630 的图片三者都适用。
为什么我改了标签之后，链接还是显示旧图片？
应用缓存了旧的抓取结果。把该 URL 放进 Meta 的 Sharing Debugger 或 LinkedIn 的 Post Inspector 重新抓取一次。LinkedIn 指出，已经在分享该 URL 的帖子会保留旧的预览。
为什么输出里的引号和 & 符号被改掉了？
它们被做了 HTML 转义，以保证标签有效。像 Tom & Jerry's "Sale" 这样的标题，在 content 属性里会变成 Tom & Jerry's "Sale"，而浏览器和爬虫会把它还原读取为原始文本。
这个工具会加载我的图片吗？
不会。你输入的任何内容都不会被发送到任何地方，图片 URL 也永远不会被抓取，这也是为什么预览显示的是占位图而不是实际图片。