必须添加og:title、og:description、og:image三个核心OG标签，否则社交平台分享时标题截断、描述为空、图片模糊或失效；微信尤其严格，仅读OG标签且要求绝对URL、正确响应头与字符限制。
OG标签不加也能分享，但没图没标题没描述
不加 og:title、og:description、og:image 这三个核心标签，多数社交平台（微信、微博、Facebook、LinkedIn）会退化为自动抓取 <title>、<meta name="description"> 和页面第一张 <img>。结果常是：标题截断、描述为空、图片模糊或比例错乱、甚至抓到广告图。
这不是“能不能分享”的问题，而是“分享出去的样子是否可控”的问题。微信内嵌浏览器尤其严格——它不读 twitter: 前缀，也不保证 fallback 到 <meta name="description">，必须靠 OG 标签兜底。
必须写全的三个 OG 标签及其取值规则
以下三项缺一不可，且值需满足平台基本校验：
-
og:title：建议 ≤ 60 字符；避免动态插入未转义的特殊符号（如&要写成&），否则微信可能截断 -
og:description：建议 ≤ 200 字符；不能纯空格或仅换行符，否则被忽略；微信对含 URL 的描述会自动折叠，慎放链接 -
og:image：必须是绝对 URL（如https://example.com/img/share.jpg）；推荐尺寸 ≥ 1200×630 px；格式优先用.jpg或.png；HTTP 协议的图片在 HTTPS 页面中会被微信等平台直接屏蔽
其他如 og:url、og:type（常用 website）虽非强制，但加上能减少解析歧义。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
微信分享特别要绕开的三个坑
微信 SDK 分享和原生粘贴链接行为不完全一致，OG 标签在这两种场景下表现不同：
- 用户直接复制链接发给好友/群：只读 OG 标签，
twitter:和weibo:前缀完全无效 - 调用
wx.onMenuShareTimeline等旧版 JS-SDK：会覆盖 OG 标签，以 JS 配置为准；但新版updateAppMessageShareData已回归以 OG 为主，JS 仅补缺 - 图片加载失败时，微信不会 fallback 到第二张图——它就留白。所以
og:image对应资源必须稳定可访问，且服务器响应头需含Content-Type: image/jpeg（不能是text/plain）
验证 OG 标签是否生效的最快方式
别等发朋友圈再看效果。立刻用这些工具测：
- 微信：用「微信开发者工具」→「调试」→「网页调试」打开页面，右上角「…」→「转发测试」
- Facebook：用 Sharing Debugger 输入 URL，点「Scrape Again」；注意看「Warnings That Should Be Fixed」栏
- 通用检查：在 Chrome 打开页面 → 右键「查看页面源代码」→ 搜索
og:，确认标签存在、拼写正确、属性值非空且为字符串（不是 JS 变量名）
动态渲染的页面（如 Vue/React SSR 不足时）容易漏掉服务端注入的 OG 标签，此时前端拼接的 <meta> 对微信无效——它只读 HTML 初始内容，不执行 JS。
