网站链接发群里没预览图？OG 标签与分享卡片配置指南

导读：把公司网站链接丢进微信群，只显示一串光秃秃的 URL；发到朋友圈，连标题摘要都是乱抓的。问题不在平台，在网站没有配好分享元信息。OG 标签配好后，链接会带标题、摘要和封面图，点击率明显不一样。本文给出可直接复制的配置模板与踩坑清单。

一、分享卡片的基础：meta 标签先补全

分享平台抓取链接时，第一眼读的是 <head> 里的基础 meta。标题、描述、关键词三件套先配齐，抓取器才有内容可展示：

<head>
  <meta charset="utf-8">
  <title>产品中心 | XX公司官网</title>
  <meta name="description" content="XX公司产品中心，提供A、B、C三类产品，支持在线查看与资料下载。">
</head>

要点：description 控制在 80-120 字，抓取器一般只展示前面一段；标题要带品牌或业务关键词，避免首页标题全是"首页"两个字。

二、OG 协议：让每个平台都拿到一致封面

基础 meta 只解决文字，封面图靠 OG（Open Graph）协议。OG 是社交平台约定的一套 <meta property> 标签，配好后微信、微博、QQ 抓取时都会用它：

<meta property="og:title" content="产品中心 | XX公司官网">
<meta property="og:description" content="XX公司产品中心，提供A、B、C三类产品。">
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.example.com/og-cover.jpg">
<meta property="og:url" content="https://www.example.com/products">

要点：og:image 必须是绝对地址，且图片要能直接访问（别放在需要登录的路径下）；封面图建议 1200×630，比例错了平台会裁掉关键信息。

三、图片与缓存：封面图不能被墙

og:image 挂了，卡片就只剩文字。封面图要放到 CDN，并确认跨域可访问、没有防盗链限制：

location /og/ {
    add_header Cache-Control "public, max-age=86400";
    expires 1d;
}

要点：图片路径用域名固定前缀（如 /og/）统一加缓存头；换封面图时改文件名（带版本号），避免平台缓存旧图。

四、动态页面：每页都要有独立卡片

最容易漏的是：首页配好了 OG，内页全是默认值。分享产品页、新闻页时，抓取器拿到的是首页卡片。动态页要在服务端渲染时按当前页输出 OG：

# 服务端按页面注入 og:title / og:image
GET /products/1024
# => 渲染时输出
# <meta property="og:title" content="A产品详情 | XX公司官网">
# <meta property="og:image" content="https://cdn.xx.com/og/products/1024.jpg">

要点：动态页必须按当前页输出 og:image，否则分享出去全是首页封面；改版时 og:url 要与实际地址一致，避免抓取器判定跳转。

五、踩坑清单

1. 只配基础 meta 不配 OG：微信有标题没图，卡片难看；
2. og:image 用相对路径：平台抓不到图，卡片退回纯文字；
3. 封面图挂登录/防盗链：抓取器 403，图片直接失效；
4. 图片比例不对：1200×630 是标准，用竖图会被裁；
5. 内页没动态 OG：分享产品页全带首页标题和封面；
6. 改了封面不换文件名：平台缓存旧图，新封面一周不上线。

六、工程落地建议

分享卡片按「基础 meta → OG 协议 → 图片可访问 → 动态注入」四步落地，先补全描述、再配好封面、再保证图片稳定、最后让每页独立。同类分层在乔拓云企业网站的站点元信息模块中有对应实现，中小企业的官网可直接参照该模块的 OG 配置起步。

七、复盘清单

• title/description 齐全，标题带业务关键词；
• og:title/og:image/og:url 全部配置；
• 封面图绝对地址、CDN 可访问、无防盗链；
• 图片 1200×630，文件名带版本号；
• 产品/新闻页服务端动态注入 OG；
• og:url 与实际页面地址一致。

结语

分享卡片是最被低估的转化入口：一套 OG 标签配好，链接发哪里都有头有脸。先补 meta，再上 OG，管好图片，配好内页，分享体验就从"一串 URL"变成"一张名片"。