og标签不生效主因是og:url与分享链接不一致或og:image不可访问，而非字段遗漏；需确保og:url为https绝对路径且完全匹配、og:image返回200且允许爬虫访问，并通过平台调试工具验证原始html。
加了 OG 标签不生效，大概率不是漏写了字段，而是 og:url 不一致、og:image 返回 404 或被防盗链拦住——这些错误不会报错，但卡片会静默降级为纯链接。
og:url 必须和用户实际分享的 URL 完全一致
这是最容易被忽略却最致命的一环。微信、Facebook、LinkedIn 等平台会用你声明的 og:url 去重新抓取页面，如果它和用户粘贴的链接不完全匹配（协议、大小写、尾部斜杠、UTM 参数等任一不同），就可能：抓到首页、抓到 404、或缓存旧版本卡片。
-
og:url必须是 HTTPS 绝对路径，不能是/article/123或//example.com/article/123 - 动态页（如带
?utm_source=weibo）需服务端去参后输出 canonical 地址，否则同一内容多个 URL 会被当不同页面处理 - 测试时直接用分享平台的调试工具（如 Facebook Sharing Debugger）输入真实分享链接，别只看本地 HTML 源码
og:image 不是“放上去就行”，关键在可访问性
图片挂掉是卡片失效的第一大原因。平台不会提示“图加载失败”，只会默默 fallback 到网页首图、logo，甚至留白。
-
og:image必须是 HTTPS 开头的绝对 URL，file://、相对路径、data:协议全部无效 - 服务器响应必须返回
200 OK，禁止 302 跳转、403 防盗链拦截、或 chunked 编码（部分 Express 默认启用流式响应，需手动设res.setHeader('Transfer-Encoding', 'identity')） - 推荐尺寸 ≥
1200×630px，格式仅用.jpg或.png；WebP在 LinkedIn 和老版 Facebook 上兼容性差 - CDN 或图片服务需允许
facebook.com、twitter.com等域名的HEAD和GET请求，CORS 头不能限制
客户端渲染（React/Vue）页面必须服务端注入 OG 标签
微信、QQ、Facebook 爬虫不执行 JS，document.head.appendChild() 动态插入的 meta 标签完全无效——哪怕你在 useEffect 或 mounted 里加了，也白加。
- SPA 页面必须走 SSR（如 Next.js 的
getServerSideProps）或静态预渲染（如 SSG +getStaticProps）生成真实 HTML - 若用 Nginx/Apache 做反向代理，确保未把
og:*标签过滤掉（某些安全配置会 strip unknownproperty属性） - 调试时用 curl 或浏览器“查看网页源代码”（不是开发者工具 Elements 面板），确认标签真正在原始 HTML 中
别硬塞 twitter:* 或 article:* 标签，先保底再增强
很多团队一上来就堆 twitter:card、article:published_time，结果因字段值格式不对或平台不支持，反而干扰基础解析。
- 起步只需 4 个字段：
og:title、og:description、og:url、og:image，所有主流平台（微信/QQ/微博/Facebook/Discord）都认 -
og:type设为website或article即可，不要自定义类型（如blog_post），Facebook 会 fallback 到website -
twitter:*标签只对 Twitter/X 生效；Facebook 不读它，但若没写og:*，会 fallback 读twitter:*—— 所以优先写og:*，有余力再补twitter:card=summary_large_image等
真正卡住人的是细节：比如 og:image 的响应头缺 Content-Length，或 og:url 少了个结尾斜杠，或服务端用了 gzip 流式压缩但没设 Content-Encoding。这些问题不会报错，只能靠平台调试工具抓原始响应看 headers 和 status code。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
