使用方法
- 「页面标题」填文章或页面的标题，它会写进 og:title 与 twitter:title，建议不超过 60 字符。
- 「页面描述」是多行文本框，写进 og:description 与 twitter:description；在框内按 Ctrl + Enter（Mac 上 ⌘ + Enter）即可触发生成，单独的 Enter 只负责换行。
- 「页面绝对 URL」填当前页面的完整地址，例如 https://www.liuquan.net/tools/，必须是带协议的绝对地址。
- 「分享图绝对 URL」与「分享图宽度 / 高度」填缩略图，推荐 1200×630；「分享图替代文字」是给无障碍朗读与图片加载失败时用的 alt。
- 「类型」「站点名」「语言」分别对应 og:type、og:site_name、og:locale；站点首页选 website，文章选 article。
- 勾选「同时输出 Twitter Card」会追加 4 条 twitter: 标签，取消勾选只输出 10 条 og: 标签。上方代码框里是完整结果，点「复制全部标签」整段取走。
这个 Open Graph 生成器能解决什么问题
Open Graph Meta标签生成器要处理的对象，是一组写进网页 head 的元数据标签。一条链接被贴进微信、Facebook、X（Twitter）或 LinkedIn 时，平台会派爬虫抓取页面，再按页面里的 og: 标签拼出一张分享卡片：标题、描述、缩略图、站点名。这些标签缺失或写错，卡片就会退化成一串光秃秃的链接，点开率随之下降。真正的麻烦在于标签分属两个命名空间（og: 与 twitter:），图片必须是绝对地址，标题与描述还有长度上限。本 Open Graph 标签生成器把标题、描述、绝对 URL、分享图、类型、站点名与语言一次问齐，输出可直接粘进网页 head 的完整标签片段，并逐条给出字符数与图片规格校验，适合站长为分享卡片做定稿、运营在投放前核对落地页、以及开发者排查「卡片不显示缩略图」这类问题。
计算原理与变量说明
og: 用 property，twitter: 用 name，这是两套标签最容易混的地方。Open Graph 由 Facebook 在 2010 年提出，规定自定义元数据一律写成 property="og:xxx"；Twitter 的卡片标签沿用了更早的 name 属性写法，写成 name="twitter:xxx"。把两者写反，浏览器不会报错，但平台抓不到对应值，卡片就会缺标题或缺图。本页生成时按前缀自动选择属性名：og: 前缀输出 property，twitter: 前缀输出 name。
og:image 必须是绝对 URL。爬虫取图时不执行相对路径解析，也不读 <base>，所以 /assets/og-cover.png 这种写法在多数平台上直接失效，只有写成 https://www.liuquan.net/assets/og-cover.png 才能被正确抓取。把域名统一成小写、去掉默认端口 443、并且不在 og:url 里带锚点，都是为了让同一个页面在不同平台之间被识别成同一个地址。
1200×630 与 1.91:1 的由来：Facebook 推荐的大图卡片比例是 1.91:1，乘以宽度 1200 得到的高度约 628，业界取整成 630 方便制作，于是 1200×630 成了通用规格。严格按 1.91:1 算是 1200×628，所以 1200×630 约合 1.90:1，与标注值相差不到 0.01。图片小于 200×200 平台不会展示，多数平台还把体积限制在 8MB 以内。
og:url 的作用是去重与归并：社交平台用它判断两条分享是不是同一个页面，把点赞、评论与转发计数合并到同一条卡片上。og:url 与真实地址不一致时（例如带了 # 锚点、或 www 的大小写不同），同一条内容会被拆成两条独立计数，运营看到的数据也就被拆散了。
缺 og:image 时卡片会退化：没有图，卡片就退化为一段纯文字链接。og:title 缺省时平台回落到页面的 title 标签，og:description 缺省时回落 meta description，og:url 缺省时回落当前 URL——三种回落值常带查询参数或大小写不统一，反而更容易产生重复。og:image:width 与 og:image:height 的作用是让平台在图片加载前预留版面，减少卡片展开时的布局跳动。
完整示例（数值仅作演示）
示例条件：标题「柳泉工具 - 免费在线工具箱」（14 字符），描述「覆盖计算、文本、编码、图片等 2000+ 免费在线工具，打开即用，无需注册。」（38 字符），URL https://www.liuquan.net/tools/，分享图 https://www.liuquan.net/assets/og-cover.png（1200×630），alt「柳泉工具首页预览图」（9 字符），类型 website，站点名「柳泉工具」，语言 zh_CN，并勾选输出 Twitter Card。这些正好是本页打开时的默认值，按下面的结果即可复现。
生成的 14 条标签（转义后展示，实际粘贴时是真正的 meta 标签）：
<meta property="og:title" content="柳泉工具 - 免费在线工具箱"> <meta property="og:description" content="覆盖计算、文本、编码、图片等 2000+ 免费在线工具，打开即用，无需注册。"> <meta property="og:url" content="https://www.liuquan.net/tools/"> <meta property="og:image" content="https://www.liuquan.net/assets/og-cover.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="柳泉工具首页预览图"> <meta property="og:type" content="website"> <meta property="og:site_name" content="柳泉工具"> <meta property="og:locale" content="zh_CN"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="柳泉工具 - 免费在线工具箱"> <meta name="twitter:description" content="覆盖计算、文本、编码、图片等 2000+ 免费在线工具，打开即用，无需注册。"> <meta name="twitter:image" content="https://www.liuquan.net/assets/og-cover.png">
由上面这套取值得到的校验结论：
- og:title 14 字符，建议 ≤ 60，通过。
- og:description 38 字符，建议 55 ～ 200，偏短，可以再补两句。
- og:image:alt 9 字符，建议 ≤ 100，通过。
- 分享图 1200×630 即 1.90:1，与平台标注的 1.91:1 基本一致；若要以最小体积换取平台不裁切，可直接用 1200×628。
示例中的标题、描述与图片地址均为演示数值，不代表任何具体站点的配置。
类型、语言、图片与 URL 对照表
下面五张表分别是 og:type 的常用取值、og:locale 的常用取值、各平台对分享图的尺寸建议、比例对应的常见高度，以及绝对 URL 的校验规则。
| og:type | 适用场景 |
|---|---|
| website | 站点首页默认值 |
| article | 文章 / 资讯（推荐配 article:published_time） |
| product | 商品详情 |
| profile | 个人主页 |
| video.movie | 电影 |
| video.episode | 剧集 |
| video.tv_show | 电视节目 |
| music.song | 单曲 |
| music.album | 专辑 |
| book | 书籍 |
| place | 地点 |
| business.business | 企业商家 |
| og:locale | 语言与地区 |
|---|---|
| zh_CN | 简体中文(中国) |
| zh_TW | 繁体中文(中国台湾) |
| zh_HK | 繁体中文(中国香港) |
| en_US | 英语(美国) |
| en_GB | 英语(英国) |
| ja_JP | 日语 |
| ko_KR | 韩语 |
| de_DE | 德语 |
| fr_FR | 法语 |
| es_ES | 西班牙语 |
| ru_RU | 俄语 |
| pt_BR | 葡萄牙语(巴西) |
| 平台 | 推荐尺寸 | 比例 | 体积 / 门槛 |
|---|---|---|---|
| Facebook / Open Graph 推荐 | 1200 × 630 | 1.91:1 | ≥ 200×200 才可显示，< 8 MB |
| Twitter summary_large_image 最小 | 300 × 157 | 1.91:1 | 最大 4096×4096，< 5 MB |
| Twitter summary 最小 | 144 × 144 | 1:1 | < 5 MB |
| LinkedIn 推荐 | 1200 × 627 | 1.91:1 | < 5 MB |
| 微信 / QQ 分享 | 300 × 300 起 | 1:1 或 1.91:1 | 建议 ≤ 1 MB，否则加载慢 |
| 图片比例 | 宽 1200 时的高度 |
|---|---|
| 16:9 | 1200 × 675 |
| 1.91:1 | 1200 × 628 |
| 3:2 | 1200 × 800 |
| 4:3 | 1200 × 900 |
| 1:1 | 1200 × 1200 |
| 2:1 | 1200 × 600 |
| URL 写法 | 判定与原因 |
|---|---|
| https://www.liuquan.net/tools/ | OK |
| https://www.liuquan.net/tools/ | OK |
| /tools/ | 错误：相对路径，爬虫无法解析 |
| www.liuquan.net/tools/ | 错误：缺协议 |
| http://www.liuquan.net/tools/ | 可用但不推荐：HTTP 会被多数平台降级 |
| https://www.liuquan.net/tools/?a=1&b=2 | OK，& 在 HTML 中应写 & |
| https://www.liuquan.net/工具/ | 不推荐：非 ASCII 路径须百分号编码 |
| https://www.liuquan.net/tools#top | 错误：锚点不应出现在 og:url |
| https://www.liuquan.net:443/tools/ | 可省去默认端口 443 |
| https://WWW.liuquan.net/tools/ | 域名应统一小写 |
| https://www.liuquan.net//tools/ | 错误：双斜杠 |
| https://www.liuquan.net/tools/ | 错误：含尾随空格 |
结果边界、舍入与适用说明
- 页面标题建议 ≤ 60 字符，页面描述建议 55 ～ 200 字符（超过约 200 会被 Facebook 截断），图片替代文字建议 ≤ 100 字符；本页按这些区间给出校验。
- 字符数按 Unicode 码点统计，中文、英文、空格与标点各计 1 个，不做半角 / 全角折算。
- og:image 与 og:url 一律要求带 http:// 或 https:// 的绝对地址；相对路径、缺协议、双斜杠、锚点、域名大写都会被拦下并给出原因。
- 分享图平台门槛为 ≥ 200×200 且单边不超过 4096px；本页只做尺寸与比例校验，不检查图片是否真的能访问或体积是否超标。
- http:// 与含非 ASCII 字符的 URL 属于「可用但不推荐」，本页以提示而非报错处理。
- 微信 / QQ 的卡片规则与 Facebook、Twitter 并不完全一致，某些版本只读 og: 标签、忽略 twitter:，因此两套标签同时输出最稳妥。
- 本页输出的是标签文本，需要自行粘贴进页面的 head 区域；本页不会把标签真的写进当前页面的 head。
常见问题
og: 和 twitter: 为什么一个用 property 一个用 name？
因为两套规范出自不同年代与不同团队。Open Graph 由 Facebook 在 2010 年提出，规定自定义元数据写成 property="og:xxx"；Twitter 的卡片标签沿用了更早的 name 属性写法，写成 name="twitter:xxx"。写反了浏览器不报错，但平台读不到值，卡片会缺标题或缺图，所以本页按前缀自动选择属性名。
og:image 为什么必须是绝对 URL？
爬虫抓取分享卡片时，是拿一个独立的 HTTP 请求去取图，它不会执行页面的相对路径解析，也不读页面的 base 标签。所以 /assets/og-cover.png 这样的写法对爬虫等于无效地址，必须写全成 https://www.liuquan.net/assets/og-cover.png，并且域名统一小写才稳妥。
1200×630 是怎么来的？
Facebook 推荐的大图卡片比例是 1.91:1，1200 乘以 1.91 约等于 2282 的一半，即高度约 628，取整成 630 方便制作，于是 1200×630 成为通用规格，实际比例约 1.90:1。若要以严格 1.91:1 出图，用 1200×628 即可；本页的对照表同时列出了两者。
og:url 填错会有什么后果？
og:url 是平台判断「这两条分享是不是同一页面」的依据，点赞、评论与转发计数会按它归并。填成带 # 锚点的地址、或域名大小写不一致的地址，同一个页面就会被拆成两条独立计数，看起来像是数据被拆散了。所以 og:url 应写成规范化的绝对地址。
缺 og:image 会怎样？
卡片会退化成一段纯文字链接，没有缩略图，点击率通常明显下降。同时 og:title 缺省时平台会回落到页面的 title 标签，og:description 缺省时回落 meta description，og:url 缺省时回落当前 URL——这些回落值常带查询参数或大小写不统一，反而更容易制造重复条目。
og:image:width 和 og:image:height 有必要写吗？
有。它们让平台在图片还没下载完时就按这对宽高预留版面，卡片展开时不会因为图片姗姗来迟而整体跳动，也就是减少布局位移。图不大时可以省，但填上更稳；本页默认就把 1200 与 630 一并输出。
这个工具免费吗？
免费，无需注册即可使用。
输入的数据安全吗？
安全。计算在当前浏览器本地完成，不会上传输入内容。
相关工具
- Meta 标签生成器：通用 meta 标签（description、viewport、robots）的批量输出。
- JSON-LD 结构化数据生成器：为搜索引擎的富媒体结果准备结构化数据。
- Meta 标签描述长度检测：核对标题与描述字符数是否越界。
- robots.txt 生成器：抓取规则与站点地图声明。
- XML 站点地图生成器：让爬虫发现全部页面。
- UTM 链接生成器：给分享链接加来源参数后再投放到社交平台。
- 开发者工具：查看全部开发者工具。