Meta 标签生成器 — Title、Description、Open Graph 与 Twitter 标签
填写页面的标题、描述和社交卡片信息，即可得到完整且正确转义的 <head> 代码块，并实时显示长度计数。
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Free Business & Marketing Tools | FreeToolsForWeb</title> <meta name="description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <link rel="canonical" href="https://www.example.com/page"> <meta name="theme-color" content="#244b3f"> <!-- Open Graph (Facebook, LinkedIn, Slack, WhatsApp) --> <meta property="og:type" content="website"> <meta property="og:title" content="Free Business & Marketing Tools | FreeToolsForWeb"> <meta property="og:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta property="og:url" content="https://www.example.com/page"> <meta property="og:site_name" content="Example Co"> <meta property="og:image" content="https://www.example.com/images/share.png"> <meta property="og:locale" content="en_US"> <!-- Twitter / X card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Free Business & Marketing Tools | FreeToolsForWeb"> <meta name="twitter:description" content="Free online tools for business: converters, calculators, SEO utilities and a sample-file library. No signup, no ads."> <meta name="twitter:image" content="https://www.example.com/images/share.png">
粘贴到 <head> 中。如果使用 Next.js、React Helmet 或 CMS，请将每一行对应到相应的字段，而不是直接粘贴原始 HTML。
完全在浏览器中运行。你输入的任何内容都不会发送给我们或被存储。 浏览全部免费工具.
发现问题，或者觉得哪里可以更好？每条消息我们都会阅读，并尽快修复。
这款免费的 Meta 标签生成器能生成一个页面所需的全部 head 标签：带实时长度计数的标题和 meta description、canonical 和 robots 指令，以及决定链接分享到 LinkedIn、Facebook、X、Slack 和 WhatsApp 时显示效果的 Open Graph 和 Twitter Card 标签。所有值都经过正确转义，所以标题中包含 & 符号或引号也不会破坏 HTML。
Meta 标签是页面 SEO 中最小、也最显眼的部分：如果你不自己写标题和描述，Google 就会替你写这段“广告文案”；社交标签则决定了分享出去的链接显示的是图片加标题，还是一个光秃秃的 URL。下方说明给出了当前的长度限制，以及那些已经不起任何作用的标签，免得你在 2026 年还在维护 meta keywords 标签。
使用方法
- 输入页面标题（建议 50 到 60 个字符，关键词放在前面）和 meta description（120 到 160 个字符，给出点击的理由）。在合适范围内时计数器会变绿。
- 把 canonical URL 设为页面的首选地址；除非页面必须不出现在搜索结果中，否则 robots 保持 index, follow。
- 添加分享图片（1200 × 630 像素）、网站名称和 Twitter 账号。社交标签会复用相同的标题和描述。
- 查看搜索结果预览，然后把生成的代码块复制到页面的 <head> 中。
- 发布后，用 Open Graph 预览工具测试线上页面，确认标签按预期输出。
常见问题
哪些 Meta 标签对 SEO 真正重要？
Title（直接的排名信号，也是搜索结果中的标题）、meta description（不是排名信号，但它是你的摘要，影响点击率）、canonical（防止重复内容稀释权重）、robots（控制 index/noindex）和 viewport（移动端可用性）。Open Graph 和 Twitter 标签影响社交分享，不影响排名。meta keywords 标签自 2009 年起就被 Google 忽略了，不必费心。
标题和描述应该多长？
标题：约 50 到 60 个字符，因为 Google 按约 600 px 的像素宽度截断。描述：桌面端 120 到 160 个字符，移动端更少。当 Google 认为自己能写得更好时，会改写其中任何一个，内容空泛或堆砌关键词时更常发生，所以请写具体、真实的文案。
Open Graph 和 Twitter Card 标签都需要吗？
X 会把 Open Graph 标签作为备用读取，所以大多数情况下只用 og:* 就够了；不过仍值得添加 twitter:card，因为它决定使用大图卡片还是小摘要卡片。其他平台（LinkedIn、Facebook、Slack、WhatsApp、iMessage、Discord）都只读取 Open Graph。
分享图片应该多大？
1200 × 630 像素（1.91:1）是所有平台大图卡片的安全尺寸。宽度低于 600 px 时，Facebook 和 LinkedIn 会退回到小缩略图或不显示图片。重要内容不要靠近边缘；有些平台在信息流中会裁剪成正方形。请使用基于 HTTPS 的绝对 URL。
每个页面都应该有 canonical 标签吗？
是的，除非页面是另一个页面的副本，否则让它指向自身。它能把跟踪参数、末尾斜杠以及 http/https 等变体统一到一个 URL，是一份低成本的保险。canonical 必须是绝对 URL，且指向返回 200 的页面。
已经不起作用的标签
meta keywords（自 2009 年起被忽略）、meta revisit-after、meta distribution、meta rating 以及 Google 专用的 geo.* 标签都是累赘。robots 的 noodp、noydir 值以及 nosnippet 的各种变体已被淘汰或被 max-snippet 取代。如果模板仍在输出它们，删掉是安全的，也更整洁一些。
转义与编码
属性值中的 & 必须转义为 &，" 必须转义为 "；本生成器会替你处理。把 charset utf-8 声明放在 <head> 的最前面，这样浏览器才能正确解码后续内容。在框架（Next.js、Nuxt、Django、Rails、WordPress）中，请通过框架的 head 或 SEO 组件设置这些值，而不是粘贴原始 HTML，这样它们可以按页面设置并自动转义。
相关免费工具
- 搜索结果摘要预览 — 预览页面标题和 meta 描述在 Google 中的显示效果，并实时检查字符数。
- Open Graph 预览 — 输入 URL，即可看到 Facebook、LinkedIn、X 和 Slack 将显示的卡片、找到的所有标签以及缺失的内容。
- Robots.txt 生成器 — 生成 robots.txt，提供全部允许、测试环境和 WordPress 预设，带 AI 爬虫设置（禁止训练、保留 AI 搜索），并对会导致网站被移出索引的错误发出警告。