SEO meta 标签生成器
按字段生成可直接粘贴的 HTML meta 标签：title、description、keywords、canonical，以及 Open Graph、Twitter Card 与 JSON-LD 三组可选标签，实时提示标题与描述是否超长。
按顺序填，缺哪项就不出哪条
标题和描述至少要填一项，全空会直接报错而不是给你一段空标签。
页面地址、分享图只有以 http:// 或 https:// 开头时才写进标签 —— 填了别的（比如缺协议头的 /post/1）宁可不出，也不出一个错的 canonical。
标题会自动拼站点名
站点名不为空时输出「标题 | 站点名」，分隔符固定成一个半角竖线加空格。
描述里的换行和连续空格会压成单个空格，因为 meta 的 content 属性里换行没有意义。
字数按字符算，不是按字节
统计用 Array.from 取长度，一个汉字算一个字符，一个 emoji 也算一个 —— 字符串的 length 会把 emoji 算成两个。
标题超过 60、描述超过 160 会在下方提示里点名。搜索引擎实际按像素宽度截断，这里是近似判断，不等于搜索结果的最终显示长度。
内容一律转义后再拼
引号、尖括号、& 都先过一遍 HTML 转义，粘进来带引号也不会撑破标签。
JSON-LD 里如果出现 </script> 会被改写成 <\/script>，避免提前闭合脚本标签 —— 这是 JSON 字符串里的合法写法，解析结果不变。
常见问题
keywords 还需要写吗？
多数搜索引擎已经不用它做排名依据，写不写都不影响抓取。需要就勾上填进去，不需要就别生成 —— 它只是历史遗留字段，本页不做任何「SEO 建议」判断。
Open Graph 和 Twitter Card 有区别吗？
两者字段几乎一样，前者给 Facebook、微信、微博等分享卡片用，后者给 X 用。都勾上会各生成一份，重复字段只是多几 KB，浏览器按 name 取第一个。
生成的内容能直接用吗？
是标准 HTML 标签，粘进 <head> 里即可。页面不联网、不请求任何接口，所有处理都在你的浏览器里完成。