公众号推文被拒
运营小陈写一篇行业分析，配图用了网上的数据截图，被平台以「无来源标注」打回。他需要一张规范的 Open Graph 预览图来替代，但手边没有设计资源。用本工具在标题字段填入「2024 行业报告：三大趋势」，description 写「数据来源：工信部」，OG 图片链接指向自制白底黑字图。保存后转发到公众号后台，预览卡片直接显示标题和摘要，不再被系统误判为「诱导分享」，文章顺利发布。
基础basic meta
OPEN GRAPHog: · facebook / 微信 / 通用
TWITTER CARDtwitter: · X 卡片
SERP 预览Google 搜索摘要
页面标题
2026年6月14日 — 页面描述将显示在这里。
社交卡预览OG / Twitter 分享卡片
og:image 占位 · 1200×630
EXAMPLE.COM
页面标题
页面描述
预览为示意效果，实际展示由各平台抓取规则决定（如标题/描述截断长度、图片裁剪比例）。
生成代码paste into <head>
就绪 · 填写字段即时生成 meta 代码与预览
第一节
关于本工具
About网页分享到微信或 Twitter 时，预览图、标题、描述显示不全，通常是 OG 和 Twitter Card 标签缺失或写错。这个工具将 title、description、OG 和 Twitter Card 所需的 6 个核心标签整合到一个表单里，输入后即时生成可直接粘贴到 HTML <head> 的完整代码块。所有输入只在浏览器本地拼接，不会上传到任何服务器。
使用场景
官网改版卡在测试
前端工程师老刘把新首页的 title 和 description 写好，但同事在微信里转发链接时，预览卡片一直显示旧版「欢迎访问我们的网站」。他用本工具生成一套完整的 OG 标签，把 og:title 设为「XX 科技 - 工业检测方案」，og:description 设为「为工厂提供 0.1mm 精度视觉检测设备」，og:image 用产品实拍图。把代码贴到 <head> 后，用 Facebook 分享调试器验证，卡片 10 秒内刷新成功，同事转发时不再显示旧缓存。
电商活动海报无链接
电商运营阿琳要在朋友圈发一张 618 促销海报，但海报是静态图片，用户长按识别不了链接。她需要让海报在微信里被分享时自动带上活动页链接。用本工具生成 Twitter Card 中的 summary_large_image 标签，把 og:image 设成海报图 URL，og:url 指向活动落地页。发布后，朋友点开海报图直接跳转到满减页面，不用复制口令再打开淘宝，转化率比纯图片高 30%。
个人博客被爬虫误封
独立博主小王用 GitHub Pages 搭了一个技术博客，但某天搜索引擎突然不索引他的新文章。检查发现是 <title> 标签写成了「index.html」，导致爬虫认为页面是空壳。他用本工具把每篇文章的 title 设为「如何用 Rust 写一个 WebSocket 服务器 - 小王的笔记」，description 设为「手把手教程，含完整代码示例和性能测试对比」。重新提交 URL 到 Google Search Console，48 小时内新文章被收录，搜索排名从第 7 页升到第 2 页。
产品文档被同事误改
产品经理小张把新功能说明文档的链接发到工作群，但同事在群里回复「打不开」。排查发现文档的 Twitter Card 标签被第三方工具自动添加了错误的 og:url，指向了旧版页面。他用本工具重新生成一份干净的标签，只保留 title、description 和 og:url（指向最新版文档）。同事再次点击时，预览卡片显示正确标题和摘要，且跳转后直接看到更新后的内容，不再出现 404 页面。
第二节
使用指南
Getting Started使用步骤
- 1在「页面标题」框内输入网页标题（≤70 字符），右侧预览区同步显示 title 标签内容
- 2在「页面描述」框内输入 50–160 字的摘要，预览区同步更新 description 标签
- 3展开「社交卡片」区域，分别填写 OG 标题、描述、图片 URL（可选），预览区生成 Facebook/Twitter 卡片样式
- 4点击「复制代码」按钮，所有标签以 HTML 格式写入剪贴板，按钮短暂显示「已复制」反馈
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 标题：全宝工具站 - 免费在线工具集合 描述：提供SEO、开发、设计等免费在线工具，无需注册，即开即用。 URL：https://www.quanbao5.com 站点名称：全宝工具站 | <title>全宝工具站 - 免费在线工具集合</title> <meta name="description" content="提供SEO、开发、设计等免费在线工具，无需注册，即开即用。" /> <meta property="og:title" content="全宝工具站 - 免费在线工具集合" /> <meta property="og:description" content="提供SEO、开发、设计等免费在线工具，无需注册，即开即用。" /> <meta property="og:url" content="https://www.quanbao5.com" /> <meta property="og:site_name" content="全宝工具站" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="全宝工具站 - 免费在线工具集合" /> <meta name="twitter:description" content="提供SEO、开发、设计等免费在线工具，无需注册，即开即用。" /> | 常规：最典型的页面元数据配置，title+description+OG+Twitter Card 完整输出，验证基础功能是否正常。 |
| 标题： 描述： URL： 站点名称： | <title></title> <meta name="description" content="" /> <meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:url" content="" /> <meta property="og:site_name" content="" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="" /> <meta name="twitter:description" content="" /> | 边界：所有字段为空，验证工具是否仍生成完整标签结构（而非报错或跳过），同时检查空字符串是否被正确处理。 |
| 标题：我的博客 - 第 1 页 | 一个非常非常非常非常非常非常非常非常非常非常非常非常长的标题用来测试截断行为 描述：这是一段超过 300 个字符的描述文本，用来测试工具是否对 description 和 OG description 进行长度截断。实际上，大多数搜索引擎和社交平台会截断超过 160 字符的 description，但工具本身是否做截断？如果不截断，生成的 HTML 会包含完整文本，这可能导致预览时被截断。我们继续填充字符直到达到 300 字符以上，以验证工具的默认行为。1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 测试结束。 URL：https://example.com/blog/page/1 站点名称：我的博客 | <title>我的博客 - 第 1 页 | 一个非常非常非常非常非常非常非常非常非常非常非常非常长的标题用来测试截断行为</title> <meta name="description" content="这是一段超过 300 个字符的描述文本，用来测试工具是否对 description 和 OG description 进行长度截断。实际上，大多数搜索引擎和社交平台会截断超过 160 字符的 description，但工具本身是否做截断？如果不截断，生成的 HTML 会包含完整文本，这可能导致预览时被截断。我们继续填充字符直到达到 300 字符以上，以验证工具的默认行为。1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 测试结束。" /> <meta property="og:title" content="我的博客 - 第 1 页 | 一个非常非常非常非常非常非常非常非常非常非常非常非常长的标题用来测试截断行为" /> <meta property="og:description" content="这是一段超过 300 个字符的描述文本，用来测试工具是否对 description 和 OG description 进行长度截断。实际上，大多数搜索引擎和社交平台会截断超过 160 字符的 description，但工具本身是否做截断？如果不截断，生成的 HTML 会包含完整文本，这可能导致预览时被截断。我们继续填充字符直到达到 300 字符以上，以验证工具的默认行为。1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 测试结束。" /> <meta property="og:url" content="https://example.com/blog/page/1" /> <meta property="og:site_name" content="我的博客" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="我的博客 - 第 1 页 | 一个非常非常非常非常非常非常非常非常非常非常非常非常长的标题用来测试截断行为" /> <meta name="twitter:description" content="这是一段超过 300 个字符的描述文本，用来测试工具是否对 description 和 OG description 进行长度截断。实际上，大多数搜索引擎和社交平台会截断超过 160 字符的 description，但工具本身是否做截断？如果不截断，生成的 HTML 会包含完整文本，这可能导致预览时被截断。我们继续填充字符直到达到 300 字符以上，以验证工具的默认行为。1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 测试结束。" /> | 易错：超长标题和描述，验证工具是否自动截断（大多数平台限制 title 约 60 字符、description 约 160 字符）。如果工具不截断，用户直接复制可能产生不符合预期的 SEO 效果。 |
| 标题：产品详情页 描述：这是我们的产品，非常好用。 URL：https://shop.example.com/product/12345?ref=homepage&utm_source=twitter 站点名称：示例商店 | <title>产品详情页</title> <meta name="description" content="这是我们的产品，非常好用。" /> <meta property="og:title" content="产品详情页" /> <meta property="og:description" content="这是我们的产品，非常好用。" /> <meta property="og:url" content="https://shop.example.com/product/12345?ref=homepage&utm_source=twitter" /> <meta property="og:site_name" content="示例商店" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="产品详情页" /> <meta name="twitter:description" content="这是我们的产品，非常好用。" /> | 常规：带查询参数的 URL，验证工具是否保留完整 URL（包括参数），这对社交媒体分享时的链接追踪很重要。 |
| 标题：<script>alert('XSS')</script> 测试页 描述：包含 <b>HTML</b> 标签 & 特殊符号 < > & URL：https://example.com/test 站点名称：测试站点 | <title><script>alert('XSS')</script> 测试页</title> <meta name="description" content="包含 <b>HTML</b> 标签 & 特殊符号 &lt; &gt; &amp;" /> <meta property="og:title" content="<script>alert('XSS')</script> 测试页" /> <meta property="og:description" content="包含 <b>HTML</b> 标签 & 特殊符号 &lt; &gt; &amp;" /> <meta property="og:url" content="https://example.com/test" /> <meta property="og:site_name" content="测试站点" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="<script>alert('XSS')</script> 测试页" /> <meta name="twitter:description" content="包含 <b>HTML</b> 标签 & 特殊符号 &lt; &gt; &amp;" /> | 易错：输入包含 HTML 标签和特殊字符，验证工具是否进行 HTML 实体转义。不转义会导致 XSS 漏洞或页面渲染错误。 |
| 标题：首页 描述： URL：https://example.com 站点名称： | <title>首页</title> <meta name="description" content="" /> <meta property="og:title" content="首页" /> <meta property="og:description" content="" /> <meta property="og:url" content="https://example.com" /> <meta property="og:site_name" content="" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="首页" /> <meta name="twitter:description" content="" /> | 边界：部分字段为空（描述和站点名称），验证工具是否正确处理缺失字段，生成的结构是否完整。 |
| 标题：多语言页面 - 日本語 描述：このページは日本語で書かれています。Unicode 対応テスト。 URL：https://example.com/ja 站点名称：多言語サイト | <title>多语言页面 - 日本語</title> <meta name="description" content="このページは日本語で書かれています。Unicode 対応テスト。" /> <meta property="og:title" content="多语言页面 - 日本語" /> <meta property="og:description" content="このページは日本語で書かれています。Unicode 対応テスト。" /> <meta property="og:url" content="https://example.com/ja" /> <meta property="og:site_name" content="多言語サイト" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="多语言页面 - 日本語" /> <meta name="twitter:description" content="このページは日本語で書かれています。Unicode 対応テスト。" /> | 常规：非 ASCII 字符（中文、日文），验证工具对 Unicode 的支持，确保多语言内容不会乱码。 |
常见错误对照
1.description 写成了关键词堆砌，而非自然摘要
✗ 错误
SEO, 优化, 关键词, 排名, 流量, 网站, 推广, 搜索引擎, 营销, 工具✓ 修复
免费在线 Meta 标签生成工具，自动生成 title、description、OG 和 Twitter Card 标签，帮助提升网页在搜索引擎和社交平台的展示效果。搜索引擎对 description 的排名权重极低，堆砌关键词无益；且社交平台（如 Twitter）会直接截取 description 作为摘要，堆砌词会降低点击率。
2.title 标签超过 60 字符，在搜索结果中被截断
✗ 错误
全宝工具站 - 最好用的在线 Meta 标签生成器，支持 SEO 优化和社交分享卡片一键生成✓ 修复
Meta 标签生成器 — 全宝工具站Google 搜索结果页标题通常显示 50–60 字符，超长会被截断为省略号，导致核心信息丢失。建议将品牌名放在末尾，核心词前置。
3.OG:image 使用了相对路径，社交平台无法抓取
✗ 错误
og:image content="/images/cover.png"✓ 修复
og:image content="https://www.quanbao5.com/images/cover.png"Facebook、Twitter 等平台抓取 OG 标签时，图片 URL 必须是绝对路径（含协议和域名），否则会因无法解析而忽略该标签。
4.Twitter Card 类型写错，导致卡片样式不符合预期
✗ 错误
name="twitter:card" content="summary_large_image" 但图片尺寸只有 120×120✓ 修复
name="twitter:card" content="summary" （小图）或 图片至少 300×157（大图）Twitter 的 summary_large_image 要求图片最小 300×157，否则会降级为 summary 样式。类型与图片尺寸不匹配会导致卡片显示异常。
5.OG:title 与 HTML title 不一致，造成社交分享与搜索展示脱节
✗ 错误
<title>全宝工具站</title> 但 og:title content="Meta 标签生成器"✓ 修复
两者保持一致：<title>Meta 标签生成器 — 全宝工具站</title> 且 og:title content="Meta 标签生成器 — 全宝工具站"OG 标签是社交平台独立使用的，与 HTML title 无自动关联。不一致会让用户从社交链接点进来后看到不同标题，产生困惑。
6.description 中混入了 HTML 标签，导致社交摘要显示异常
✗ 错误
og:description content="<strong>免费</strong>的 Meta 标签工具"✓ 修复
og:description content="免费的 Meta 标签工具"OG 和 Twitter Card 的 description 字段只接受纯文本，HTML 标签会被直接显示为字符串，破坏可读性。
7.忘了添加语言和编码声明，导致非英文内容乱码
✗ 错误
只写了 <html> 未指定 lang 和 charset✓ 修复
<html lang="zh-CN"><meta charset="UTF-8">浏览器和社交爬虫默认按 ASCII 或系统语言解析，未声明 UTF-8 时，中文、日文等字符可能显示为乱码。
第三节
工作原理
How It Works核心公式
title = 用户输入标题 (≤ 60 字符); description = 用户输入描述 (≤ 160 字符); og:title = title; og:description = description; og:image = 用户输入图片 URL; twitter:card = 用户选择类型 (summary / summary_large_image / app / player); twitter:title = title; twitter:description = description; twitter:image = og:image
变量说明
title网页标题，建议 ≤ 60 字符description网页描述，建议 ≤ 160 字符og:titleOpen Graph 标题，默认等于 titleog:descriptionOpen Graph 描述，默认等于 descriptionog:image社交分享图片 URL，建议 ≥ 1200×630twitter:card卡片类型：summary / summary_large_image 等twitter:titleTwitter 标题，默认等于 titletwitter:descriptionTwitter 描述，默认等于 descriptiontwitter:imageTwitter 图片，默认等于 og:image
示例
用户输入 title = '全宝工具 - Meta 标签生成器'（18 字符）、description = '在线生成 HTML meta 标签，支持 title、description、Open Graph 和 Twitter Card，一键复制代码。'（48 字符）、og:image = 'https://example.com/og.png'、twitter:card = 'summary_large_image'。工具输出：<title>全宝工具 - Meta 标签生成器</title><meta name="description" content="在线生成 HTML meta 标签，支持 title、description、Open Graph 和 Twitter Card，一键复制代码。"><meta property="og:title" content="全宝工具 - Meta 标签生成器"><meta property="og:description" content="在线生成 HTML meta 标签，支持 title、description、Open Graph 和 Twitter Card，一键复制代码。"><meta property="og:image" content="https://example.com/og.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="全宝工具 - Meta 标签生成器"><meta name="twitter:description" content="在线生成 HTML meta 标签，支持 title、description、Open Graph 和 Twitter Card，一键复制代码。"><meta name="twitter:image" content="https://example.com/og.png">。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我填了标题和描述，为什么在微信里分享还是显示空白？＋
答
微信内置浏览器缓存很重，而且优先读自己抓取的快照，不会实时刷新你新设的 meta 标签。本工具生成的 OG 标签本身是对的，但微信可能还拿着旧数据。解决步骤：先用本工具的「预览」功能检查标签是否生效；然后在微信开发者工具里用「清除缓存」或等 24 小时让微信重新抓取。另外确认 URL 没有被微信屏蔽，且页面能被正常访问。
问只填一个标题够用吗？别的标签不填会怎样？＋
答
只填 title 的话，大部分平台（百度、谷歌）能正常显示标题，但分享到社交平台时，description、OG、Twitter Card 缺失会导致摘要显示为页面第一段文字或空白。本工具里 description 是必填项，因为搜索引擎和社交平台都依赖它生成摘要。建议至少填标题、描述、OG 标题、OG 描述这四项，否则分享卡片可能只显示 URL 或乱码。
问为什么我生成的 meta 标签复制到代码里，预览时图片不显示？＋
答
图片不显示最常见的原因是图片 URL 写错了。本工具要求填绝对路径（带 https:// 的完整链接），不能是相对路径如 /images/logo.png。其次检查图片尺寸：OG 要求至少 200×200 像素，推荐 1200×630；Twitter Card 要求至少 144×144。图片格式建议用 JPEG 或 PNG，避免 WebP 或 SVG。最后确认图片服务器没有防盗链限制。
问这个工具生成的代码，百度能直接识别吗？＋
答
能。百度爬虫会读取 <title> 和 <meta name="description"> 标签，本工具生成的这两项符合百度规范。OG 和 Twitter Card 是社交平台用的，百度不直接用于搜索结果摘要，但会作为结构化数据参考。如果想让百度显示更丰富的摘要（如站点链接、面包屑），需要额外加 JSON-LD 结构化数据，本工具不生成那个。
问我做了好几个页面，每个都要手动填一遍，有没有批量生成的办法？＋
答
本工具当前是单页模式，没有批量上传功能。如果页面多，建议用 Excel 整理好标题、描述、图片 URL，然后用脚本拼接成 meta 标签模板。本工具支持「复制全部」按钮，可以复制后粘贴到编辑器里批量替换变量。如果技术基础好，可以写一个简单的 Node.js 或 Python 脚本，循环读取 CSV 并拼接出完整 HTML 头。
问生成的标签里 og:url 应该填当前页面地址还是首页地址？＋
答
og:url 应该填当前页面的完整 URL（带协议和域名），不是首页。比如你在写一篇关于「SEO 技巧」的文章，og:url 就填那篇文章的链接。这样分享时社交平台知道这个卡片对应哪个页面，用户点击卡片会直接跳转到正确页面。如果填首页，分享出去后用户永远回到首页，就失去了页面级分享的意义。
问为什么我在 Facebook 上分享链接，预览还是旧标题？＋
答
Facebook 缓存很顽固，即使改了 meta 标签，它可能还显示 24 小时前的快照。解决方法：用 Facebook 的「分享调试器」（https://developers.facebook.com/tools/debug/）输入你的 URL，点「抓取新信息」强制刷新。本工具生成的 OG 标签格式是标准的，问题不在工具，在平台缓存策略。如果多次刷新还是旧数据，检查 og:title 是否包含特殊字符（如引号、表情符号），这些可能导致解析失败。
问这个工具是纯前端生成，我的数据会上传到你们服务器吗？＋
答
不会。本工具所有代码在浏览器本地运行，你输入的任何内容（标题、描述、图片链接）都不会发送到任何服务器。生成 meta 标签的过程完全在内存中完成，刷新页面或关闭浏览器后数据自动消失。如果在意隐私，甚至可以断网使用——页面加载后断开网络，工具依然能正常生成代码。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。