Meta 标签生成器

如何使用Meta 标签生成器

关于Meta 标签生成器的常见问题

Meta 标签生成器会上传我的网站信息吗？

不会上传。Meta 标签生成器的表单填写、代码生成、写法体检与粘贴反解析全部在你的浏览器本地完成，你填的标题、描述与域名不会发送到服务器，刷新页面即清空，只有输出格式、缩进、精简开关这类展示偏好会记在本机。唯一会对外发请求的是分享卡片预览图，它默认不加载，必须你点一下才会向你填的图片地址请求一次。（站点自身仅有匿名访问量统计，与你填的内容无关。）

手机上能用 Meta 标签生成器吗？要装软件吗？

可以，也不用装任何 App 或插件。Meta 标签生成器是纯网页实现，手机、平板、电脑浏览器打开即用，五个分组是可折叠的手风琴，代码区可以横向滚动。图片宽高、max-snippet 这类数字输入框保留了草稿态，手机上逐字符重输不会被吃掉字符，填完直接点复制就能粘到你的编辑器里。

meta 标签怎么写才规范？最少写哪几个？

meta 标签怎么写有个最小集合：字符编码 charset、视口 viewport、标题 title、描述 description 四样，再加一条指向自己的 canonical 规范链接，基本就够搜索引擎正确理解一个页面了。要点是编码声明必须排在最前面（规范要求它落在文档前 1024 字节内，所以本工具固定把它放在第一行），描述要写成一句完整的人话而不是关键词堆砌。本工具一共内置 21 条写法体检规则，填完对着清单改即可。

viewport 标签怎么写？移动端不写会怎样

viewport 标签怎么写基本只有一种通用答案：width=device-width, initial-scale=1，本工具默认就输出这一行。不写会怎样？移动浏览器会按一个假想的宽屏视口渲染再整体缩小，页面看着就是字很小、要双指放大。要注意它管的是渲染视口，不负责让布局真的自适应，响应式还得靠 CSS；本工具也不生成 user-scalable=no 这类禁止缩放的写法，那会影响需要放大阅读的人。

title 和 description 写多长会被截断？

本站口径是标题 8~30 全角宽、描述 70~120 全角宽（半角字符算 0.5、汉字算 1），页面上的长度尺用的就是这把尺。要注意 title 多少字被截断其实没有定数：搜索引擎按像素宽度截断、随字体与设备变化，而且从不公布确切上限，所以这里给的是经验区间，工具只会提示「可能被截断」，不会承诺某个字数一定安全。description 写多长同理，写满区间也不保证全部展示。

meta description 怎么写才不被搜索引擎改写

meta description 怎么写，要点是写成一句完整的人话：把这个页面能解决的问题说清楚，别堆关键词，也别整站复用同一句。但要先有个心理准备，描述被改写是常态而不是你写错了——搜索引擎公开说过，当它认为页面正文里的某句更贴合这次查询时，就会改用那一句。所以这里能控制的只有长度与措辞，本工具只按本站宽度口径提示长度，不去替你预测会不会被改写。

og:image 尺寸多大合适？必须写绝对路径吗？

og:image 尺寸常见推荐是 1200 × 630（1.91 : 1），X 的大图卡片则接近 接近 2 : 1，具体见本页的尺寸对照表，数据复核于 2026-08-30。路径必须写成含协议与域名的绝对地址：抓取器不在你的页面上下文里跑，不会替你补域名，写成相对路径就是抓不到图。本工具会直接把这条判成必须改的错误。

Open Graph 和 Twitter 卡片标签都要写吗？

X 在缺 twitter:title、twitter:description、twitter:image 时会回退去读 og: 的同名字段，所以这三项通常不必重复写；真正必须单独写的是 twitter:card（决定小图还是大图卡片）和 twitter:site。本工具默认开着精简输出，会省掉与 og: 同值的那几行并在界面上明说省了几行；如果你的内部规范要求逐行显式声明，关掉精简即可全部写出来。

canonical 标签怎么写？和 noindex 冲突吗？

canonical 标签怎么写只有一条硬要求：写成含协议与域名的完整绝对地址，例如 https://example.com/about，参数页与分页尤其要写，指向你希望被收录的那一版。它和 noindex 同时出现时信号是矛盾的：一边说「别收录我」，一边说「我才是规范页」，抓取器怎么取舍并不确定。本工具会对这种组合给出警告，但两行照旧输出，不替你删。

meta keywords 还有用吗？现在要不要写？

meta keywords 还有用吗，实话是排名上基本没用：Google 早已公开声明不用它做排名，其他主流引擎的权重同样很低。本工具照旧支持输出，是因为不少 CMS 模板和企业内部规范仍然要求这一行；如果你没有这类约束，不写也完全没问题。填超过 10 个词时工具会给一条提示，避免把它当成关键词堆砌的地方。

Next.js metadata 生成的代码怎么用？

切到 Next.js 标签就能拿到 Next.js metadata 生成的片段，直接粘进 App Router 的 layout.tsx 或 page.tsx。它固定输出 metadata 与 viewport 两段导出——Next.js 14+ App Router 起，viewport 与 themeColor 已经从 metadata 里拆出来独立导出，继续写在 metadata 里会有构建告警。版本口径就是这一条，更早的版本请自行核对。

Nuxt useSeoMeta 的写法和 HTML 有什么不同？

