社交分享失效的根本原因是服务端未输出正确og标签且客户端未适配原生分享api。微信/微博等仅解析og:title、og:description、og:image等服务端直出的元标签；navigator.share()需检测兼容性并满足https+手势触发；spa必须通过ssr或预渲染确保路由变化后og标签生效。

HTML 分享本身不依赖社交传播，但默认行为几乎无法被社交平台识别和展示——不配置 og 标签、不处理 shareTarget 或 navigator.share 兼容性，用户点“分享”后大概率只发了个裸链接。

为什么微信/微博/钉钉点分享只显示 URL？

这些 App 内置浏览器（或 SDK）读取页面时，只解析特定元标签，不是靠 HTML 结构或 JS 渲染结果。没写 <meta property="og:title" content="...">，它们就只能回退到 <title></title> 和域名。

• og:title、og:description、og:image 是基础三件套，缺一不可
• 微信对 og:image 要求严格：必须 HTTPS、尺寸建议 1200×630、大小 ≤ 5MB，且需在服务端直出（JS 动态设置无效）
• 微博还额外认 weibo:article:author 和 weibo:webpage:type，设了能提升卡片丰富度

navigator.share() 在 iOS 上为什么报错？

iOS Safari 直到 16.4 才支持 navigator.share()，且仅限 HTTPS + 用户手势触发（比如 click 事件里调用），不满足任一条件就抛 NotSupportedError 或静默失败。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 必须用 if ('share' in navigator) 检测可用性，不能直接 try/catch 后就调用
• Android Chrome 支持早，但部分国产厂商浏览器（如 QQ 浏览器、UC）仍返回 false，得降级到复制链接 + 弹浮层引导手动分享
• 传入的 text 字段在 iOS 上会被忽略，只用 title 和 url；Android 则三者都可能生效

SPA 页面路由变化后，OG 标签还生效吗？

不生效。社交平台爬虫是服务端渲染（SSR）或静态抓取，不会执行 JS，也不会等 history.pushState 后再读元信息。

• 单页应用必须配合 SSR（如 Next.js、Nuxt）或预渲染（prerender-spa-plugin）生成带对应 OG 标签的 HTML
• 若用客户端路由（如 React Router），useEffect 更新 document.head 中的 meta 标签，对爬虫完全无效
• 可加一层简易服务端代理：请求 /share/:id 时，Node.js 服务动态注入该 ID 对应的 og: 标签，再返回纯 HTML

真正卡住传播的，从来不是“有没有分享按钮”，而是“链接发出去后，别人看到的第一眼是不是想点”。这取决于服务端能否吐出正确元信息，以及客户端是否在合适时机触发原生分享能力——两者漏掉一个，社交链路就断在第一跳。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！