og标签是专为社交平台生成分享卡片的html元数据协议,核心必填项为og:title、og:description、og:image、og:url,需严格遵循取值规范以避免卡片降级。

og标签是啥?不是SEO meta,是给社交平台“喂”卡片数据的
og标签(meta property="og:xxx")本质是一套约定俗成的HTML元数据协议,专为Facebook、微信、微博、LinkedIn等平台解析分享链接时生成预览卡片而设计。它和<meta name="description">这类传统SEO标签不重叠,也不替代——搜索引擎可能忽略og,但微信/钉钉/飞书点链接预览时,几乎只认og。
必须加的4个og标签及其取值逻辑
缺一不可,否则卡片显示会降级(比如没图、标题截断、跳转错页):
-
og:title:用<title></title>原文太长?别硬截,应按社交场景重写(如“iPhone 16 Pro 拆解|钛媒体独家”比“产品详情页-XX商城”更有效) -
og:description:不能直接抄meta name="description",需控制在80字内、带动词、有信息差(例:“我们拆了3台真机,发现A18芯片散热模组缩水12%”) -
og:image:必须是绝对URL、HTTPS、尺寸≥1200×630px;常见坑是用了相对路径或本地开发地址(http://localhost:3000/og.jpg),上线后图炸 -
og:url:必须是用户实际想分享的规范URL(含UTM参数?不加;含hash路由?去掉;带?debug=1?清理掉)
type/image:secure_url/alt这些进阶字段怎么选
多数静态页面设og:type为website即可;博客/新闻页建议用article,可额外加article:published_time提升可信度。图片字段注意:og:image:secure_url仅当HTTP站点混用HTTPS图时才需显式声明;og:image:alt不是可选——微信iOS端已强制读取该字段作无障碍描述,空值会导致审核提示“图片无说明”。
验证工具失效?先查这三件事
微信调试工具/LinkedIn Post Inspector 显示“未抓取到og”?大概率不是代码问题:
- 检查服务器是否屏蔽了爬虫User-Agent(如
facebookexternalhit/1.1、Twitterbot/1.0) - 确认Nginx/Apache返回状态码是200,不是302跳转(重定向会丢掉og)
- 动态渲染页面(React/Vue SSR)需确保服务端直出包含og标签——CSR客户端渲染的og,爬虫根本看不到
最常被忽略的是缓存:CDN或浏览器缓存了旧HTML,改完og标签却一直刷不出新卡片,得清缓存+用?v=20260303强制刷新URL。










