og标签必须由服务端在html的中输出，且需包含合法og:url、og:type、og:image（https绝对路径并声明尺寸）等完整字段，配合平台特有标签如twitter:card和微信mp:wx:preview_image，并手动刷新爬虫缓存。
HTML文档结构本身不直接影响社交预览，但决定OG标签能否被爬虫正确读取——关键不在“怎么写结构”，而在“OG标签是否出现在服务端返回的原始HTML中、位置是否合法、内容是否符合平台校验规则”。
og:* 标签必须在
社交平台爬虫（如 Facebook External Hit、LinkedIn Bot）只解析服务端响应的 HTML 字符串，完全忽略 JS 执行结果。如果你用 React/Vue 的 CSR 模式， 里只有空壳，og:title 等靠 useEffect 插入，那爬虫永远看不到。
- Next.js 用户必须用
generateMetadata（App Router）或next/head（Pages Router），确保数据在 HTML 渲染前就绪 - Nuxt 3 要用
useHead并配合服务端 fetch，不能依赖客户端onMounted - 纯静态站点（如 Hugo/Jekyll）直接在模板
写死或变量注入，最稳妥 - 检查方式：用
curl -s https://yoursite.com/page | grep 'og:title'，输出为空 = 标签没进 HTML
og:image 的 URL 必须是 HTTPS 绝对路径且可公开访问
不是“写了就行”，而是平台会主动发起 HTTP 请求拉图，并做多层校验。90% 的无图问题出在这里，而非 HTML 结构本身。
-
og:image值必须以https://开头，/img/cover.jpg或//cdn.example.com/xxx.jpg全部无效 - 图片服务器响应必须是
200 OK，不能有302重定向、403防盗链拦截（微信 X5 不带 Referer）、404 - 响应头需含
Access-Control-Allow-Origin: *，否则 Twitter/LinkedIn 预取失败 - 必须声明尺寸：
<meta property="og:image:width" content="1200">和<meta property="og:image:height" content="630">
缺 og:url 或 og:type 会导致整个卡片 fallback
很多页面只加了 og:title 和 og:image，结果 LinkedIn/Facebook 显示默认标题+首段文字——根本原因是元数据不完整，平台直接降级处理。
-
og:url必须与用户实际分享的链接**完全一致**：协议、大小写、尾部斜杠都不能错，也不能含utm_*或jsessionid -
og:type只能是website、article、profile三者之一，填page或空字符串会被忽略 - 动态生成时，后端要校验字段非空，避免输出
og:url=""这种致命错误 - 微信朋友圈基本无视
og:image，但强制要求og:url和og:title同时存在且合法
Twitter 和微信需要额外的非 og:* 标签
Open Graph 是基础，但各平台有自己优先读取的字段。只写 og:* 就像只交语文卷子去考综合科——漏掉的分全扣在预览效果上。
- Twitter 必须有
<meta name="twitter:card" content="summary_large_image">，否则默认用纯文本卡片 -
twitter:title和twitter:description要单独写，内容可比og:*更短、加 emoji，Twitter 优先读它们 - 微信朋友圈不认
og:image，但支持<meta name="mp:wx:preview_image" content="...">（需微信 JS-SDK 配合） - 所有平台都要求
og:title和og:description是纯文本，不能含 HTML 标签或未转义引号，否则可能整段被丢弃
最容易被忽略的其实是缓存：Facebook 调试工具、微博后台、LinkedIn 的爬虫都会长期缓存 OG 数据，改完 HTML 后不手动刷新，看到的永远是旧效果。验证前先去对应平台的调试页点“Scrape Again”，别只信浏览器右键“查看源码”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
