网页Meta标签生成器

在线生成与解析网页 Meta 标签:分核心、技术、社交三档输出规范代码,体检标题与描述长度,预览搜索结果与社交卡片,粘贴线上 head 可识别标签并查缺失,全程本地完成。
标签配置等待填写
使用方式
输出范围
核心信息
字符编码
Robots 指令
输出格式
标签与属性名大小写
是否附带注释行
快速示例
标签与预览

填写左侧任意字段,标签代码、搜索预览与字段体检结果会实时出现在这里。

所有解析与生成都在浏览器本地完成,填写内容不会上传。

工具说明

这是一个完全在浏览器本地运行的网页 Meta 标签工具,有两种用法:生成——按字段填写,实时产出规范、有序、可直接粘贴进 <head> 的标签代码;解析——把线上页面的 head 片段粘进来,逐条识别标签、检查关键项缺失,并可一键回填到表单改写后重新输出。全程不发送任何请求,填写内容也不会上传。

输出范围分三档。「核心 SEO」只输出 charset、title、description、keywords、author 与 robots;「核心 + 技术版权」追加 canonical、expires、revisit-after、rating、viewport、双核内核、X-UA-Compatible、referrer、format-detection、theme-color、全屏 WebApp 以及 generator、publisher、designer、copyright;「全部(含社交卡片)」再追加 Open Graph、Twitter 卡片与 JSON-LD 结构化数据。切换范围时未启用的字段会被隐藏且不会输出,避免生成一堆无效标签。

回填规则。og:title 留空时沿用页面标题,og:description 留空时沿用页面描述,twitter:title / twitter:description / twitter:image / twitter:url 直接沿用 Open Graph 取值,因此通常只需填一遍内容。JSON-LD 的名称取站点名称、url 取页面网址、image 取分享图片(Organization 与 LocalBusiness 类型写作 logo),未填「页面网址」时会给出明确的修正提示。twitter:site、twitter:creator 缺少 @ 前缀会自动补全并在提示中标注;keywords 中的中文逗号、顿号、分号会统一换成英文逗号。

字段体检与两种预览。体检表按「字符数 / 半角宽度 / 建议区间」评估标题、描述与关键词,中文按每字 2 半角宽度计算,标题建议 6–30 个汉字(约 60 半角),描述建议 80 个汉字以内(约 160 半角)。搜索结果预览会模拟桌面端截断效果,被截掉的末尾以省略号标出;社交卡片预览按常见平台布局展示 og:image、og:site_name、og:title、og:description,未设置的项会直接说明后果。

注意事项。expires 必须写成 GMT 时间(如 Wed, 20 May 2027 10:30:05 GMT),revisit-after 属于早期协议,Google 已明确忽略,百度等引擎也仅参考,真正控制收录请用 robots 指令与 robots.txt;content 取值里的 &、<、>、" 会自动转义,无需手工处理;charset 声明建议放在 head 最前面;输出注释与分组说明便于交付时定位,交付前删掉注释行即可。

示例一:博客首页

只勾选核心范围,生成 6 条标签:charset、title、description、keywords、author 与 robots。体检表会同时给出描述宽度是否落在 40–160 半角之间,适合快速检查一篇新文章的头部。

示例二:企业官网

开启技术兼容与版权字段,一次生成 20 条左右标签:canonical、expires、revisit-after、rating、viewport、renderer、X-UA-Compatible、referrer、format-detection、language 与 generator、publisher、copyright 等。国内双核浏览器与老 IE 的兼容写法都在这一档里。

示例三:移动端活动页

viewport-fit=cover 适配刘海屏,theme-color 改浏览器工具栏颜色,全屏 WebApp 一项会连带生成 mobile-web-app-capable、apple-mobile-web-app-capable 与 black-translucent 状态栏样式三条标签;robots 用 noindex, follow,不收录但继续传递链接权重。

示例四:商品页全站标签

切到「全部」范围,除核心与技术字段外还会生成 7 条 Open Graph、7 条 Twitter 卡片(title、description、image、url 均由上方取值自动沿用)以及一段 Product 类型的 JSON-LD。twitter:site 填写时省略的 @ 会自动补全,右侧卡片预览同时展示分享图与摘要的截断效果。

示例五:解析线上页面 head

点「填入示例源码」会自动切到解析方式,逐条列出识别到的标题、Meta、Open Graph、Twitter、canonical 与 JSON-LD,并把缺失的 og:url 等关键项单独列出来。「填入表单」可以把解析结果带回生成器,改写字段后重新输出规范代码。

提示:说明里的示例都是可直接使用的真实结构,改站点头部时先套一个最接近的示例,再按体检表与两种预览逐项调整,比从零填写更快。生成的代码建议本地打开页面用开发者工具复核一次。