结论：应统一使用 og: 前缀覆盖基础字段，仅按需补充 twitter:card 等必要 twitter 专属项；og:title 等与 twitter:title 重复声明会导致解析器优先级冲突，且 twitter 自2021年起已明确无需冗余设置。
直接说结论：别用两套标签硬凑，用 og: 前缀覆盖全部基础字段，再按需补 twitter:card 等必要 Twitter 专属项——Open Graph 是事实标准，Twitter Cards 已退化为兼容性补丁。
为什么 og:title 和 twitter:title 不该同时写两遍？
重复声明不仅冗余，还会在部分解析器中引发优先级冲突（比如某些旧版 Slack 或 LinkedIn 预览服务会随机取其一）。Twitter 自 2021 年起已明确表示：只要 og:title、og:description、og:image 存在且合法，twitter:title 等非必需字段可完全省略。
-
og:title、og:description、og:image、og:url是所有主流平台（微信、钉钉、Discord、Facebook、LinkedIn）的通用底线，必须提供 -
twitter:card必须保留（值建议用summary_large_image），否则 Twitter/X 客户端可能降级为纯文本卡片 -
twitter:site只在账号有蓝标认证且需绑定归属时才有效，普通站点可不设
og:image 的尺寸与格式陷阱
不是所有“能显示的图片”都算合格的社交图。平台对预览图有隐式裁剪逻辑，盲目塞一张 1920×1080 的 banner 图，大概率被截成模糊黑边图。
- 推荐尺寸：1200×630 像素（宽高比 1.91:1），这是 Facebook、LinkedIn、WhatsApp 的共同最优解
- 格式优先用
.png或.jpg；避免 WebP（部分微信安卓版仍不支持）、SVG（不渲染） - 路径必须是绝对 URL（含
https://），相对路径或协议相对路径（//example.com/…）在 Slack、Discord 中常失效 - 加
og:image:width和og:image:height能显著提升预加载速度，尤其对大图
动态页面如何安全注入社交元标签？
服务端渲染（SSR）或静态生成（SSG）场景下， 中的 <meta> 必须随路由/数据实时更新；客户端 JS 注入的 meta 标签基本无效——爬虫不执行 JS，X / Discord / 微信等只读首屏 HTML。
- Next.js 用户：用
next/head或useEffect+document.head.appendChild()仅适用于 CSR 页面，但预览仍失败；正确做法是在getServerSideProps或generateMetadata（App Router）中返回openGraph对象 - Nuxt 3：统一走
useSeoMeta+useOpenGraph组合式 API，避免手动拼<meta> - 纯静态站点（如 Hugo/Jekyll）：确保模板中每个页面的 front matter 包含
og_title、og_image等字段，并映射到对应<meta>标签
最常被忽略的一点：没有验证就上线。用 https://developers.facebook.com/tools/debug/ 和 https://cards-dev.twitter.com/validator 检查缓存状态——它们会强制刷新 CDN 缓存，而你本地 curl 看到的 HTML 很可能不是爬虫看到的版本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
