Meta 标签生成器
一键生成 SEO / Open Graph / Twitter Card 标签，实时 SERP 预览与长度截断体检，复制即用
在线 Meta 标签生成工具：填写页面标题（title）、描述（description）、canonical、robots、viewport 与 Open Graph、Twitter Card 分享字段， 实时生成一份缩进规范、可直接粘贴进页面 head 的完整标签代码，并同步模拟 Google 搜索结果与社交平台分享卡片的展示效果； 自带 title / description 长度体检（按中文约 30 字、Google 移动端描述约 120-165 字符口径提示截断风险）， 空字段自动省略、表单本地自动保存。全部生成与预览在浏览器本地完成，不上传任何数据。
表单填写
基础字段
未填写：搜索结果最重要的展示字段，建议填写
0 字未填写：展示在标题下方的摘要文案，建议填写
0 字选填：同一内容存在多个 URL 或带参数时建议填写，统一收录权重
0 字符控制搜索引擎是否收录本页；什么时候该用 noindex 见下方说明。
主流搜索引擎已忽略此标签，仅存档用
0 字移动端自适应必需，一般保持默认即可
37 字符字符编码 charset 固定输出 <meta charset="utf-8">，现代页面统一使用 UTF-8，无需配置。
Open Graph（社交分享）
固定同步上方 description，留空则整行省略
选填：分享卡片主视觉，建议 1200×630 以上图片直链
0 字符固定同步上方 Canonical URL，留空则整行省略
Twitter Card（Twitter / X 分享）
大图卡片需要页面有可用配图，否则部分平台会退回小图样式
实时预览
随左侧表单实时更新www.example.com
这是页面标题在搜索结果中的展示位置
页面描述 description 会以两行摘要的形式展示在这里，把页面能解决什么问题写清楚，更能吸引用户点击……
og:image 未设置，部分平台将不显示配图
建议 1200×630 以上的 http(s) 图片直链
www.example.com
og:title 将同步左侧标题
og:description 将同步左侧描述
预览按中文口径模拟：标题在约 30 字、描述在约 165 字符处加 … 截断（中英文口径差异见下方说明），实际展示宽度因设备与搜索引擎而异；社交卡片以 Facebook / Telegram 样式为参考。
生成的 Meta 标签
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="index, follow"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image">
使用方法：复制以上代码，粘贴到页面源码 <head> 与 </head> 之间即可生效；框架 / 建站项目请写入对应页面的头部配置或 SEO 插件字段。
#Meta 标签生成器是什么？
Meta 标签生成器是一款纯本地运行的网页头部（head）标签生成工具。填写页面标题、描述、canonical、robots、viewport 等字段后， 工具会实时生成一份缩进规范、可直接粘贴使用的 HTML Meta 标签，覆盖 SEO 基础标签（title、description、robots、canonical）、 Open Graph 社交分享标签与 Twitter Card 卡片标签；右侧同步模拟 Google 搜索结果与社交平台分享卡片的展示效果， 并对标题、描述做长度体检，超长即时提示截断风险。属性值中的 &、<、>、双引号会自动转义，生成的代码可安全嵌入 HTML； 表单内容自动保存在本机浏览器中，不上传任何数据。
title 和 description 怎么写？
- 关键词前置：核心关键词放在 title 开头、品牌词放结尾，用「-」「|」等分隔符隔开；description 首句就把页面核心价值说清，被截断时不丢关键信息。
- 长度控制：中文 title 建议不超过 30 字（英文口径约 60 字符），description 建议写到 120-165 字（Google 移动端约 120-165 字符口径；桌面端约 150-160 字符）。超长会以 … 截断，排在尾部的关键词等于白写。
- 吸引力：description 写清「谁能用、解决什么问题、有什么不同」，适当加入数字与利益点引导点击；避免多个页面复用同一段描述，也避免堆砌关键词——搜索引擎可能会改写你的 description。
- 每个页面独立：title 与 description 应概括当前页面内容，全站共用一套会稀释每个页面的搜索展示质量。
OG 标签对微信、微博分享生效吗？
诚实地说：作用有限。微信聊天内的链接卡片在多数场景由微信 JS-SDK（wx.updateAppMessageShareData 等接口）配置决定，公众号文章环境也不完整读取 OG； 微博主要按自身接口与站内数据生成卡片，两者都不完全依赖 Open Graph 协议。OG 标签主要对 Telegram、Twitter/X、Facebook、LinkedIn、Slack、Discord 等海外平台和部分即时通讯生效。因此面向国内社媒的分享样式，需要再接入对应平台的官方 SDK；OG 标签则把海外平台与通用抓取场景覆盖好，两者互补而非互替。
Twitter Card 类型怎么选？
- summary：小方图（约 1:1）+ 标题 + 描述，体积小、加载快，适合文章、文档、工具页等以文字为主的页面。
- summary_large_image：大横幅图（约 2:1）+ 标题 + 描述，视觉冲击强，适合首页、活动页、作品集等有高质量主视觉的页面。
- 配图建议 300×157 以上、小于 5MB 的 http(s) 直链；配图缺失或加载失败时，部分平台会退回 summary 样式或不显示配图。
- 本工具默认生成 summary_large_image，没有合适配图时可在左侧切换为 summary。
robots meta 什么时候用 noindex？
noindex 用于「不希望出现在搜索结果」的页面：后台登录页、站内搜索结果页、购物车与结算流程页、测试或临时页面、重复内容页等。 注意三点：noindex 只影响搜索引擎收录，不影响用户正常访问；不要同时用 robots.txt 屏蔽该页——爬虫抓不到页面就读不到 noindex 标签； 对已收录页面加 noindex 后，搜索引擎通常会在一段时间后将其移出索引，操作前请确认该页确实不需要搜索流量。
#常见问题 (FAQ)
生成的 Meta 标签应该放在网页什么位置？
复制生成结果，粘贴到页面源码 head 与 /head 之间，通常紧跟 charset 与 viewport 之后；使用 Nuxt、WordPress 等框架或建站系统时，写入对应页面的头部配置或 SEO 插件字段，效果相同。修改后可用搜索引擎站长平台的网址检查工具验证。
OG 标签对微信、微博分享生效吗？
作用有限。微信聊天内链接卡片多数场景由微信 JS-SDK 配置，微博主要读取自身接口数据，两者都不完整依赖 OG；OG 标签主要对 Telegram、Twitter/X、Facebook、Slack、Discord 等海外平台生效。国内社媒分享样式建议再接入对应平台官方 SDK，两者互补。
Twitter Card 类型怎么选？
summary 是小方图加标题描述，适合文章、文档等以文字为主的页面；summary_large_image 是大横幅图，视觉冲击强，适合有高质量主视觉的首页、活动页。配图建议 300×157 以上、小于 5MB 的 http(s) 直链，配图缺失时部分平台会退回小图样式。
什么时候该用 robots noindex？
不希望出现在搜索结果的页面：后台登录页、站内搜索结果页、购物车与结算页、测试或临时页、重复内容页。注意 noindex 不影响用户访问，也不要与 robots.txt 屏蔽同时使用——爬虫抓不到页面就读不到这个标签。
相关工具推荐
Spine动画编辑器
专业的Spine动画预览和编辑工具，支持多引擎导出
SQL查询优化器
分析SQL查询并提供优化建议
JVM启动参数配置
可视化配置Java虚拟机启动参数，支持内存、GC、性能等选项
代码片段转换
不同编程语言间代码片段转换（如Python↔JavaScript）
IP地址查询
查询IP地址的地理位置、运营商、ASN等信息，支持IPv4和IPv6
JSON转TypeScript接口
根据JSON数据自动生成TypeScript类型定义