微信分享卡片不生效，90%是meta标签未在初始HTML中；微信爬虫只读取服务端返回的原始HTML的，JS动态插入或客户端渲染的og标签无效。
微信分享卡片不生效，90% 是 meta 标签没在初始 HTML 里
微信爬虫只读取服务器返回的原始 HTML 的 ，JS 动态插入或 Vue/React 客户端渲染后的 og:title 等标签完全无效。哪怕你用 document.querySelector('meta[property="og:title"]').setAttribute('content', '新标题') 改了十遍，抓取结果还是旧的。
实操要点：
- 服务端模板（EJS/Pug/Thymeleaf）：从 URL 参数、数据库或 CMS 字段中取值，直接写进模板的
- 静态站点生成器（Hugo/Jekyll）：每个页面的 front matter 中手动配
og_title、og_image，通过 layout 模板注入 - Next.js：必须用
getServerSideProps或generateMetadata（App Router），不能靠useEffect+Head -
og:image必须是 HTTPS 直链，尺寸建议 1200×630；/assets/share.jpg或data:image/png;base64,...全部失败
响应式模板里分享按钮点击后跳转错页，多半是 URL 拼错了
很多响应式模板用 window.location.href 拼分享链接，但 SPA 路由带 hash（如 #/article/123）或 history.pushState 后的路径，微信和微博根本不认——它们只解析 pathname + search 部分。
正确做法：
- 所有分享按钮的
url参数必须用location.origin + location.pathname + location.search，坚决不用location.href或location.hash - ShareThis 类组件必须显式传
data-sharethis-url="https://example.com/article/123"，它不会自动读当前地址 - Twitter/Facebook intent 链接里的
url参数需encodeURIComponent()，否则中文或空格导致截断 - SPA 切换路由后，要主动调
stLight.options({url: newUrl})或重新初始化按钮容器
移动端点击分享按钮无反应，不是代码问题而是触发条件不满足
navigator.share() 在 iOS Safari 和部分安卓浏览器上要求极严：必须 HTTPS、必须用户 click 手势触发、URL 必须同源。随便包一层 setTimeout 或在 fetch 回调里调用，就直接抛 NotAllowedError。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
防踩坑清单：
- 按钮绑定 click 事件，且 handler 内直接调
navigator.share()，中间不要加异步逻辑 - 降级方案别用
weixin://或twitter://协议——iOS 上基本失效，统一 fallback 到https://twitter.com/intent/tweet?...这类 web intent - 微信 JS-SDK 的
wx.ready()未执行完就调wx.updateAppMessageShareData()，必然静默失败；务必用Promise封装等待逻辑 - 按钮本身别用
或event.preventDefault()
调试时看到旧分享卡片，不是缓存没清而是微信根本没重抓
微信对未认证公众号、未绑定 JS 接口安全域名的页面，有强缓存策略。你改了 10 次 og:image，它可能还在用 24 小时前抓到的内容。
唯一可靠验证方式：
- 用微信开发者工具 → 网页调试 → “网页分享”功能，输入真实 URL 后点“抓取”，看返回的 title/description/image 是否匹配
- 如果 image 显示“图片获取失败”，检查：是否 404、是否跨域（CORS 头缺失）、CDN 是否拦截了微信爬虫 UA（
MicroMessenger） - 强制刷新需调用
https://api.weixin.qq.com/cgi-bin/clear_quota?access_token=xxx（仅限已认证号） - 本地开发用
http://localhost:3000测试？微信不抓取 localhost，必须用内网穿透或预发布环境
微信分享的「服务端注入」和「客户端触发」是两套完全独立的流程，前者决定卡片长什么样，后者决定点按钮后发生什么——很多人把二者混为一谈，结果改了 JS 却死磕 meta，或者写了 meta 却忘了签名，来回折腾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
