前端 SEO 有哪些具体手段？

简答

一个商品详情页想被搜索到，要过三关：搜索引擎能发现这个网址，能读懂页面内容，并且愿意在结果里展示它。前端 SEO 的手段基本都对应这三关，可以按清单逐项检查。

发现阶段，页面之间用带 href 的 <a> 标签链接，单页应用用 History API 路由，不用 #/ 这类片段地址；再提供 sitemap，并在 robots.txt 里声明它的位置。理解阶段，每页有唯一的 <title>、meta description 和 canonical，正文要出现在初始 HTML 或渲染后的 DOM 里，不存在的页面返回 404，必要时加 JSON-LD 结构化数据。

展示阶段，图片用 <img> 加描述性的 alt，不要用 CSS 背景图承载内容图；页面体验上，Google 建议 LCP 在 2.5 秒内、INP 在 200 毫秒内、CLS 低于 0.1。

要注意，robots.txt 是管抓取流量的，不是藏页面的。被它屏蔽的网址仍可能出现在搜索结果里，想不被索引要用 noindex 或密码保护。

先分清这道题和渲染方式的关系

CSR、SSR、SSG 各自对 SEO 有什么影响，SPA 刷新为什么 404，见《前端渲染方式怎样影响 SEO 和部署？》。这道题不再重复原理，而是按 Google 搜索中心的文档，列出前端能做的具体检查项。

Google 处理 JavaScript 页面分三个阶段：抓取、渲染、编入索引。下面的清单也按“找得到、看得懂、展示得好”来排。

让搜索引擎找得到

链接要用 <a href>。 Google 文档写明，一般来说只有链接是带 href 属性的 <a> 元素时，Google 才能抓取它；没有 href 的 <a>，或者靠脚本事件充当链接的其他标签，Google 无法可靠地提取网址。所以 <span onClick={() => navigate('/item/1')}> 这种写法要改成路由库提供的 <Link>，它最终会渲染成 <a href>。

单页应用用 History API。 JavaScript SEO 基础文档建议，客户端路由要用 History API 切换网址，不要用片段（#）。因为 # 后面的部分不会发送给服务器，也不被当作独立页面。

提供 sitemap。 sitemap 列出希望被收录的网址。Google 文档规定，单个 sitemap 未压缩不能超过 50MB，网址不能超过 50,000 个，超过就要拆成多个。sitemap 的位置可以在 robots.txt 里用 Sitemap: 声明，也可以在 Search Console 提交。

robots.txt 只管抓取。 文档说它主要用来管理爬虫流量，不是阻止网页出现在 Google 中的机制；被屏蔽的网页仍可能被编入索引，只是结果里不会有描述。想不被索引，要用 noindex 或密码保护。还有一点容易冲突：阻止索引的文档特别提示，noindex 要生效，页面就不能被 robots.txt 屏蔽，否则爬虫永远看不到这条规则。

让搜索引擎看得懂

每页唯一的 <title>。 标题链接文档要求每个页面在 <title> 里写唯一、描述性、简洁的标题，避免堆砌关键词和模板化文字。Google 发现标题过时、不准确时，可能自己改写结果里显示的标题。

写 meta description。 摘要文档说，Google 会根据正文和 meta description 生成搜索结果中的摘要。描述要针对每页单独写，包含作者、价格这类有用信息，不要写成关键词列表；页面很多时可以按模板用程序生成。

设置 canonical。 同一个商品可能有 ?from=ad、?sort=price 等多个网址。用 <link rel="canonical" href="..."> 告诉 Google 哪个是规范网址。规范化文档列出的方法还有 HTTP 头里的 rel="canonical"、sitemap 和重定向，并建议优先选择 HTTPS 网址。单页应用里 canonical 要随路由切换正确更新。

状态码要真实。 JavaScript SEO 文档要求使用有意义的 HTTP 状态码。单页应用找不到数据时，如果仍然返回 200 加一个“未找到”的页面，就成了 soft 404。文档给的办法是重定向到服务器真正返回 404 的网址，或者在页面上加 <meta name="robots" content="noindex">。

正文要能被看到。 Google 能渲染 JavaScript，但文档也指出服务端渲染或预渲染能让用户和爬虫都更快拿到内容。用 Web Components 时，要确保内容出现在渲染后的 HTML 里。动态渲染（只给爬虫返回服务端渲染版本）被 Google 标为临时解决方法，并说明有比它更好的方案。

加结构化数据。 结构化数据用 JSON-LD、Microdata 或 RDFa 描述页面是什么，比如商品的名称、价格和评分，有机会获得富媒体搜索结果。Google 文档在大多数情况下推荐 JSON-LD，可以用 Rich Results Test 验证。

HTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "无线降噪耳机",
  "offers": { "@type": "Offer", "price": "899.00", "priceCurrency": "CNY" }
}
</script>

结构化数据描述的内容必须和页面上用户看到的一致，不能写页面上没有的价格或评分。

让结果展示得好

图片用 <img> 和 alt。 图片 SEO 文档要求用 HTML 图片元素，写 src 和描述性的 alt，不要用 CSS 背景图承载内容图片；还建议用描述性的文件名、响应式图片（<picture> 或 srcset），以及图片 sitemap。图片懒加载时，要确保图片进入视口后会出现在 DOM 里。

页面体验达标。 Core Web Vitals 文档建议 LCP 在页面开始加载后 2.5 秒内完成，INP 控制在 200 毫秒以内，CLS 低于 0.1。三个指标怎样测量和优化，见《LCP、INP、CLS 分别衡量什么？》。

一张上线前的检查表

页面之间的跳转都是 <a href>，路由不带 #。
sitemap.xml 可访问，robots.txt 里声明了它，且没有误屏蔽重要页面。
每页 <title>、meta description、canonical 唯一且随路由更新。
不存在的页面返回 404，或者带 noindex。
用 Rich Results Test 或 Search Console 的网址检查工具看渲染后的 HTML，正文确实在里面。
结构化数据通过 Rich Results Test，内容和页面一致。
内容图都是 <img> 且有 alt。
真实用户的 Core Web Vitals 达标。

常见追问

meta keywords 还有用吗？

对 Google 没用。Google 的“特殊标记”文档把 <meta name="keywords"> 列在不受支持的标记里，说明它不会用于 Google 搜索，对索引和排名完全没有影响。把精力放在 title、description 和正文质量上更有效。

链接要加 nofollow 吗？

Google 的链接文档要求，付费链接用 rel="sponsored" 或 nofollow；用户生成内容里的链接也可以标注，比如 ugc 或 nofollow。站内正常页面之间的链接不用加，否则不利于爬虫发现。

SEO 优化做了多久能见效？

没有固定时间。Google 要重新抓取、渲染和编入索引，大站和小站的频率不同。可以在 Search Console 里请求编入索引，并观察覆盖率报告，但不能保证收录或排名。