og:title必须在服务端HTML源码中静态写入，不可JS动态插入；内容需纯净（无HTML实体、换行等），长度≤32字符；Next.js用generateMetadata，Nuxt3用useHead且确保SSR开启；须通过Facebook调试工具或微信开发者工具真机验证。
og:title 必须写在 里，且不能靠 JS 动态插入
服务端没吐出来，微信/QQ/X 就根本看不到这个字段——它们不执行 JS，只解析 HTML 初始源码。document.head.appendChild() 或 React 的 useEffect 插入的 <meta property="og:title"> 完全无效。
常见错误现象：本地 view-source: 能看到标签，但分享时还是显示首页标题或空值。原因往往是构建工具（如 Vite）默认不处理 SSR，或 Next.js 用了客户端组件却没配 generateMetadata。
- Next.js App Router：必须用
generateMetadata函数返回对象，不要在组件内写<meta> - Nuxt 3：用
useHead({ meta: [...] })，但需确认ssr: true（默认开启） - 纯静态站点（如 Hugo/Jekyll）：直接写进模板的
<head>即可
og:title 内容不能含 HTML 实体、换行或控制字符
Facebook 和微信解析器对内容非常敏感： 、—、\n、\t 都会导致截断或 fallback 到 <title>。不是“看起来正常就行”，而是原始字符串必须干净。
使用场景：从 CMS 或 Markdown 渲染出的标题常带富文本残留，比如 "前端调试的 3 个冷知识 —— console.table" 中的 —（en dash）就可能被识别为非法字符。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 建议用正则预处理：
title.replace(/[\u2000-\u206F\u2E00-\u2E7F\uFE20-\uFE2F\r\n\t]+/g, ' ').trim() - 长度控制在 ≤ 60 字符（Facebook 显示上限），微信更严，建议 ≤ 32 字符
- 避免用「｜」「/」「·」等分隔符堆砌关键词，会被降权或截断
og:title 和 不一样，也不能简单复用
<title> 是给搜索引擎和浏览器标签页看的，og:title 是给社交用户第一眼扫的——它得独立承担“钩子”作用。比如页面 <title> 是 "React 性能优化指南 | 前端进阶 · 技术博客"，og:title 更好写成 "React 页面卡顿？3 行代码提速 5 倍"。
性能与兼容性影响：平台不会校验二者是否一致，但若 og:url 指向的页面实际标题和 og:title 差距过大（比如一个是产品名，一个是活动名），LinkedIn 可能拒绝渲染卡片。
- 动态页（如带 query 参数）要确保
og:title匹配当前内容，而非模板默认值 - 多语言站点必须按 locale 动态输出对应语言的
og:title，不能靠 JS 切换 - 别用
og:site_name拼接标题（如content="${siteName} - ${pageTitle}"），部分平台会忽略前缀
调试时别只信浏览器 view-source，要用平台真抓取
很多开发者在 view-source: 看到 og:title 就以为 OK，结果发到微信里还是显示乱码或旧缓存。根本原因是：平台爬虫访问的是你服务器响应的原始 HTML，中间可能经过 CDN、WAF、反向代理，甚至 gzip 压缩后解码异常。
容易踩的坑：本地起 server 能看到正确 title，但线上 Nginx 配了 charset utf-8; 却漏了 add_header Content-Type "text/html; charset=utf-8";，导致微信 X5 内核解析失败。
- 验证工具优先用 Facebook Sharing Debugger（会强制刷新缓存）、LinkedIn Post Inspector
- 微信必须用“微信开发者工具”里的“网页调试”功能，模拟真实 X5 内核抓取
- 如果改了
og:title但没生效，先 curl -I 看响应头是否有Content-Type: text/html; charset=utf-8
