opengraph meta标签必须硬编码在html的中且紧贴后，不可js动态插入；og:image需绝对路径、200响应、正确mime类型、≤8mb、≥600px宽；微信要求og:url规范且强制og:site_name；多平台兼容应单图+额外twitter标签。
OpenGraph meta 标签必须放在
很多页面分享到微信、微博、LinkedIn 或 Facebook 后预览空白或显示错误标题，根本原因往往是 meta 标签没放对位置，或者被 JS 动态插入——OpenGraph 解析器只读取初始 HTML 的 ，不执行 JS。
实操建议：
-
<meta property="og:title" content="...">等所有og:标签必须写在中，且最好紧贴<title></title>后面 - 不要用
document.write()或 React/Vue 的useEffect注入这些标签；SSR 或静态生成时硬编码进模板 - 如果用了
<base href="...">，注意og:image的 URL 必须是绝对路径（含协议），否则微信等会加载失败
og:image 加载失败的三个常见原因
分享后图片不显示，90% 情况不是尺寸问题，而是服务端或路径配置出错。
排查要点：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
og:image的 URL 必须返回200 OK，且响应头包含Content-Type: image/*（如image/png）；Nginx/Apache 若未配置 MIME 类型，可能返回text/plain，导致平台拒绝加载 - 图片宽高比建议固定为
1.91:1（Facebook 推荐）或1:1（微信较稳妥），但更关键的是：图片文件大小不能超过 8MB（Facebook 限制），且宽度 ≥ 600px（否则缩略图模糊） - 避免使用带查询参数的图片 URL（如
/thumb.jpg?v=1），部分平台缓存策略不稳定；如有必要，确保 CDN 支持带参 URL 缓存
微信内置浏览器对 og: 标签的特殊处理
微信不是标准 OpenGraph 解析器，它有自己的 fallback 逻辑：当 og:title 缺失时，会退回到 <title></title>；但若 og:description 为空，它不会读 <meta name="description">，而是直接截取正文前 50 字——这常导致预览文案莫名其妙。
实操建议：
- 微信强制要求
og:url存在且为当前页的规范 URL（含https://和尾部斜杠一致性），否则可能抓取跳转后的页面 - 微信不识别
og:locale，但会读og:site_name并显示在标题下方小字里，建议填写品牌名而非域名 - 调试时用「微信开发者工具」的「网页调试」功能，或直接在微信中粘贴链接后长按 →「浮窗」→ 查看实际抓取结果，比模拟器更准
多个 og:image 如何控制优先级
不是所有平台都支持多图。Facebook 允许声明多个 og:image，按出现顺序选第一张；Twitter 完全忽略 og:image，只认 twitter:image；而微信只取第一个。
所以别指望靠顺序“兼容多平台”，正确做法是：
- 只保留一个最稳妥的
og:image，尺寸 1200×630px，格式为.jpg或.png（避免 WebP，微信旧版不支持） - 如需适配 Twitter，额外加
<meta name="twitter:card" content="summary_large_image">和<meta name="twitter:image" content="..."> - 避免用
og:image:width/og:image:height，Facebook 已不依赖它们，反而可能因值不匹配导致图片被裁剪
localhost 测试无效，必须部署到 HTTPS 域名下，且该域名要能被外网访问——否则 Facebook Debugger、微信调试工具都抓不到内容。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
