og标签失效的根源是未正确置于html的中，社交平台爬虫只解析且不执行js，须服务端硬编码或ssr/ssg生成，并确保og:image可公开访问、尺寸合规、响应头正确，同时用facebook sharing debugger强制刷新缓存。
OG标签不被社交平台抓取？先确认是否在里
绝大多数分享失效问题，根源是 <meta> 标签没放对位置。Facebook、Twitter、LinkedIn 等平台的爬虫（如 facebookexternalhit）只解析 HTML 文档的 部分，且默认不执行 JavaScript。如果你把 <meta property="og:title" content="..."> 动态注入到 或靠 JS 拼接生成，它们根本看不到。
实操建议：
- 所有
<meta property="og:xxx">必须硬编码在服务端渲染的中，或由 SSR/SSG（如 Next.js、Nuxt）保证输出 - 用 curl 或 Facebook Sharing Debugger 工具直连页面源码，搜索
og:title，确认原始 HTML 里已存在 - 避免使用
<meta name="twitter:card">和<meta property="og:type">冲突（例如twitter:card="summary_large_image"但og:type="article"），部分平台会降级处理
图片不显示或被裁剪？检查 og:image 的尺寸与可访问性
og:image 是最容易出问题的字段——不是“设了就生效”，而是“设对了才生效”。Facebook 要求图片最小 600×315 像素，推荐 1200×630；Twitter 要求至少 144×144，但大图（≥1200×628）才能触发 summary_large_image 卡片。更关键的是：图片 URL 必须可公开访问、返回 200 状态码、且响应头含 Content-Type: image/*。
常见错误现象：
- 本地开发时用
http://localhost:3000/og.png—— 社交爬虫无法访问 - 图片路径为相对路径（如
/img/og.jpg），而页面通过 HTTPS 分享，导致混合内容被拦截 - CDN 或 Nginx 未配置
Access-Control-Allow-Origin: *，某些平台（如 LinkedIn）会拒绝加载 - 图片实际尺寸小于平台要求，被自动降级为文字卡片
动态路由页面（如 /post/123）怎么配 OG 标签？别拼字符串，走服务端逻辑
静态写死 og:title 对博客首页有用，但对 /post/123 这类动态页面毫无意义。用户分享的是具体内容，OG 数据必须随路由实时变化。这时候不能靠前端 JS 注入（爬虫不执行），也不能用通用占位符（如 “文章详情”），得让服务端根据请求路径查数据库或 CMS，然后生成对应 <meta>。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
使用场景与参数差异：
- Next.js：在
getStaticProps或generateMetadata函数中读取params.id，返回包含openGraph.title的对象 - Nuxt 3：用
useSeoMeta+definePageMeta组合，但需确保在服务端上下文（ssr: true）下运行 - 纯 PHP/Node.js 后端：模板中用
<?php echo htmlspecialchars($post['title']); ?>插入og:title，注意 XSS 过滤 - 切忌在客户端用
document.querySelector('head').appendChild(...)—— 爬虫永远收不到
调试时为什么改了 OG 标签还是没更新？Facebook 缓存比你想象的更顽固
Facebook 的爬虫会对每个 URL 的 OG 数据缓存长达 24–48 小时，即使你已修复所有问题，旧数据仍可能持续生效。这不是 bug，是设计行为。Twitter 和 LinkedIn 也有类似缓存策略，但周期略短。
实操建议：
- 用 Facebook Sharing Debugger 输入 URL，点击 “Scrape Again” 强制刷新缓存（它还会显示抓取日志和警告）
- 如果提示 “Inferred Property”（如
og:urlinferred from<link rel="canonical">），说明对应og:字段缺失，需补全 - 修改后不要立刻分享测试链接 —— 先用 Debugger 抓取，确认 “Response Code” 是 200、“Object Properties” 下各字段值正确，再发
- URL 参数不同会被视为新 URL（如
?v=2），临时加参数是绕过缓存的最快方式，但上线后应避免滥用
真正难的不是写几个 <meta>，而是让每个动态页面都稳定输出合规、可抓取、无缓存污染的 OG 数据。很多团队卡在“本地能看到，分享就失效”，问题往往不在标签本身，而在渲染时机、路径协议、图片托管或缓存误判上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
