真正要手写且必须写对的meta标签只有charset、viewport和description三个；charset须为head首个标签，viewport须紧随其后，description需每页独写、120–155字符、含主关键词、自然表述。
直接说结论：meta 标签里真正要手写、且必须写对的只有 <meta charset="UTF-8">、<meta name="viewport"> 和 <meta name="description"> 这三个；<meta name="keywords"> 可以删了，<meta name="robots"> 除非有明确需求否则别碰。
charset 和 viewport 必须放在 head 最前面
这两个标签不参与 SEO 排名，但一旦写错或位置不对，页面可能直接乱码或在手机上缩放失常——用户打不开，爬虫更不会理你。
-
<meta charset="UTF-8">必须是里的第一个标签，不能晚于任何<title></title>或<link>；它决定了浏览器怎么解码 HTML 文件，写成gbk或漏掉，中文就变 -
<meta name="viewport" content="width=device-width, initial-scale=1">要紧挨着charset放，不能用width=375这类固定值，否则 Pixel 7、iPhone 15 Pro Max 等设备会强制横向滚动 - 某些框架（如 Next.js）会自动生成
viewport，你手写的可能被静默覆盖——得查渲染后的 HTML 源码确认最终有没有、有几个
description 写不好，等于没写
Google 明确说它不参与排名，但它出现在搜索结果里，是用户决定点不点你的唯一文案。写得像机器生成、超长、堆关键词，点击率直接掉一半。
- 长度控制在
120–155字符（含空格），Chrome 搜索结果最多显示约155个字符，超出部分被截断为 “…” - 开头嵌入主关键词，用自然句式，比如：
<meta name="description" content="详解 HTML <link rel=" canonical> 标签的作用、设置方法及常见误用场景，附 Nginx 和 Next.js 配置示例。"> - 别复制正文第一段，别写“欢迎访问”“专业提供”，也别用 » • 等符号——部分爬虫解析异常
- 动态页面（如博客列表页、商品详情页）必须每页单独生成，CMS 模板里硬编码同一段 description 是常见坑
keywords 和 robots 大多数时候是冗余操作
<meta name="keywords"> 自 2009 年起 Google 宣布完全不使用；<meta name="robots" content="index,follow"> 是默认行为，显式声明纯属多此一举。
- 写
<meta name="keywords" content="SEO,HTML,meta">不仅无效，还可能让旧版工具误判页面质量 - 只在特殊场景才需要
robots：测试环境加noindex,nofollow；分页页码（如/blog?page=2）加noindex,follow；规范页（canonical 目标页）不需要加 - 加了
noindex却忘了定期清理，上线后整站消失，这种事故在 staging 环境迁移时高频发生
真正容易被忽略的点是：服务端渲染（SSR）或静态生成（SSG）时，title 和 description 往往被当作“JS 渲染后才更新”的内容，导致返回的 HTML 初始源码里仍是占位值——而 Googlebot 抓取的是初始 HTML，不是等 JS 执行完再截图。Next.js 用户务必用 generateMetadata API，Vue 用户用 useSeoMeta，而不是在 mounted 里改 document.title。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
