HTML 元标签生成器
为页面的 <head> 生成 SEO 和社交分享元标签：标题、描述、关键词、作者、规范 URL、robots 指令和主题色，并附带用于丰富链接预览的 Open Graph 和 Twitter Card 标签。可复制或下载可直接粘贴的 HTML。
输入
显示在浏览器标签页中，也是搜索结果的标题。建议 50–60 个字符。
搜索结果下方的摘要文字。建议 150–160 个字符。
用逗号分隔。Google 和大多数主流搜索引擎会忽略此标签，但一些小众搜索引擎仍会读取。如果不确定，可以留空。
页面的首选网址，用于告诉搜索引擎在存在重复页面时应索引哪个版本。
添加 Open Graph 和 Twitter Card 标签，使分享到社交平台的链接显示丰富的预览卡片。推荐尺寸：1200×630 像素。留空则不添加社交标签。
在移动端为浏览器界面（地址栏、任务切换器）着色。留空则不输出此标签。
输出
将此代码粘贴到 HTML 页面的 <head> 中。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-meta-tag-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"title": "My Awesome Website",
"description": "A brief description of my awesome website for se…",
"keywords": "",
"author": "",
"canonicalUrl": "",
"ogImage": "",
"robots": "",
"themeColor": ""
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `html-meta-tag-generator` tool (HTML Meta Tag Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/html-meta-tag-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="HTML 元标签生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
HTML 元标签生成器可以生成每个网页 <head> 中都应包含的 <meta> 和 <link> 标签代码块。只需填写几个简单字段——页面标题、描述、规范 URL、社交分享图片——工具就会生成干净、可直接粘贴的 HTML，您可以复制或下载。所有处理都在您的浏览器中完成，您输入的内容不会发送到任何服务器。
这些元标签的作用
元标签用于向搜索引擎和社交网络描述您的页面。它们不会改变访客在页面上看到的内容，而是决定页面在其他地方的展示方式：
- 标题和描述是 Google 搜索结果中显示的标题和摘要。清晰且长度合适的标题和描述有助于提高点击率。
- 规范 URL 告诉搜索引擎应索引页面的哪个版本，避免同一页面可通过多个网址访问时出现重复内容问题。
- Robots 控制搜索引擎是否索引该页面以及是否跟随其中的链接。
- Open Graph 标签（
og:title、og:description、og:image、og:url）用于生成在 Facebook、LinkedIn、Slack、Discord 及大多数即时通讯应用中分享链接时显示的富媒体预览卡片。 - Twitter Card 标签为 X（Twitter）提供同样的功能，生成带大图的摘要卡片。
- 主题色用于在移动设备上为浏览器界面（地址栏、任务切换器）着色。
如何使用本工具
- 输入页面标题和元描述——这是几乎每个页面都应具备的两个标签。
- 添加规范 URL、作者以及其他需要的可选字段。
- 如需社交预览卡片，请粘贴社交分享图片的 URL（最好为 1200×630 像素）。工具会据此添加一致的 Open Graph 和 Twitter Card 代码块，并从您已填写的字段中提取标题、描述和 URL。
- 复制生成的 HTML 并粘贴到页面的
<head>中，或下载为meta-tags.html。
留空的可选字段会被自动跳过，因此您的代码中不会出现空的 content="" 属性。
关键词元标签还有用吗？
对 Google 来说没有用。Google 多年前已公开确认会忽略 <meta name="keywords"> 标签，大多数主流搜索引擎也同样忽略，因为该标签曾被大量滥用于垃圾信息。一些较小或区域性的搜索引擎仍会读取它，因此本工具将其保留为可选字段——但您可以放心地将其留空。
<meta charset> 真的需要吗？
需要。<meta charset="utf-8"> 应作为 <head> 中的第一个标签，以便浏览器正确解码文本。本工具始终输出现代 HTML5 写法（小写 utf-8，不含自闭合斜杠）。
这些标签能保证显示预览图吗？
Open Graph 和 Twitter 标签告诉平台应该显示什么，但各平台会缓存预览内容。更新标签后，请使用平台自带的调试工具（例如 Facebook Sharing Debugger）重新抓取您的 URL。