给网站补 Meta 标签和 Open Graph 社交预览卡片的完整做法

我接手过一个跑了大半年的项目，页面内容做得不错，可每次把链接贴进微信、Slack 或者发到 Twitter，展开都是一块灰色空框，没有标题图也没有摘要。看着像没人维护的死站。问题不在内容，在于 <head> 里缺了几条 meta 标签。这篇把这些标签讲清楚，照着补一遍，分享出去的链接就会带上正经的预览卡片。

title 和 description：搜索结果里的门面

<title> 和 <meta name="description"> 是搜索引擎结果页里直接展示给用户的两行字，也是点击率的第一道关。

title 安全区间是 50 到 60 字符。Google 桌面端搜索结果的截断阈值大约 580 像素，换算下来一般落在 55 到 60 字符之间（字母 M 比 i 宽，所以是个浮动值）。超过 60 字符基本会被省略号截掉。把最重要的关键词放在标题最前面 5 到 7 个词里，那部分权重最高。

description 控制在 160 字符以内，超了 Google 会截断。它不直接参与排名，但写得准、能勾起点击，对 CTR 影响很大。别堆关键词，写成一句话告诉用户点进去能得到什么。

Open Graph：决定分享卡片长什么样

Open Graph 是 Facebook 最早定的一套协议，现在微信、Slack、LinkedIn、Discord 抓取链接预览基本都认它。核心就几条：

og:title：分享卡片上的标题，可以比 <title> 写得长一点
og:description：卡片摘要
og:image：卡片配图，这条最容易出错
og:type：页面类型，首页/落地页填 website，文章填 article
og:url：页面的规范地址

这里有个反复踩的坑：og:image 一定要用绝对地址，比如 https://yoursite.com/og.png，不能写成 /og.png 这种相对路径。爬虫拿相对路径找不到图，卡片就渲染成空白。

og:image 尺寸：认准 1200×630

社交平台抓图有推荐尺寸，写错了图会被裁歪或者变模糊。记住一个数：og:image 用 1200×630 像素，比例 1.91:1，这是 Facebook、LinkedIn、微信通吃的安全尺寸。

Twitter 的 summary_large_image 大图卡片最佳尺寸是 1200×628，和 1200×630 几乎一样。所以 99% 的情况，一张 1200×630 的图共用就够了，不用单独再做一张 Twitter 图。只有当你确实想让两边显示不同裁剪时，才单独写 twitter:image。省略它，Twitter 会自动回落到 og:image。

另外 twitter:card 默认是空的，不写的话好图会被缩成一个小缩略图。想出 1200×628 的大图横幅，记得把它设成 summary_large_image。

一组真实的 meta 标签长什么样

下面是一个文章页完整的 <head> meta 块，照着这个结构填就行：

<title>给网站补社交预览卡片的完整做法 - Toolora</title>
<meta name="description" content="从 title 到 Open Graph，讲清每条 meta 标签怎么写，og:image 用多大尺寸，让分享链接带上预览卡。">
<link rel="canonical" href="https://toolora.info/zh/blog/meta-tag-generator-guide">

<meta property="og:type" content="article">
<meta property="og:title" content="给网站补社交预览卡片的完整做法">
<meta property="og:description" content="title、description、Open Graph、Twitter Card 全讲清楚。">
<meta property="og:image" content="https://toolora.info/og/meta-guide.png">
<meta property="og:url" content="https://toolora.info/zh/blog/meta-tag-generator-guide">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="给网站补社交预览卡片的完整做法">
<meta name="twitter:image" content="https://toolora.info/og/meta-guide.png">

手敲这一坨容易漏标签、写错路径。我自己后来都用 Meta 标签生成器，左边表单填 title、description、图片地址，右边即时出能直接粘贴的代码块，还附带三个预览卡片分别模拟 Google 搜索、Facebook 分享和 Twitter 卡片的样子，上线前就能看出 og:image 尺寸不对或标题太长。

上线前先预览一遍卡片

填完标签别急着部署，先看一眼分享卡片的实际效果。og:image 漏填、图片地址写成相对路径、标题超长被截，这些问题在预览里一眼就能发现，比上线后被同事截图吐槽强。

想专门检查 Open Graph 渲染效果，可以再用 Open Graph 预览工具对照一下，确认卡片在不同平台上都正常。两步走完，链接贴到哪都体面。

补 meta 标签不是什么大工程，一个下午能把整站扫一遍。但它实打实地决定了别人第一眼看到你链接时的印象，这笔投入回报很高。

Made by Toolora · Updated 2026-06-13