meta name="keywords" 基本无效，主流搜索引擎已忽略，错误使用反致垃圾信号，仅极少数合规场景需填写3–5个精准词；charset和description必须配齐，前者防乱码，后者影响点击率；viewport和theme-color对移动端体验至关重要；canonical防重复内容，og标签保障社交分享效果。
meta name="keywords" 还有必要写吗
基本没用了。主流搜索引擎（Google、Bing、百度）早已不依赖 meta name="keywords" 做排名，甚至明确表示忽略它。写错还可能被当成垃圾信号——比如堆砌无关词、重复词、用逗号分隔但实际没空格等。
常见错误现象：Warning: keywords meta tag ignored（某些 SEO 工具或 Lighthouse 会提示）；页面被误判为 keyword stuffing。
使用场景仅剩极少数老旧内网系统、定制化 CMS 后台或合规性检查条目，不是功能需求，而是“填表需求”。
实操建议：
- 如果项目有强制审计要求，就写 3–5 个精准匹配页面主题的词，用英文逗号分隔，如：<meta name="keywords" content="html head, seo meta, viewport config">
- 其他情况直接删掉这行，省得后续维护时误改、误复制
description 和 charset 必须配齐
meta name="description" 虽不直接影响排名，但决定搜索结果页的摘要文案，影响点击率；meta charset 则是解析正确性的底线——缺了它，中文、emoji、特殊符号全乱码，连调试都困难。
立即学习“前端免费学习笔记（深入）”；
常见错误现象： 符号大量出现；搜索结果摘要显示乱码或截断成空格；Lighthouse 报 Document does not have a meta description 或 charset is not specified。
实操建议：
- meta charset 放 最开头，且只写一次：<meta charset="UTF-8">
- meta name="description" 控制在 155 字符内（含空格），避免被截断；不要堆关键词，用自然语句说明页面核心价值，例如：<meta name="description" content="手把手配置 HTML <head> 中的 viewport、canonical、og 标签，避开常见编码和 SEO 陷阱">
viewport 和 theme-color 在移动端不能漏
没有 meta name="viewport"，手机浏览器会按桌面宽度渲染（通常是 980px），导致文字小到看不清、按钮点不准；没设 theme-color，PWA 安装后顶部状态栏还是默认灰色，体验割裂。
使用场景：所有响应式页面、PWA、微信内嵌页（尤其 iOS 微信对 viewport 敏感）。
参数差异：
- viewport 推荐用：<meta name="viewport" content="width=device-width, initial-scale=1.0">；别加 user-scalable=no，它违反 WCAG 可访问性规范，iOS 16+ 也已限制该行为
- theme-color 建议用十六进制色值，与页面主色一致：<meta name="theme-color" content="#4285f4">；支持 media 查询做暗色适配，但兼容性有限（Chrome 73+），非必需
canonical 和 og 标签什么时候要加
link rel="canonical" 解决重复内容问题，比如带参数的 URL（/article?id=123）和干净路径（/article/123）指向同一内容；meta property="og:*" 是社交分享的基础，没它，微信、微博、Discord 发链接只显示标题和空白图。
性能影响极小，但漏写会导致：Google Search Console 提示“重复内容”警告；分享到微信时缩略图不加载、描述为空。
实操建议：
- canonical 必须指向当前页面的「首选 URL」，绝对路径优先：<link rel="canonical" href="https://example.com/page/">
- og 标签至少配齐三项：og:title、og:description、og:image；og:image 必须是 HTTPS 地址，尺寸建议 1200×630px，否则微信裁剪异常
- 静态站点可硬编码；动态页面（如 Next.js、Nuxt）务必在服务端或构建时注入，别靠 JS 拼接——爬虫不执行 JS
复杂点在于：多个标签之间存在隐式依赖，比如 og:image 加载失败时，有些平台会 fallback 到 twitter:image，但 Twitter 已停用卡片 API；更隐蔽的是，theme-color 在 Safari 上完全无效，只能靠 apple-mobile-web-app-status-bar-style 补位——这些细节不查文档根本想不到。
