open graph 标签必须显式设置：og:title（≤60字符）、og:description（155–160字符，独立优化）、og:image（绝对url、1200×630像素、jpg/png格式）、og:url（规范化无参数），且全部需在html初始响应中静态存在，不可js注入；调试须用官方工具（如facebook sharing debugger）并强制重抓。
og:title 和 og:description 必须显式设置，否则社交平台会回退到页面 title 和 meta name="description"
很多开发者以为只写 <title></title> 和常规 <meta name="description"> 就够了，但 Facebook、LinkedIn 等平台优先读取 Open Graph 标签。如果缺 og:title 或 og:description，它们可能抓取到不完整、被截断或带模板占位符的文本（比如 “{{ pageTitle }} | MySite”）。
实操建议：
-
og:title应控制在 60 字符内，避免被 Twitter 或 Slack 截断 -
og:description建议 155–160 字符，和 SEO 的 description 长度一致，但内容需独立优化——它面向的是点击前的预览场景，不是搜索引擎 - 不要用 JavaScript 动态注入这些标签：爬虫不执行 JS，所有
og:*标签必须在 HTML 初始响应中存在
og:image 必须是绝对 URL，且尺寸/格式不达标会导致预览图不显示或拉伸变形
常见错误是写相对路径如 /images/share.jpg，或本地开发时用 http://localhost:3000/... —— 社交平台的爬虫无法访问这类地址，最终 fallback 成无图预览。
实操建议：
- 务必使用带协议的绝对 URL，例如
https://example.com/images/og-banner.png - 推荐尺寸为 1200×630 像素（宽高比 1.91:1），这是 Facebook 和 LinkedIn 的最佳适配尺寸；小于 600×315 可能被降权或忽略
- 仅支持 JPG、PNG、GIF（静态）、WebP（部分平台已支持，但 Facebook 目前仍不推荐）；SVG 不被任何主流平台识别
- 添加
og:image:width和og:image:height可减少重排，避免预览图加载时闪烁或错位
og:url 应指向规范化的分享目标页，而非当前路由或带 utm 参数的链接
动态站点（如 Next.js、Nuxt）常在客户端拼接 og:url，结果生成带哈希、查询参数甚至临时 session ID 的 URL，导致同一内容多个 URL 被重复抓取、统计分散、缓存混乱。
实操建议：
-
og:url必须与用户实际想分享的、可直接访问的页面 URL 完全一致，不含?ref=、&utm_source=、#section等非语义参数 - 服务端渲染（SSR）或静态生成（SSG）时，应从数据源或路由配置中提取 canonical URL，而不是读
window.location.href - 配合
<link rel="canonical">使用，强化 URL 归一性；两者值应严格相同
调试时别只信“分享测试”，要用官方工具抓原始解析结果
手动发链接到微信、微博或 Slack 看效果，只是终端呈现，完全无法反映元标签是否被正确提取、是否存在 HTTP 重定向干扰、或 SSL 证书异常等问题。
实操建议：
- Facebook：用 Sharing Debugger，输入 URL 后点 “Scrape Again”，重点看 “Response Headers” 中是否有 301/302、“Open Graph Warnings” 是否提示图片不可达
- Twitter（X）：用 Card Validator，注意它只认
twitter:*标签，但会 fallback 到og:*；若未设twitter:card，默认用summary，图片可能不展示 - LinkedIn：用 Post Inspector，它对
og:image的 HTTPS 要求最严，自签名证书或混合内容（HTTP 图片）会直接拒绝解析
缓存是最大盲区：Facebook 默认缓存 24 小时，改完标签后必须点 “Scrape Again”，否则看到的仍是旧快照。其他平台也有类似机制，但不提供手动刷新入口——只能靠改 URL 参数（如 ?v=2）强制绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
