分享按钮不能仅用<a>标签硬拼URL，因存在中文乱码、移动端唤起失败、参数过时、卡片信息缺失等问题；必须做URL安全编码、适配各平台当前参数格式、预置OG meta标签。
分享按钮为什么不能只靠 <a> 标签硬写链接
直接拼接 https://twitter.com/intent/tweet?url=... 这类 URL 看似简单，但实际会踩一堆坑：URL 编码不全导致中文乱码、移动端唤起失败、分享内容被截断、参数名过时（比如 Facebook 已弃用 sharer.php 的 u 和 t 参数）。更关键的是，现代社交平台基本要求使用官方 SDK 或至少走标准 Open Graph 协议，否则分享卡片不显示图片或描述。
所以别用纯静态 <a>，哪怕只是轻量实现，也得做三件事：URL 安全编码、适配各平台当前支持的参数格式、预留 meta 标签供爬虫抓取卡片信息。
微信分享必须走 JS-SDK，但网页端没认证也能“伪分享”
微信公众号/小程序分享必须调用 wx.config + wx.updateAppMessageShareData，而配置需要后端签名（jsapi_ticket + nonceStr + timestamp + 当前 URL），普通静态页根本拿不到。但用户点按钮时仍要给反馈——这时候可以：
- 点击后弹出一个带二维码的浮层，二维码内容是当前页面 URL（用
qrcode.js或后端 API 生成） - 同时复制链接到剪贴板（用
navigator.clipboard.writeText），并提示“已复制，请粘贴到微信发送” - 不调用任何微信 JS-SDK，避免因签名失败导致 JS 报错阻塞其他逻辑
注意：clipboard.writeText 在非 HTTPS 或非用户手势触发（如 setTimeout 延迟调用）下会静默失败，务必在 onclick 直接触发。
立即学习“前端免费学习笔记（深入）”；
Twitter / LinkedIn / Reddit 的 URL 分享参数差异很实际
这三个平台都支持 GET 参数直跳，但字段名和编码要求不同，容易粘贴错：
- Twitter：必须用
url（不是u），text支持中文但需encodeURIComponent，via和hashtags是可选附加项 - LinkedIn：只认
url，title/summary等参数已被忽略多年，它完全依赖页面里的<meta property="og:title"> - Reddit：只接受
url，且必须是完整协议域名（https://开头），相对路径或//开头会 400 错误
示例（Twitter）：
https://twitter.com/intent/tweet?url=<code>encodeURIComponent(window.location.href)</code>&text=<code>encodeURIComponent('这篇文章讲得很清楚')</code>&via=devlog
分享卡片不显示图/标题？检查 <meta property="og:xxx"> 是否生效
无论你按钮逻辑多完美，如果目标平台爬虫抓不到 og:title、og:description、og:image，分享出来就是光秃秃一行链接。常见问题：
-
og:image必须是绝对 URL（https://example.com/img.jpg），相对路径或data:URL 无效 - 图片尺寸最好 ≥ 1200×630px，否则 LinkedIn 可能降级为小图，Twitter 可能裁切
- Facebook 和 LinkedIn 会缓存 meta 信息，改完后要用它们的调试工具刷新：
https://developers.facebook.com/tools/debug/、https://www.linkedin.com/post-inspector/
别指望 JavaScript 动态写入 <meta> 标签——爬虫不执行 JS，所有 og: 标签必须在 HTML 初始响应中就存在。
