meta 标签生成器，免费
为您的网站生成 SEO、Open Graph 和 Twitter Card 等 meta 标签。
关于 meta 标签
Meta 标签为您的 HTML 页面提供元数据。它们帮助搜索引擎理解内容，控制页面在搜索结果中的展现方式，并定义链接在社交媒体上的预览。一组优化良好的 meta 标签可以提升来自搜索和社交分享的点击率。为了在搜索结果中以最佳方式显示，请将标题保持在 60 个字符以内，描述保持在 160 个字符以内。
<head> 元数据的四大家族
现代 HTML 页面的 <head> 通常在四个分组里携带元数据,各自服务于不同的受众:
- 文档基本信息,每个浏览器都需要的:
<title>、<meta charset="utf-8">、<meta name="viewport">、<meta name="description">。 - SEO 指令,搜索引擎爬虫读取的:
<meta name="robots">、<link rel="canonical">,以及最终成为 SERP 链接的页面标题。 - Open Graph,Facebook、LinkedIn、Slack、Discord、iMessage 以及大多数其它分享链接客户端渲染的:
og:title、og:description、og:image、og:url、og:type、og:site_name。 - Twitter Card,X / Twitter 为分享链接渲染的,缺失时会回退到 OG 标签:
twitter:card、twitter:title、twitter:image、twitter:site、twitter:creator。
本生成器从一个表单输出全部四大家族。输出可直接放进任何 HTML 文件的 <head>:粘贴、保存、部署。要专门深入了解 Open Graph,请使用专门的 Open Graph 预览，免费 工具,它会展示各平台的实时渲染。
标题和描述:应该多长?
Google Search Central 给出的答案很直接:没有硬性最大值。摘要只是被截断以适应设备宽度。60 字符标题和 160 字符描述这两条规则,是从 Google SERP 中观察到的像素宽度截断点(桌面端约 580 像素)推导出来的行业惯例。实务建议:
- 标题,目标 50-60 字符。宽大写字母(W、M、大写 A)比窄字母(i、l、t)消耗更多像素空间,所以两个 60 字符的标题渲染出来的可见宽度可能差别很大。
- 描述,桌面端 150-160 字符,移动端约 120。把关键信息放在前面,以便在移动端截断后仍可见。
- 长度不影响排名;它只影响搜索者点击前看到多少摘要。
robots 元标签:它实际控制什么
和已废弃的 keywords 标签(下面会讲)不同,<meta name="robots"> 仍然在用;Google 明确支持它。常见取值:
index, follow,默认。页面可以出现在搜索中;爬虫追踪它的链接。noindex,把这一页排除在搜索结果之外。适用于感谢页、内部工具、分页归档、搜索结果页,以及任何你不想与真实内容竞争的东西。nofollow,不追踪此页上的链接。整页应用很少是正确选择;通常按链接通过rel="nofollow"应用。noindex, nofollow,两者都用。这是公开可达页面最强的隐私姿态。noarchive,不要在搜索结果中显示缓存副本。nosnippet,不显示描述摘要,只显示标题。
对 Google 特定的覆盖,使用 <meta name="googlebot"> 加同样的取值。注意 noindex 也可以表达为 HTTP X-Robots-Tag 头部,这是放在 PDF、图片以及其它你不能添加 meta 标签的非 HTML 资源上的合适地方。
为什么 canonical URL 重要
<link rel="canonical"> 告诉搜索引擎,在多个 URL 服务于相同或近似相同内容时,哪一个是「官方」版本。需要 canonical 的常见情况:
- 尾部斜杠与否(
/pagevs/page/)。 - HTTP 与 HTTPS(遗留重定向有时会让两者都可索引)。
- WWW 与裸域(
www.example.comvsexample.com)。 - 跟踪参数(
?utm_source=...、?ref=...)制造无穷无尽的「不同」URL。 - 分页、排序、过滤参数,产生顺序不同但内容相同的页面。
- 在多个站点上重新发布的联合内容(canonical 指向原文)。
没有 canonical,Google 自己挑一个版本,可能挑错。canonical URL 必须是绝对的(完整 https://),并且应该与你想被索引的 URL 完全一致。
2026 年可以跳过的标签
<meta name="keywords">,Google 自 2009 年 9 月以来就明确表态:不把 keywords 元标签当作排名信号。Bing 走得更远:它把这个标签里过度堆砌关键词当作垃圾信号。包含它对 SEO 没害也没益;本生成器保留这个字段是为了那些公司模板还期待它的用户。<meta http-equiv="refresh">用作重定向,改用服务器端正确的 HTTP 301/302 重定向。Meta refresh 会延迟重定向,并让一些无障碍工具混乱。<meta http-equiv="X-UA-Compatible">,只为 Internet Explorer 兼容性需要,而 IE 已不再是问题。<meta name="revisit-after">,从未被主要爬虫遵守。纯属货物崇拜。<meta name="generator">,仅信息性;告诉世界你的网站是用什么搭建的。有时是值得移除的安全信号。
每个页面真正需要的两个标签
在 <title> 和 <meta name="description"> 之外,有两个标签对现代网页是不可妥协的:
<meta charset="UTF-8">,应当出现在文档前 1024 字节内,理想情况下作为<head>的第一个子元素。HTML Living Standard 要求它来正确处理字符。没有它,浏览器可能会猜测编码并猜错,尤其在非拉丁文字上。<meta name="viewport" content="width=device-width, initial-scale=1">,告诉移动浏览器以设备实际宽度渲染页面,而不是从一个虚构的 980 像素桌面布局缩小。没有它,每个移动用户看到的都是一个缩得很小、几乎不可用的页面版本。
Open Graph 与 Twitter Cards 简介
简短摘要;深入请用 Open Graph 预览，免费 工具。根据 ogp.me,四个必需的 OG 标签是:og:title、og:type、og:image、og:url。可选但推荐:og:description、og:site_name。图片尺寸:1200×630(1.91:1)是跨平台最安全的尺寸。
对 X / Twitter:加上 twitter:card = summary_large_image(现代全宽卡片),缺失 Twitter 专属标签时,X 会回退到 OG 标签。X 于 2022 年 8 月 2 日移除了独立的 Twitter Card Validator 预览;改为把 URL 粘到推文撰写器里来验证。
结构化数据是另一个工作
JSON-LD 结构化数据(使用 schema.org 词汇表)是驱动 Google 富结果的东西:菜谱卡、带星级的产品信息、搜索中的 FAQ 摘要、面包屑路径。它与 meta 标签不同,放在一个 <script type="application/ld+json"> 块里,而不是 <meta> 标签。两者都建议使用;一个不替代另一个。Meta 标签控制基本的 标题/描述/分享卡;结构化数据解锁更丰富的格式。
常见错误
- 包含
meta keywords并期望 SEO 收益。Google 在 2009 年宣布它不使用。二十多年后它仍然在旧模板里;移除或忽略。 - 忘记
<link rel="canonical">。如果你的 URL 有跟踪参数或备用版本,Google 会自己选一个。没有 canonical,选中的版本可能不是有所有入站链接的那个。 - 在
<title>、og:title和twitter:title中使用不同的标题。技术上不算错,但不一致。干净的默认做法是三处共用一个标题。 - 把通用站点 logo 当作每一页的
og:image。每个页面都值得有一张与其内容相关的独特图片;整个站用一张 logo 会产生无聊的分享预览。 - 面向移动端的页面缺少
viewport元标签。移动浏览器以虚构的桌面宽度渲染页面并缩小。用户体验非常糟糕。 - 用
<meta http-equiv="refresh">做重定向。服务器端 HTTP 301/302 才是正确做法;meta refresh 更慢、对无障碍不友好,而且很多爬虫在排名上对它的处理也不一致。 - 标题超过约 580 像素(约 60 字符宽)。Google 用省略号截断;被截断的部分对搜索者不可见。
- 忘了 single-page app 需要服务器端渲染或预渲染的 meta 标签。许多社交媒体爬虫(Facebook、LinkedIn、Slack、Discord)不执行 JavaScript。客户端 JS 写入的标签对它们不可见。
常见问题
keywords 元标签对 SEO 还有帮助吗?
没有。Google 的 Matt Cutts 在 2009 年 9 月宣布 <meta name="keywords"> 不被用作排名信号。Bing 把这个标签里过度堆砌关键词当作垃圾信号。本生成器保留这个字段是为了与仍然期待它的旧模板和 CMS 工作流兼容;留空也安全。
meta description 和 OG description 有什么区别?
HTML 的 <meta name="description"> 是搜索引擎在结果中作为页面标题下的摘要使用的。Open Graph 的 og:description 是社交媒体分享卡显示的。它们可以是同一段文字(通常如此),但如果你的搜索受众和社交受众期望的框架不同,你可以写不同的版本。
我的 JavaScript 在页面加载后写入 meta 标签。这样 OK 吗?
对 Google 的主爬虫(Googlebot)而言,可以;Googlebot 渲染 JavaScript 并能看到渲染后的 meta 标签。对社交媒体爬虫(Facebook、LinkedIn、Slack、Discord、WhatsApp)而言,通常不行;它们大多不执行 JavaScript,只看到初始 HTML。如果你的站是 single-page app,你需要服务器端渲染、预渲染,或者像 Prerender.io 这样的服务,确保社交媒体爬虫看到正确的 meta 标签。
这些标签到底放在哪里?
在 HTML 的 <head> 里,理想情况下靠近顶部。<meta charset> 应当在前 1024 字节内。<meta name="viewport"> 紧接其后。然后是 <title>、<meta name="description">、robots、canonical、OG 标签、Twitter 标签。一旦 charset 和 viewport 足够靠前,<head> 内的顺序就不影响 SEO。
我应该担心 meta refresh 标签的安全性吗?
本身不算安全风险,但是个糟糕模式。服务器端 HTTP 301/302 重定向更快,正确处理 referrer 头,对无障碍更友好。只有当你对重定向没有服务器端控制时(例如没有重定向配置的 GitHub Pages 风格静态托管),才用 meta refresh。
我的 meta 标签会被上传到服务器吗?
不会。生成器完全在你的浏览器中运行。你的标题、描述、URL 和图片字段留在你的机器上;输出片段在本地组合,按需复制到剪贴板。这一点很重要,因为草稿标签经常包含未发布的页面 URL、内部产品名,或预发布的营销文案,你不想让这些经过第三方服务器。