Meta 标签生成器

生成 SEO 与社交分享所需的 meta 标签：title、description、keywords、canonical、robots、Open Graph、Twitter Card、viewport 与 theme-color，并校验 URL 与长度。

浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。

页面信息

标题 title建议 10–60 个字符 · 6010描述 description建议 30–160 个字符 · 16046关键词 keywords规范链接 canonicalrobotsog:typeog:titleog:descriptionog:imageog:urlog:site_nametwitter:cardtwitter:titletwitter:descriptiontwitter:imageviewporttheme-color

生成的 HTML 片段

  <title>UniKit 工具站</title>
  <link rel="canonical" href="https://unikit.cc/">
  <meta name="description" content="即开即用的在线工具箱：编解码、格式化、加密、转换与网络工具，处理过程全部在你的浏览器里完成。">
  <meta name="keywords" content="在线工具, 开发者工具, 编解码, 格式化">
  <meta name="robots" content="index,follow">
  <meta property="og:title" content="UniKit 工具站">
  <meta property="og:description" content="即开即用的在线工具箱，数据不离开你的浏览器。">
  <meta property="og:image" content="https://unikit.cc/og.png">
  <meta property="og:url" content="https://unikit.cc/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="UniKit">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="UniKit 工具站">
  <meta name="twitter:description" content="即开即用的在线工具箱，数据不离开你的浏览器。">
  <meta name="twitter:image" content="https://unikit.cc/og.png">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#0ea5e9">

标签列表

<title>UniKit 工具站</title>

<link rel="canonical" href="https://unikit.cc/">

<meta name="description" content="即开即用的在线工具箱：编解码、格式化、加密、转换与网络工具，处理过程全部在你的浏览器里完成。">

<meta name="keywords" content="在线工具, 开发者工具, 编解码, 格式化">

<meta name="robots" content="index,follow">

<meta property="og:title" content="UniKit 工具站">

<meta property="og:description" content="即开即用的在线工具箱，数据不离开你的浏览器。">

<meta property="og:image" content="https://unikit.cc/og.png">

<meta property="og:url" content="https://unikit.cc/">

<meta property="og:type" content="website">

<meta property="og:site_name" content="UniKit">

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:title" content="UniKit 工具站">

<meta name="twitter:description" content="即开即用的在线工具箱，数据不离开你的浏览器。">

<meta name="twitter:image" content="https://unikit.cc/og.png">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="theme-color" content="#0ea5e9">

这个工具能做什么

新页面上线前补齐 SEO 与分享信息：一次填好 title、description、keywords、canonical、robots，直接拿到可粘进 <head> 的标签片段。
调社交分享卡片：填好 Open Graph 与 Twitter Card 后，微信、Slack、X 抓取到的标题、描述和图片就是这里的内容，不用再靠猜。
检查长度与格式：标题超过 60 字符、描述短于 30 或超出 160、canonical 不是合法 URL、theme-color 不是 hex，都会当场给出提示。
对比规范链接与关键词写法：keywords 里的中文逗号会自动统一成英文逗号，空字段不会生成任何标签，方便看你原本打算输出几个 meta。

示例

输入

title：在线 Base64 编解码
description：把文本或文件内容转成 Base64，也能把 Base64 还原成原文，全部在浏览器本地完成。
keywords：Base64，编解码, 在线工具
canonical：https://unikit.cc/tools/base64-string-converter/
robots / og:* / twitter:* / viewport / theme-color：留空或未填

输出

<title>在线 Base64 编解码</title>
<link rel="canonical" href="https://unikit.cc/tools/base64-string-converter/">
<meta name="description" content="把文本或文件内容转成 Base64，也能把 Base64 还原成原文，全部在浏览器本地完成。">
<meta name="keywords" content="Base64, 编解码, 在线工具">

空字段会被整体跳过（所以上面没有 og:、twitter: 和 robots 标签），keywords 里的中文逗号已归一为「, 」。

常见问题

为什么我填的一些字段没有出现在结果里？

只有非空字段才会生成标签，留空就是「不输出这一行」，这是刻意设计，避免产出 content="" 的空 meta。想看完整效果可以点「示例」把默认值填回去。

og:image 必须填绝对地址吗？

建议绝对地址。校验接受绝对 http(s) URL 和以 / 开头的站内路径，但抓取分享卡片的是外部爬虫，相对路径它无法自行拼接，通常会导致图片丢失。

robots 应该写什么？

常规页面用 index,follow；登录页、后台、搜索结果页用 noindex,follow 或 noindex,nofollow。这里只接受协议里的标准取值（index、noindex、follow、nofollow、noarchive、nosnippet 等），写别的会提示取值不在推荐列表。

title 和 description 的长度到底怎么算？

按字符数（码点）计，不是字节数，所以中文一个字算一个字符。标题建议 10–60，描述建议 30–160；超限只是提示「超过建议长度」，不会阻止生成标签，最终怎么截断取决于搜索引擎。

我能一次生成多个页面的 meta 吗？

这个工具一次只处理一个页面，但页面上的字段是实时生成标签的，可以填一组、复制、再改字段复制下一组，不必刷新页面，内容也不会离开浏览器。

关键词：metameta 标签seoopen graphogtwitter cardcanonicalviewportmeta tag generator

这个工具能做什么

示例

常见问题

同类工具