html5 的 viewport meta 标签必须手动写且置于 head 内、不可重复、需查渲染后源码；seo 的 description 和 keywords 对排名几乎无影响，真正关键的是 title 和语义化标签。
HTML5 的 <meta name="viewport"> 必须手动写，浏览器不会自动补全；SEO 用的 <meta name="description"> 和 <meta name="keywords"> 对排名几乎没影响，别花时间堆砌关键词。
viewport 设置不生效？检查这三处硬性条件
常见错误是写了 <meta name="viewport"> 却依然缩放异常，往往不是语法错，而是被其他逻辑覆盖或加载时机不对：
- 必须放在
内、且在任何 CSS 或 JS 执行前 —— 放在里完全无效 - 不能有多个
<meta name="viewport">标签，后出现的会覆盖前面的（哪怕只是空格差异） - 某些 CMS 或前端框架（如 Next.js）会自动生成 viewport 标签，你手写的可能被静默忽略，得查渲染后的 HTML 源码确认最终输出
标准写法就这一行：<meta name="viewport" content="width=device-width, initial-scale=1.0">。加 maximum-scale=1.0 会禁用双指缩放，对可访问性不友好，除非明确要求。
content 属性值怎么选：device-width vs 具体像素
用 width=device-width 是响应式基础，它让页面宽度匹配设备物理视口宽度（经 CSS 像素换算后），而写死 width=375 这类数值会导致在非 375px 宽设备上强制缩放或横向滚动。
立即学习“前端免费学习笔记（深入）”；
-
device-width是动态值，适配所有屏幕，推荐作为默认 -
width=375仅适合调试时模拟 iPhone SE，上线必须删掉 -
initial-scale=1.0要和width=device-width配套使用，单独设 scale 不解决布局错乱
错误示例：<meta name="viewport" content="width=375, initial-scale=1"> —— 在 Pixel 7 上直接拉出横向滚动条。
SEO 相关 meta 标签哪些真有用？
Google 已明确表示 <meta name="keywords"> 完全不参与排序，<meta name="description"> 只影响搜索结果页的摘要展示（是否显示、显示哪段由算法决定），不提升排名。
- 真正影响 SEO 的是
<title></title>和正文语义化标签（<h1></h1>、<article></article>等） -
<meta name="description">建议控制在 155 字符内，含核心关键词，但要自然通顺，别堆砌 - 不要写
<meta name="robots" content="index,follow">—— 这是默认行为，显式声明纯属冗余
有效示例：<meta name="description" content="用 CSS Grid 实现响应式卡片布局，兼容 Safari 14.1+，附无障碍焦点管理方案。">
viewport 的核心是“让 CSS 像素和设备逻辑像素对齐”，不是“让页面看起来更小”；SEO meta 的关键不是塞词，而是让爬虫准确理解页面主题——这两点一旦理解偏差，后续所有优化都在原地打转。
