HTML OG标签对社交分享有要求吗_社交分享中HTML OG标签用法大全

作者：袖梨 2026-06-28

og:title、og:description、og:image 三标签必须全写且满足硬性约束：标题≤60字符、描述≤200字符、图片为HTTPS绝对URL且≥1200×630px；须静态置于服务端返回的<head>中，动态注入无效；各平台解析逻辑不同，需按微信、微博、Twitter等分别适配。

og:title、og:description、og:image 三个标签必须写全

不写或只写其中一两个，社交平台会降级抓取 <title>、<meta name="description"> 或页面第一张 <img>，结果常是标题被截断、描述为空、图片模糊或拉伸。微信尤其严格——它基本不 fallback，没 og:image 就不显示图；没 og:title 就用域名代替。

这三个值不是“写了就行”，得满足硬性约束：

og:title 建议 ≤ 60 字符；含未转义的 & 会被微信截断，得写成 &
og:description 建议 ≤ 200 字符；不能全是空格或换行符，否则被直接忽略
og:image 必须是 HTTPS 绝对 URL（如 https://example.com/img/cover.jpg）；尺寸建议 ≥ 1200×630 px；格式优先 .jpg 或 .png；HTTP 图片在 HTTPS 页面中会被微信屏蔽

OG 标签必须静态存在于服务端返回的 <head> 中

React/Vue 动态注入、document.createElement('meta')、或者塞在 <body> 里，社交平台爬虫都看不到。Facebook 的 facebookexternalhit、微信的 UA、LinkedIn 爬虫，全部只解析原始 HTML 的 <head>，且不执行 JS。

常见错误场景：

立即学习“前端免费学习笔记（深入）”；

Nuxt/Next.js 项目用了 useHead 但没走 SSR，生成的是空字符串
SSG 静态站点把所有页面 og:title 写死成 “首页”，/post/123 分享出来还是“首页”
后端模板（如 EJS、Django）漏传变量，导致 content 属性为空

验证方式很简单：用 curl https://yoursite.com/post/123 或直接「查看网页源代码」，搜索 og:title，确认它真实出现在 <head> 里，且 content 有值。

og:image 加载失败的真正原因往往不是代码写错

写了 <meta property="og:image" content="https://xxx.jpg"> 却没图？先别改 HTML，排查这几点：

图片 URL 返回状态码不是 200（比如 404、403、302 跳转到登录页）
响应头缺失 Content-Type: image/jpeg 或 image/png
图片资源跨域但没配好 CORS（尤其用 CDN 或对象存储时）
服务器对爬虫 UA 做了拦截（比如 Nginx 拦了 facebookexternalhit）
微信要求图片必须可被公网直连，本地开发用 localhost 或内网地址必然失败

调试工具比猜更有用：Facebook Sharing Debugger 会明确告诉你图片是否可访问、响应头是否合规；微信可用「公众号网页调试」或让朋友长按链接→浮窗→再点开，看预览图是否加载成功。

不同平台对 OG 标签的支持程度差异极大

一套 OG 标签打天下？不行。各平台读取逻辑和兜底策略完全不同：

微信：只认 og:title、og:description、og:image，其他如 og:url 几乎无效；强制要求 og:image 是 HTTPS 绝对路径；不读 twitter: 前缀
微博：优先读 weibo:card、weibo:title 等自有 meta，OG 是备选；若 fallback 到 OG，描述会被硬截成 140 字以内
Twitter(X)：已弃用 OG 行为，必须单独加 <meta name="twitter:card" content="summary_large_image"> 等 twitter: 标签，否则无图甚至只显示链接