HTML Open Graph属性优化社交媒体分享卡片预览教程

分享链接时，卡片预览总是不对劲——图片是错的，标题是乱的，描述也莫名其妙。这背后，十有八九是 Open Graph (og) meta 标签出了问题。

为什么分享链接时卡片总是显示错图片或标题

问题的根源，通常指向两个方向：要么是 og 标签本身写错了，要么就是被页面里其他的 meta 标签（比如 Twitter Card）给干扰了。你得明白，当浏览器或者微信、Facebook 这些社交平台来抓取你的页面时，它们只看 区域里那些以 og: 开头的属性，而且基本只抓一次。如果标签顺序不对、关键字段缺失、或者图片路径不合法，平台就会启动“备用方案”——可能随机抓取页面里的第一张图片或者第一个标题来凑数，结果自然就不可控了。

想让卡片乖乖听话，必须同时满足三个条件：标签必须放在 里、og:url 和 og:type 这两个字段必须存在、og:image 必须是一个能公开访问的绝对 URL。

• og:url：这个地址必须和用户实际分享出去的 URL 分毫不差，包括协议（http/https）、大小写、结尾有没有斜杠。不一致的话，平台可能误判为不同页面，从而展示错误的缓存卡片。
• og:image：图片尺寸有讲究，推荐至少 1200×630 像素，宽高比保持在 1.91:1 左右。如果图片小于 200×200 像素，很可能会被平台直接忽略掉。
• og:description：描述文字如果超过 200 个字符，大概率会被截断。尤其是在微信这类国内平台，它们往往只显示前 50 到 80 个字，所以一定要把最核心的信息放在最前面。

怎么验证 og 标签是否生效

这里有个常见的误区：改完代码后，别指望刷新一下页面就能看到效果。绝大多数平台，包括微信，都会把卡片的元数据缓存起来，时间可能长达 24 到 72 小时。所以，最靠谱的方法是使用各平台官方的调试工具来“强制刷新”：

• Facebook：使用其官方的 Sharing Debugger 工具，输入你的 URL，然后点击 Scrape Again。同时，留意工具显示的 “Redirect Path” 是否有跳转，以及 “Response Code” 是否为 200。
• LinkedIn：使用它的 Post Inspector。这个工具会清晰地告诉你哪些 og:title 缺失了，或者 og:image 返回的 HTTP 状态码是不是无效的（比如 403 或 404）。
• 微信：微信没有公开的调试器，但可以取巧。在 iOS 的微信里，长按链接选择“在 Safari 中打开”，然后查看网页源代码，确认标签是否存在。也可以借助第三方工具如 opengraph.xyz 来检测 HTML 结构，不过它无法完全模拟微信的真实抓取环境。

另外提一点：对于 HTTPS 页面，og:image:secure_url 这个标签不是必需的。但如果用了，一定要确保它和 og:image 指向同一张图片，否则部分平台可能会拒绝加载。

WordPress / Next.js / 静态站怎么安全注入 og 标签

在动态生成 og 标签时，一不小心就容易踩坑，比如把变量拼成未转义的 HTML，或者传了个空字符串，导致整个 解析失败。记住一个核心原则：优先服务端渲染、避免用 Ja vaScript 注入、对所有传入的值做基础校验。

• WordPress：如果不依赖插件，可以在主题的 functions.php 文件里，通过 wp_head 这个钩子来输出标签。记得用 esc_url() 函数处理 og:image 的链接，用 wp_strip_all_tags() 来清洗 og:description 里的文本。
• Next.js (App Router)：在 generateMetadata 函数里返回一个对象，直接在 openGraph 字段下设置，比如 images: [{ url: "/cover.jpg" }]。注意，这里的路径必须是相对于根目录的路径或者绝对 URL，像 /cover.jpg 这样的写法，Next.js 会自动帮你补全为 https://yoursite.com/cover.jpg。
• 静态站（如 Hugo/Jekyll）：在模板中使用条件判断来输出。例如在 Jekyll 里可以这样写：{% if page.og_image %}{% endif %}，这样可以避免输出一个空的 content="" 属性。

这里有个红线要划清：千万不要在客户端用 Ja vaScript 动态写入 标签。平台的爬虫根本不会去执行你的 Ja vaScript，所以这样写完全无效。

微信和微博对 og 标签的支持差异在哪

不同平台对 og 标签的“脾气”可不一样。微信几乎只认 og:title、og:description、og:image 这三个核心字段，而且是“覆盖式”使用——如果页面里同时存在 twitter:title 和 og:title，微信会毫不犹豫地选择后者。但微博就不同了，它会优先读取自家的 weibo:card 和 weibo:title 等标签，把 og: 标签仅仅当作一个备选方案。

• 微信的特殊要求：它对 og:image 比较挑剔，要求图片链接必须是 **HTTPS 协议、不能有重定向、并且响应头里必须包含正确的 Content-Type: image/***。如果你用了 CDN 并回源到私有的对象存储（比如腾讯云 COS 或 MinIO），但没配置好正确的 MIME 类型，图片很可能显示成一个灰色方块。
• 微博的扩展支持：微博支持 weibo:image 标签，并且允许传入多张图片（用英文逗号分隔），而标准的 og:image 只能指定一张。如果你想在微博上展示多图卡片，就必须同时准备两套标签。
• 视频内容的处理：两者目前都不太支持用 og:video 来直接生成视频卡片。如果想实现视频预览，通常需要走各自平台的专属 API，比如微信的“网页视频播放器”组件。

最稳妥的适配策略是：以标准的 og: 协议为基础，把必需的标签写全，然后再根据目标平台（如微博）补充它们专属的扩展标签。千万不要反过来，只依赖某一家的特殊属性，那样在其他平台上很可能失效。