Nuxt useSeoMeta 用的是驼峰键名：og:title 写成 ogTitle、twitter:card 写成 twitterCard，写成带冒号的原样键名不生效。另外 canonical 属于 link 而不是 meta，中文搜索引擎补充标签与站点验证码也不在 useSeoMeta 的字段表里，所以本工具会额外生成一段 useHead 放这些内容。适用版本是 Nuxt 3.x 的 useSeoMeta。

Meta 标签生成器能粘贴现有 head 反解析吗？

能。把现有页面的 head 源码（整页 HTML 也行，只会扫到 head 结束为止）粘进最下面的输入框，点解析并确认覆盖，表单就会被填回去继续改。解析是尽力而为的：标准写法、属性乱序、单双引号或无引号、大写标签、把 og 误写成 name= 都能认；模板变量、被 JS 动态注入的标签则原样保留或忽略。解析失败只给提示，不会清空你当前填的内容。

生成的标签为什么微信分享卡片不生效？

微信分享卡片不生效是最常被问的一条，原因是微信在未接入 JS-SDK 时的抓取规则并未公开，且随版本变化：它不完全遵循 Open Graph，很多场景下自己从页面里取标题与首图。本工具只如实输出标准的 og: 标签，不做微信专属预览，也不宣称能替你搞定微信里的卡片；要精确控制微信里的标题、描述与缩略图，需要在页面上接入微信 JS-SDK 自行配置。

robots 标签怎么写才不会误伤收录？

robots 标签怎么写取决于你想不想被收录：想被收录就保持默认的 index、follow，其实不写这一行效果也一样；不想被收录才写 noindex。常见的误伤有两种，一是把 noindex 留在了上线后的页面上，二是一边写 noindex 一边写 canonical 指向自己。本工具把 index、follow、noarchive、nosnippet 与 max-snippet 拆成了勾选项，改完立刻能在代码区看到最终那一行长什么样。

常用网页描述标签生成一览与建议长度

这件事在中文里有好几种叫法：Meta 标签生成器、SEO 标签生成器、OG 标签生成器、在线 meta 标签生成工具，说的都是同一件事——把网页 meta 标签的内容填成表单，再吐出一段可以直接粘进项目的 head 代码；Open Graph 与 Twitter 卡片生成也在同一个表单里完成，不用再找第二个工具。英文站点上的 meta tag generator、open graph generator、og tag generator、twitter card generator、seo meta tags generator 指的也是它。meta 标签有哪些、每一个又建议写多长，下表列的就是本工具会输出的基础标签与建议长度，数值全部取自本站数据表，页面不手写第二份。

长度单位是全角宽度：半角字符记 0.5、汉字与全角标点记 1，与本站「文案限字检测」用的是同一把尺。标题建议 8~30、描述建议 70~120，依据见本站 docs/03 §八（页面另加品牌后缀后 ≤32）。这只是经验区间，搜索引擎按像素截断且不公布上限。

举个可以自己复核的算例：本页 title 里写的这句「Meta 标签生成器 - 免费在线生成 SEO 与 OG 标签代码」，汉字与全角标点 16 个各记 1、合计 16，半角字母与空格 17 个各记 0.5、合计 8.5，两项相加是 24.5 全角宽。输入框下方那把长度尺用的就是这套算法，你把同一句粘进去会得到同一个数。

Open Graph 标签与 Twitter 卡片的继承回退链

三层回退链是 twitter:* → og:* → 基础标签。twitter:card 怎么写是这条链上唯一省不掉的一环——它决定卡片是小图还是大图，没有任何 og: 字段能替它兜底，缺了就退回一条纯文字链接。X 在缺 twitter: 字段时会回退读 og: 的同名字段，所以本工具默认把与 og: 同值的 twitter: 行整行省掉；但反过来，og: 并没有「自动去读 title 标签」的规范保证，各家抓取器行为不统一，所以 og:title、og:description、og:url 留空时本工具会把基础值真的写一行出来，不去赌抓取器的实现。

og:image 尺寸与卡片类型对照表

表里的数值来自各平台公开文档，平台会随版本调整，以官方文档为准。分享卡片预览用于示意比例与截断，不等于平台的实际渲染；本页的预览图默认不加载，点了才会向该图片地址发起一次请求。

og:image 不显示怎么排查：分享卡片没图的原因

og:image 不显示时按下表从上往下试，越靠前的越常见。要先说清楚一件事：只有第一条是本工具能在你的浏览器里判出来的，后面几条都发生在你的服务器与各平台的抓取侧，任何一个 meta 标签生成器都替你查不了，别指望生成器全绿就等于卡片一定有图。

中文搜索引擎补充标签：百度禁转码标签怎么写

百度禁转码标签指的就是上表前两行的 no-transform 与 no-siteapp：做过移动适配的页面通常都会写上，免得移动端被自动转码后样式与广告位被换掉。它们属于历史遗留写法，写了没坏处，但也别指望能提升排名。

写法体检覆盖的 21 条规则

把线上页面的 head 粘进来跑一遍，就相当于一次不出网的 meta 标签检测；但体检只覆盖上表这些写法问题，全部通过时页面显示的是「未发现常见问题」，而不是一句「符合 SEO 规范」的保证——写法正确与能不能被收录、排到第几，是两回事。

HTML head 标签生成之外：Next.js 与 Nuxt 的写法差异

同一份标签清单在三种框架里的形态并不一样，本工具的四个写法都是从同一份清单渲染的，不存在某个标签页少一行的情况，差别只在转义与键名：