Meta 标签生成器

这个工具做什么

Meta 标签生成器生成放在 HTML 页面 <head> 里的标签：<title>、meta 描述、关键词和作者、robots 指令、canonical 规范链接、主题色、viewport 和字符集声明、完整的 Open Graph 标签（og:title、og:description、og:image、og:url、og:type、og:site_name、og:locale），以及 X / Twitter 卡片标签。

输入时它会实时预览页面在搜索结果和社交卡片中的大致样子，并检查常见问题：标题超过约 60 个字符，描述缺失、太短或超过约 160 个字符，规范网址不是完整网址，分享图片没有完整网址，语言区域或颜色格式不对。全部在浏览器里完成，预览也特意不加载你的图片，所以本页面不会发出任何网络请求。

使用方法

1. 填写页面信息。标题和描述最重要，计数器会显示它们相对常见显示上限的长度。点示例可以看到完整的例子。
2. 填写页面的规范网址和分享图片。/images/cover.jpg 这样的相对路径会根据规范网址解析成完整网址。
3. 在选项里选择 Open Graph 类型（大多数页面用 website，博客文章用 article）、卡片尺寸、是否允许搜索引擎收录和跟踪链接，以及要包含哪几组标签。
4. 查看 HTML 下方的提示和预览，然后把 HTML 复制到页面模板里。

选项保存在页面地址里，表单内容保存在浏览器中，之后回来可以继续编辑，也可以分享带相同设置的链接。

示例

示例页面生成的标签大致如下（有删节）：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

所有值都会做 HTML 转义，标题里的引号和 & 不会破坏标签；语言区域 en-US 会规范成 Open Graph 要求的 en_US 形式。

小贴士

• 每个页面都写独立的标题和描述；全站重复会让搜索结果难以区分。
• 把最重要的词放在标题前面，过长的标题会从末尾被截断。
• 规范网址应当是你希望被收录的确切地址，包括协议以及带不带 www 的首选写法。
• robots 设为 noindex 可以让页面不出现在搜索结果里，但前提是爬虫还能抓取它：不要同时在 robots.txt 里屏蔽这个页面。