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）：直接写进模板的
即可
og:title 内容不能含 HTML 实体、换行或控制字符
Facebook 和微信解析器对内容非常敏感： 、—、\n、\t 都会导致截断或 fallback 到 <title></title>。不是“看起来正常就行”，而是原始字符串必须干净。
使用场景：从 CMS 或 Markdown 渲染出的标题常带富文本残留，比如 "前端调试的 3 个冷知识 —— console.table" 中的 —（en dash）就可能被识别为非法字符。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 建议用正则预处理：
title.replace(/[\u2000-\u206F\u2E00-\u2E7F\uFE20-\uFE2F\r\n\t]+/g, ' ').trim() - 长度控制在 ≤ 60 字符（Facebook 显示上限），微信更严，建议 ≤ 32 字符
- 避免用「｜」「/」「·」等分隔符堆砌关键词，会被降权或截断
og:title 和 不一样，也不能简单复用
<title></title> 是给搜索引擎和浏览器标签页看的，og:title 是给社交用户第一眼扫的——它得独立承担“钩子”作用。比如页面 <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
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
