meta name="keywords"对主流搜索引擎已无作用，google、bing及百度均不再采用；真正关键的是meta charset、description和viewport三项。
为什么加了 meta name="keywords" 也没用
Google、Bing 等主流搜索引擎早已完全忽略 meta name="keywords"，它对排名零影响，还可能被爬虫当作垃圾信号。国内百度在 2019 年后也明确表示不使用该字段。硬塞一堆关键词不仅浪费 HTML 空间，还可能干扰页面语义解析。
真正起作用的是以下三项：
-
meta charset="utf-8"—— 必须放在最前，否则中文乱码或解析中断，影响内容提取 -
meta name="description"—— 搜索结果中显示的摘要，虽不直接影响排名，但显著影响点击率（CTR），间接影响排序权重 -
meta name="viewport"—— 移动端适配基础，不设会导致 Google 判定为“非移动友好”，直接降权
meta name="description" 怎么写才不算白写
它不是 SEO 魔法咒语，而是给用户看的“广告文案”。搜索引擎会按需截断（通常 155–160 字符），且只在匹配用户搜索意图时展示。常见错误是堆砌关键词、写成口号式宣传语，或留空/复制首页描述。
实操建议：
- 每页唯一：
index.html的 description 要精准概括首页核心价值，比如“提供 React 18 + Vite 项目脚手架模板，含 ESLint、Prettier 和 CI 配置示例” - 控制长度：用
description.substring(0, 155)或在线工具校验字符数，避免被截断成无意义片段 - 避开营销话术：“行业领先”“一站式解决方案”等词几乎从不出现在 SERP 摘要中，反而降低可信度
- 不强制包含关键词：如果用户搜“vite react template”，而你的 description 自然出现
vite和react，就已足够；生硬插入“vite react template github download free”会被识别为 spam
哪些 meta 标签容易引发渲染阻塞或解析异常
部分 meta 写法会让浏览器提前加载资源、触发重排，或让爬虫误解页面结构。尤其注意以下三类：
-
meta http-equiv="refresh"—— 已被主流 SEO 指南列为反模式，301 重定向更安全，且不会触发客户端跳转延迟 -
meta name="robots" content="noindex, nofollow"放在index.html里等于主动拒绝被收录，检查是否误加 - 多个
meta charset或位置靠后：必须唯一且位于最顶部（早于任何 CSS/JS/link），否则浏览器可能先按默认编码解析，再重载，造成 FOUC 或内容丢失
另外，meta property="og:title" 等 Open Graph 标签不影响搜索排名，但影响微信、微博等平台分享效果，属于传播层优化，和 SEO 分属不同链路。
移动端和结构化数据要不要加 meta
纯 meta 标签无法替代结构化数据。Google 不读 meta name="author" 或自定义 meta name="category" 来理解内容主题。想提升富媒体结果（如面包屑、评分、文章发布时间），必须用 script type="application/ld+json" 嵌入 Schema.org 数据。
移动端相关的关键 meta 只有三个：
-
meta name="viewport" content="width=device-width, initial-scale=1"—— 缺失即判定为非响应式 -
meta name="format-detection" content="telephone=no"—— 防 iOS 自动识别数字为电话，避免误触弹窗（仅限含手机号的页面） -
meta name="theme-color"—— 影响 PWA 添加到桌面后的标题栏颜色，与排名无关，但影响留存
别在 index.html 头部塞一堆“SEO 插件生成”的冗余 meta，Google 抓取预算有限，解析时间多花 20ms，就少扫一个子页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
