必须用服务端渲染的 Open Graph 标签（og:url、og:title、og:description、og:image）实现社交分享卡片，缺一不可；og:image 需 HTTPS 绝对路径且防防盗链，动态页面须 SSR 支持。
要在社交平台分享时显示规范的标题、描述和图片，必须用 Open Graph（OG）协议写 <meta property="og:xxx"> 标签，而不是只靠传统的 name="description" 这类 SEO 标签。微信、QQ、Facebook、Twitter、LinkedIn 等平台都只认 OG 标签，且必须服务端渲染输出，客户端 JS 插入无效。
必须写全的四个核心 OG 标签
这四组是所有平台解析卡片的基础，缺一不可：
-
og:url：当前页面的绝对地址，含
https://和尾部斜杠（如https://example.com/blog/），必须与用户实际分享的链接完全一致； - og:title：社交场景专用标题，建议 ≤ 60 字符，不是网站名，而是本页内容的真实概括；
-
og:description：一句话钩子式描述，建议 80–155 字符，突出价值点，不堆关键词，和
name="description"可不同但需协调； -
og:image：必须是 HTTPS 开头的绝对 URL（不能是
/img/xxx.jpg或//xxx），推荐尺寸 1200×630 像素，格式仅用 JPG/PNG。
图片配置的常见坑点
og:image 是卡片失效最频繁的原因，问题往往不出在 HTML 代码本身：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 微信 X5 内核抓图时不带 Referer 和 Cookie，若图片服务器启用了防盗链（比如只允许特定域名访问），会直接返回 403；
- QQ 分享会检查响应头，要求必须有
Content-Length，且不能是Transfer-Encoding: chunked（部分 Node.js/Express 默认启用流式响应，需手动设为identity）； - 即使网页是 HTTPS，og:image 的 URL 也必须显式写成 HTTPS，
og:image:secure_url不被任何平台支持； - CDN 或反向代理需放行来自
facebook.com、twitter.com等域名的 HEAD/GET 请求，否则抓取失败。
增强兼容性与平台适配
加这几项能提升多平台稳定性，尤其对中文站点：
立即学习“前端免费学习笔记（深入）”；
-
og:type：静态页填website，文章页填article，影响卡片样式； -
og:locale：设为zh_CN，帮助平台正确解析中文字符和日期； -
og:site_name：显示在卡片底部，增强品牌识别； -
og:image:width/og:image:height：显式声明尺寸（如1200和630），避免平台误判比例； -
twitter:card等 Twitter 专属标签：虽然主流平台已支持 OG，但 Twitter 仍优先读自己的twitter:*，建议同步补充summary_large_image类型。
动态页面和服务端注意事项
React/Vue 单页应用（CSR）无法靠 JS 动态注入 OG 标签——微信/QQ 爬虫不执行 JS，只会读取初始 HTML 源码：
- Next.js：用
generateMetadata（v13.4+）或next/head，别在useEffect里操作 DOM； - Nuxt 3：用
useHead({ meta: [] })，但确保ssr: true（默认开启），关闭 SSR 就会丢失 OG； - 纯静态站点（如 Vite + Markdown）：构建阶段用插件（如
vite-plugin-open-graph）批量生成，不能依赖运行时逻辑。
