技术咨询专线

137-9839-1694

网站链接发到微信、WhatsApp、LinkedIn 时卡片标题乱、图不显示?本文讲清 OG 社交标签的作用、四条核心标签的写法、og:image 的尺寸细节与微信卡片异常的排查顺序。

OG 社交标签怎么配:链接分享到微信、WhatsApp 卡片显示异常的排查方法(pic1)

把公司官网链接发给客户,聊天窗口里出现的是一张光秃秃的链接,或者标题是乱码、配图是别人家公司的 banner——这种细节很影响第一印象,却经常没人负责。控制这个显示效果的,是网页里一组叫 Open Graph(OG)的标签。这篇文章讲清它的原理、正确写法,以及最常见的"微信里图片不显示"问题的排查顺序。

一、OG 标签是什么,谁在读它

OG 标签是写在网页 区的一组 meta 标签,最早由 Facebook 制定,现在成了各家平台的通用协议:WhatsApp、LinkedIn、Telegram、Slack、iMessage、QQ、微博等在生成链接预览卡片时,都会优先读取 OG 标签;微信在链接卡片上同样参考它,只是另有自己的分享接口体系。搜索引擎虽然不直接用 OG 标签排名,但正确的 OG 信息能帮助机器理解页面主标题、主图和性质,对 AI 搜索时代的"可读懂"也有辅助价值。

一句话概括:SEO 标签决定你在搜索结果里长什么样,OG 标签决定你的链接被转发时长什么样。B2B 外贸场景里,客户把你的官网链接转发到 WhatsApp 群是常态,这张卡片相当于免费的二次曝光位。

二、四条核心标签怎么写

企业官网至少要配好这四条:

  • og:title:卡片标题,写页面主题本身,别照抄带"官网-首页"后缀的浏览器标题,25-30 字以内;
  • og:description:一两句话说明这个页面提供什么,120 字以内;
  • og:image:卡片配图的绝对地址,这是显示异常的高发区,下一节单独讲;
  • og:url:该页面的规范地址,用绝对 URL,与页面实际的规范链接保持一致。

每个页面应该有自己的一套 OG 值,而不是全站共用首页那套。产品页写产品名和卖点,案例页写客户行业和方案,文章页写文章标题和摘要。如果用了 CMS,通常有 SEO 插件或后台字段可以按页面填写,比手改模板稳妥。

三、og:image 的尺寸与地址细节

og:image 是出问题最多的标签,注意四个细节:一是必须用绝对地址,写 /uploads/banner.jpg 这种相对路径,多数平台读不到;二是尺寸建议 1200×675 像素(16:9),这是 WhatsApp、LinkedIn 卡片的通用比例,比例不对会被裁剪或留白;三是文件大小控制在 300KB 以内、格式用 JPG 或 PNG,部分平台对过大的图直接放弃抓取;四是地址要能被公网直接访问——带登录态的图、防盗链只放行自家域名的图、内网地址的图,都会让卡片空白。

另外把 og:image:width 和 og:image:height 也写上,能帮平台在下载图片前就确定尺寸,加快卡片生成。正文首图和 og:image 不必是同一张,卡片图可以单独设计一张带核心信息的横图。

图片内容本身也值得花点心思。卡片图在聊天窗口里只有指甲盖大小,信息量一多就看不清了:一张干净的底色加一句页面主题(字数控制在十个字以内)或一个核心视觉元素,效果通常好于把整版截图缩成小图。还要注意别在卡片图里放二维码——很多平台会压缩重编码图片,二维码糊掉扫不出来,还占用了本就有限的第一屏注意力。全站可以定一张通用的品牌默认图兜底,重点页面再逐页替换成专属卡片图,这样就算某个页面忘了单独配置,转发出去也不会是一张空白卡片。

四、微信卡片显示异常的排查顺序

微信是国内最常见的"重灾区",排查按这个顺序走:

第一步,确认是哪种异常。标题描述正常、只有图不显示,多半是图片问题;整张卡片都出不来,可能是页面跳转了(带 302 的地址抓不到内容)或者域名被微信拦截。第二步,检查图片:微信对外链图片有大小和稳定性要求,把 og:image 换成一张 100KB 左右、HTTPS 直连的标准 JPG 再试,很多"图不显示"到这一步就解决了。第三步,检查缓存:微信对卡片缓存很顽固,改完标签旧的错误卡片可能继续显示几天,可以用带参数的地址(在链接后加 ?v=2)强制生成新卡片。第四步,检查 HTTPS 证书是否有效——证书过期或链不完整,部分平台会直接拒绝抓取。

其他平台的验证工具也可以交叉用:Facebook 的 Sharing Debugger、LinkedIn 的 Post Inspector,贴入链接就能看到平台实际抓到了什么,并支持手动刷新缓存。这些工具报出来的"抓取结果"和微信的行为高度相关,因为大家都读同一套标签。

五、上线前的自检清单

配完之后花五分钟过一遍:页面源码里四条标签齐全、og:image 是绝对地址且浏览器无痕模式能直接打开、图片是 1200×675 的横图、分享到微信和 WhatsApp 各试一次、改动过标签后记得刷新各平台缓存。OG 标签是一次配置长期生效的工作,配好了,每一条被转发的链接都在替官网做一次规范的形象展示。如果自查发现标签缺失或图片规则对不上,不确定怎么改模板,可以打 137-9839-1694 说明情况。

ABOUT THE AUTHOR 锐客网内容组 · 小锐

十年一线建站与运维经验,写我们真正在项目里踩过的坑:怎么选型、怎么控成本、上线后怎么养。

聊聊你的项目

获取建站方案评估

想搭建或改版网站,却不确定做哪种站、大概多少钱、要多久?留下行业与需求,我们给出方案规划与报价参考。