og:title、og:description、og:image三者必须同时存在且内容真实有效，否则社交平台将降级抓取<title>和首段文本甚至显示空白卡片；需服务端静态输出、HTTPS绝对URL、尺寸≥1200×630px，并用平台工具强制刷新缓存。
og:title、og:description、og:image 这三个标签必须同时存在且内容真实有效，否则社交平台会直接降级为提取页面 <title> 和首段文本，甚至显示空白卡片。
检查是否真的被爬虫看到
别信浏览器里“查看源代码”看到的 meta——那是你本地 JS 渲染后的结果。真实抓取只看服务端返回的原始 HTML。
用命令行验证：curl -s https://yoursite.com/page | grep 'og:title'，必须输出带实际值的完整标签，而不是空 content 或占位符（如 {{ title }}）。
- 如果返回空或只有
<div id="app"></div>，说明是纯 CSR 项目，没做 SSR/SSG/预渲染 - 如果返回了标签但值不对（比如所有页面都是同一个标题），说明动态逻辑没跑通，可能漏传参数或数据库查询出错
- 微信调试工具和 Facebook Debugger 都会缓存结果，改完后必须点“重新抓取”，不能等自动更新
og:image 是最容易挂掉的一环
不是贴个 URL 就算数。平台会真实发起 HTTP 请求去拉这张图，并校验响应头、状态码、尺寸、格式、协议。
-
og:image必须是 HTTPS 开头的绝对 URL，/images/share.jpg或//cdn.example.com/xxx.jpg全部无效 - 图片服务器不能返回 403（防盗链拦截）、404（路径错）、301（重定向会被忽略）
- 推荐尺寸 1200×630 像素，同时补上
og:image:width和og:image:height，否则微信可能压缩成模糊小图 - WebP 在 LinkedIn 和旧版微信中支持差，优先用 JPG 或 PNG；SVG 完全不识别
动态页面怎么生成正确的 og:url 和 og:title
Next.js、Nuxt、PHP 等服务端有能力生成页面的场景下，og:url 必须和用户实际分享的链接完全一致——包括协议、域名、路径、尾部斜杠，但不含 utm 参数或哈希。
- 不要读
window.location.href或拼接req.url，容易混入开发环境 host 或 query 参数 - Next.js 中用
getStaticProps或getServerSideProps从路由参数取 ID，再查数据库生成对应标题和描述 - PHP 中避免对单条新闻用
while循环查库，直接mysqli_fetch_assoc取一行，防止意外覆盖 - 静态站点（如 Hugo/Jekyll）在模板里用页面 front matter 字段注入，别硬编码
别忽略 og:type 和 locale 的隐性影响
虽然不填也能出卡片，但填错或不填会让平台误解页面语义，尤其影响发布时间、作者信息等结构化字段的展示。
- 首页、列表页用
website；文章、新闻、产品详情页必须设为article，否则 Facebook 不显示发布日期 - 中文站务必加
og:locale=zh_CN，否则日期、数字格式可能错乱 -
og:site_name不是可有可无的装饰项，它出现在卡片底部，能强化品牌露出 - Twitter 仍优先读
twitter:card，建议同步加summary_large_image类型，避免 fallback 到基础卡片
