Open Graph标签怎么写_社交分享卡片设置【教程】-html教程-PHP中文网

open graph 标签必须写全且规范，否则社交分享卡片将异常；og:title、og:description、og:url 三者缺一不可，og:image 需满足尺寸、协议、跨域等要求，各平台解析规则不同，调试须用官方工具实时抓取验证。

open graph标签怎么写_社交分享卡片设置【教程】

Open Graph 标签不写对，社交平台抓取的分享卡片大概率是乱的——不是图挂了、就是标题错位、甚至直接 fallback 到首页描述。

Facebook、Twitter（X）、LinkedIn 等主流平台都依赖这三组基础字段决定卡片主干内容。漏掉 og:url 尤其危险：平台可能把同一页面不同路径（比如带 utm 参数或 hash）当成多个独立页面，导致分享统计分散、预览内容不一致。

og:title 应该是当前内容的真实标题，而非网站名；长度建议 ≤ 60 字符，超长会被截断
og:description 不是 SEO description，而是专为社交场景写的“一句话钩子”，建议 2–3 行，含关键信息点，避免堆砌关键词
og:url 必须是规范化的、可访问的绝对 URL（含 https://），且与用户实际分享的链接一致；动态页要确保服务端吐出的是去参后的 canonical 地址

一张无效的 og:image 是卡片失效最常见原因。平台不会报错，但会静默降级——比如用网页首图、logo，甚至留白。

图片必须是绝对 URL（https:// 开头），相对路径、// 协议前缀、本地 file:// 全部无效
推荐尺寸 ≥ 1200×630 px（宽高比 1.91:1），最小不得低于 600×315 px；过小会被压缩模糊，过大可能被裁切或加载失败
服务器需允许跨域抓取：CORS 头不能拦 facebook.com 或 twitter.com 的请求；CDN 缓存策略也要放行 HEAD 和 GET 请求
格式仅支持 .jpg、.png、.gif（动图仅部分平台支持），WebP 在 LinkedIn 和旧版 Facebook 上可能不识别

og:type 影响卡片样式（如文章 vs 视频 vs 产品），但各平台支持程度不一；有些字段只在特定平台生效，硬写反而可能引发解析异常。

og:type 推荐值：静态页用 website，文章类用 article，视频页用 video.movie；不要自定义非标准类型（如 blog_post），Facebook 会 fallback 到 website
article:published_time、article:author 只对 og:type=article 有效，且仅 Facebook 和 LinkedIn 解析；Twitter 完全无视这些，它只认自己的 twitter:* 标签
Twitter 有独立协议：twitter:card（必填，常用 summary_large_image）、twitter:title、twitter:description、twitter:image；它不读 og:*，但 Facebook 会 fallback 读 twitter:*（如果没 og 标签）

浏览器里看到的 <meta> 标签，不等于社交平台服务器实际拿到的内容。缓存、SSR 渲染时机、CDN 中间层、User-Agent 过滤都可能导致差异。

Facebook 调试必须用 Sharing Debugger，输入 URL 后点 “Scrape Again”；它会显示真实抓取的 HTML、解析出的字段、警告（Warning）和错误（Error）
Twitter 调试用 Card Validator，注意它只验证 twitter:* 标签，且对 HTTP 状态码敏感（4xx/5xx 直接失败）
LinkedIn 调试用 Post Inspector；它对 og:image 的 SSL 证书要求更严，自签名或过期证书会导致图片不显示
所有工具首次调试后，平台通常会缓存结果 7 天；改完标签后务必点 “Scrape Again”，否则看不到更新

最常被忽略的是：服务端渲染时，og:image 的 URL 拼错了协议（比如写成 http:// 而当前站是 HTTPS），或者 CDN 把 og:image 对应的图片 URL 回源到了测试环境。这类问题不会报错，但卡片永远出不来图——得进调试工具看原始响应头和重定向链才能定位。