如何快速为HTML模板添加微信分享_社交传播策略【引流】-html教程-PHP中文网

微信分享卡片内容由页面meta标签预置决定，js动态修改无效；必须通过服务端渲染或预渲染确保html初始响应含正确og:title、og:description、og:image（https直链）等标签，并用微信开发者工具验证抓取结果。

如何快速为html模板添加微信分享_社交传播策略【引流】

微信内分享卡片的标题、描述、缩略图完全由页面内的 meta 标签控制，不是靠 JS 动态改就能生效的——微信内置浏览器在页面加载初期就已抓取并缓存这些信息，JS 后续修改无效。

微信分享必须用 `meta` 标签预置内容

微信客户端（包括微信内置浏览器、微信小程序 WebView）在打开 URL 时，会向服务器发起一次无 Cookie、无 UA 的 GET 请求（类似爬虫），提取中的特定 meta。若此时没返回正确标签，后续任何 JS 调用 wx.onMenuShareTimeline 或修改 document.title 都不会影响分享卡片外观。

<meta property="og:title" content="自定义标题"> —— 必须存在，且不能为空或纯空格
<meta property="og:description" content="一句话说明"> —— 建议 ≤ 30 字，过长会被截断
<meta property="og:image" content="https://xxx.com/share.jpg"> —— 必须是 HTTPS 直链，尺寸建议 1200×630，最小 300×300；本地路径（/img/xxx.jpg）、相对路径、data URI 均无效
<meta property="og:url" content="https://xxx.com/page?id=123"> —— 应与当前页面真实 URL 一致，否则可能被微信判定为作弊

动态模板（如 Vue/React SSR）需服务端注入 `meta`

前端框架的 CSR（客户端渲染）模式下，meta 标签在 JS 执行后才插入 DOM，但微信爬虫早已完成抓取。所以：单页应用（SPA）必须走 SSR 或预渲染（Prerender），让 HTML 初始响应中就包含正确的 meta。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

Next.js 用户：用 Head 组件 + getServerSideProps 注入动态值
Nuxt 用户：在 asyncData 或 fetch 中拼装 head() 返回对象
纯 Node.js 模板（EJS/Pug）：从路由参数或数据库查出分享文案，直接写进模板 <meta>
静态站点（如 Hugo/Jekyll）：无法按 URL 动态生成，只能为每个页面手动配一套 meta

调试微信分享前先用官方工具验真

别靠“发给自己看”来验证，微信对未认证公众号 / 未绑定域名的页面有缓存和降权策略，导致你改了半天还是旧卡片。必须用微信开发者工具 → 网页调试 → “网页分享”功能实时查看抓取结果。

输入 URL 后点击“抓取”，看返回的 title/description/image 是否匹配预期
如果 image 显示“图片获取失败”，检查是否跨域（CORS）、是否 404、是否非 HTTPS、是否被 CDN 拦截（某些 CDN 默认屏蔽爬虫 UA）
微信会缓存结果约 24 小时，强制刷新需调用 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 并清空 JS-SDK 缓存（实际更简单：换一个带时间戳的 URL 参数再试）

JS-SDK 分享接口只是补充，不是替代

wx.onMenuShareTimeline 和 wx.updateAppMessageShareData 这类接口，只在用户点击右上角「…」→「发送给朋友」或「分享到朋友圈」的瞬间起作用，且仅影响该次分享行为。它无法覆盖 meta 抓取阶段决定的基础卡片信息。

适合做 A/B 测试：同一页面，不同用户看到不同分享文案（前提是 meta 已预留占位，JS 再填值）
必须配合签名：调用前要后端生成 jsapi_ticket 和签名，前端传 url 必须与当前页面 location.href.split('#')[0] 完全一致（含 query，不含 hash）
新版 JS-SDK（v1.6+）已废弃 onMenuShare*，统一用 updateAppMessageShareData 和 updateTimelineShareData，注意兼容性

最常被忽略的一点：微信对非备案域名、HTTP 协议、无 og:image 的页面，会自动 fallback 到页面首张图片或公众号头像，效果不可控。哪怕只是临时测试，也务必确保域名已备案、HTTPS 可用、og:image 是可直访的 JPG/PNG 且尺寸合规。