微信不读og:image，优先取首张可见img，其次twitter:image；Twitter只认twitter:标签且需validator验证；og:url须唯一规范；SSR必须预渲染OG标签，改后需用官方工具强制刷新缓存。
og:image 为什么在 Facebook 显示正常，但在微信里完全不出现
微信根本不读 og:image，它优先取页面第一个可见 <img>，其次 fallback 到 twitter:image，再不然就用 meta name="description" 里截出来的文字图。这不是 bug，是微信的固定行为。
- 必须单独加
<meta name="twitter:image" content="https://example.com/share.jpg">，且 URL 必须 HTTPS、绝对路径、可公开访问 - 如果要用首图，确保第一个
<img src="...">是你想展示的分享图，且不在display: none或visibility: hidden容器内 - 公众号文章页可用
<meta property="mp:wx:preview_image" content="...">，但普通网页无效 - 检查图片响应头：微信爬虫要求
Content-Length存在，不能是Transfer-Encoding: chunked
Twitter 卡片只显示链接、不带图的常见原因
Twitter 不认 og:image，也不认 og:description，它只按自己那套规则走——漏掉任意一个 twitter: 标签，就会降级为纯文本卡片。
- 必须写
<meta name="twitter:card" content="summary_large_image">，值只能是summary或summary_large_image（后者才支持大图） -
twitter:image必须和twitter:card同时存在，且尺寸建议 1200×630（Twitter 接受 1:1，但 Facebook 裁切严重） -
twitter:title和twitter:description要显式写，不能指望平台从og:字段自动映射 - 验证必须用 Twitter Card Validator，输入 URL 后点 “Preview”，看 “Card Type” 是否识别成功
og:url 写错导致同一内容出现多个预览卡片
og:url 不只是“告诉平台这是哪页”，它是卡片的唯一 ID。哪怕只差一个斜杠、一个大小写、一个 utm 参数，平台就当成全新页面缓存一套元数据。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 动态页面（如 Next.js）必须从路由或数据源提取 canonical URL，而不是拼
window.location.href - 统一结尾带斜杠：
https://example.com/blog/123/比https://example.com/blog/123更稳定，避免被识别为两个 URL - 强制剥离非语义参数：去掉
?ref=、&utm_source=、#section，连 hash 都不能留 - 配合
<link rel="canonical" href="...">使用，两者值必须完全一致，否则 LinkedIn 等平台会困惑
服务端渲染缺失时，Open Graph 标签基本等于没写
所有主流社交平台爬虫（Facebook、LinkedIn、Twitter）都不执行 JavaScript。你在 useEffect 里往 document.head 插 og: 标签，它们根本看不见。
立即学习“前端免费学习笔记（深入）”；
- Next.js 推荐用
generateMetadata函数返回对象，它会在 SSR 阶段注入真实值 - Nuxt 3 用
useHead({ meta: [...] })，但需确认ssr: true（默认开启，别关） - 静态站（Vite + Markdown）靠
vite-plugin-html在构建时根据 frontmatter 注入，不是运行时生成 - PHP/Node.js 后端直接在模板中输出，记得对
content值做htmlspecialchars转义，防止引号或尖括号破坏 HTML 结构
