跳到主要内容

SEO 搜索引擎优化

面试速答（30 秒版 TL;DR）​

  • SEO（Search Engine Optimization，搜索引擎优化）不是“堆关键词”，而是让搜索引擎更容易抓到页面、读懂页面、判断页面价值，并让用户点进来后体验足够好。
  • 前端最直接能影响的部分主要有 5 类：可抓取性、可渲染性、语义化结构、链接与站点结构、页面体验。
  • 真正需要先回答的问题不是“要不要做 SEO”，而是：这个页面是否承接搜索流量。如果承接，就要优先保证核心内容首屏可见、URL 稳定、标题与语义清晰、状态码正确、内部链接可达。
  • 一句话总结：SEO 对前端来说，本质是让页面既适合机器理解，也适合人阅读。

一、先建立心智模型：搜索引擎在看什么​

从工程视角看，搜索引擎大致会经历这几个阶段：

  1. 发现页面
  2. 抓取页面
  3. 解析内容
  4. 理解主题和结构
  5. 结合体验与质量信号决定是否收录、如何排序

所以前端做 SEO，不是只改 meta 标签，而是要围绕下面 4 个问题做设计：

  • 能不能到达：页面有没有被链接起来，是否能被爬虫顺着链接发现。
  • 能不能拿到：服务端是否返回正确状态码，是否被 robots.txt、登录态、错误跳转挡住。
  • 能不能看懂：HTML 是否包含稳定可读的主体内容，结构是否清晰。
  • 值不值得排前：页面体验是否差，标题是否乱，是否有重复页或低质量页。

面试里可以直接用一句话概括：

SEO 不是一个点优化，而是一条“发现 -> 抓取 -> 理解 -> 排序”的链路优化。

二、前端最该负责的 5 个 SEO 抓手​

1. 可抓取性​

这是最底层的一层。页面如果根本抓不到，后面所有优化都没有意义。

前端常见关注点：

  • URL 可直接访问，不要只有前端内存态才能进页面
  • 重要页面能通过导航、列表、推荐位、面包屑等内部链接抵达
  • 服务端返回正确状态码
  • 不要把应该公开收录的页面放在登录后或脚本触发后才出现
  • 合理提供 robots.txt 与 sitemap.xml

最小示例：

User-agent: *
Allow: /
Disallow: /admin/

Sitemap: https://example.com/sitemap.xml

常见误区：

  • 只靠站内搜索入口暴露内容
  • 所有详情页都依赖 JS 点击后再拼 URL
  • 404 页面返回 200

2. 可渲染性​

搜索引擎不一定会像真实浏览器用户那样，完整、及时、稳定地执行你的前端脚本。所以对承接搜索流量的页面，原则是：

  • 关键主体内容尽量在 HTML 首次返回时就能看到
  • 不要让页面首屏只是一层空壳容器和一个 loading
  • 不要把正文、标题、面包屑、主图都延迟到客户端二次请求后再补

这也是为什么很多内容页、营销页、文档页会偏向：

  • SSG
  • SSR
  • 预渲染

而不是纯 CSR。

3. 语义化结构​

搜索引擎需要理解“这页到底在讲什么”，语义化 HTML 能显著降低理解成本。

重点包括：

  • 一个页面通常有且仅有一个主标题 h1
  • 正文层级按 h2、h3 递进，不要只为了样式乱用标题标签
  • 主内容用 main
  • 导航用 nav
  • 文章、列表、章节尽量用语义化标签表达
  • 图片提供有意义的 alt

示例：

<main>
  <article>
    <header>
      <h1>前端缓存策略详解</h1>
      <p>更新于 2026-03-23</p>
    </header>

    <section>
      <h2>强缓存与协商缓存的区别</h2>
      <p>...</p>
    </section>
  </article>
</main>

4. 链接与站点结构​

SEO 很看重页面之间的关系是否清晰。

前端层面常见抓手：

  • 分类页 -> 列表页 -> 详情页这条链路要完整
  • 面包屑帮助搜索引擎理解层级
  • 重要页面不要埋得太深
  • 重复内容要通过规范 URL 管理

规范 URL 示例：

<link rel="canonical" href="https://example.com/articles/http-cache" />

适用场景：

  • 同一内容能被多个筛选参数访问
  • 同时存在移动页、打印页、追踪参数页

5. 页面体验​

SEO 最终并不只看“爬虫能不能读懂”，还关心用户点进来之后的体验是否过关。

前端最常见的体验信号：

  • 首屏内容是否出现得足够快
  • 布局是否乱跳
  • 移动端是否可正常阅读和点击
  • 页面是否被弹窗、广告、遮罩过度打断

这里可以和性能优化串起来回答：

  • 优化 LCP：让主内容更快出现
  • 优化 CLS：避免页面乱跳
  • 减少无意义首屏 JS
  • 给图片和媒体元素预留尺寸

三、SEO 常见实现项，前端怎么落地​

1. 标题与描述​

标题和描述不是直接决定排名的唯一因素，但它们会影响搜索结果里的展示和点击预期。

最基本的要求：

  • 每页有独立的 title
  • 不要全站复用同一套模板标题
  • 标题先说页面主题，再附带站点名
  • description 真实概括内容，不要堆词

示例：

<title>HTTP 缓存机制详解：强缓存、协商缓存、常见面试题</title>
<meta
  name="description"
  content="从浏览器缓存流程、Cache-Control、ETag 到典型面试答法，系统梳理 HTTP 缓存机制。"
/>

2. 社交分享元数据​

这部分严格说不完全等于 SEO，但经常和搜索流量分发一起考虑。

<meta property="og:title" content="HTTP 缓存机制详解" />
<meta property="og:description" content="从强缓存到协商缓存的完整梳理。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/articles/http-cache" />

3. 结构化数据​

结构化数据的作用不是“强行加分”，而是用更标准的机器可读格式补充页面信息。

常见类型：

  • Article
  • BreadcrumbList
  • FAQPage
  • Product

示例：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTTP 缓存机制详解",
  "author": {
    "@type": "Person",
    "name": "Werry"
  },
  "datePublished": "2026-03-23"
}
</script>

4. 移动端适配​

移动体验本身就是页面体验的一部分。基础项包括：

  • 正确设置 viewport
  • 不要出现需要横向滚动的正文布局
  • 点击区域足够大
  • 字号、行高、间距可阅读
<meta name="viewport" content="width=device-width, initial-scale=1" />

5. 状态码与索引控制​

一些 SEO 问题其实根本不是前端渲染问题，而是 HTTP 行为错了。

比如：

  • 内容不存在时返回 404 或 410
  • 服务异常返回 5xx
  • 临时跳转用 302/307
  • 永久迁移用 301/308

不建议收录的页面再考虑：

  • noindex
  • nofollow
  • 规范链接
  • 登录拦截与权限控制

四、渲染方式和 SEO 的关系​

这部分是前端面试高频点。

方案搜索友好度工程特点典型场景
CSR通常最弱前端实现简单，但首屏主体内容可能不在 HTML 里后台系统、强交互页面
SSR通常较好每次请求都要做服务端渲染，运行时成本更高详情页、需要首屏动态数据的页面
SSG通常较好构建时产出 HTML，部署和缓存友好文档站、博客、营销页
预渲染中等到较好对少量关键路由做静态输出SEO 页面不多的站点

面试时别把这个问题说成：

  • CSR 一定不能做 SEO
  • SSR 一定比 SSG 更高级

更稳的说法是：

对 SEO 页面，核心不是框架名，而是首屏返回的 HTML 里有没有稳定主体内容，以及这个方案的工程成本是否可持续。

五、项目里怎么判断“哪些页面值得重点做 SEO”​

不是所有页面都应该按 SEO 最高规格建设。

一般优先级从高到低可以这么看：

  1. 承接自然搜索流量的内容页
  2. 品牌词、产品词对应的营销页
  3. 商品详情、解决方案页、文章详情页
  4. 分类页、专题页
  5. 管理后台、强登录态页面

如果一个页面：

  • 没有对外公开 URL
  • 强依赖登录
  • 主要靠站内操作而不是搜索进入

那它通常不是 SEO 优先页面。

六、典型题与标准答法​

Q1：SEO 是什么？前端为什么要关心？​

标准答法：

SEO 是让搜索引擎更容易发现、抓取、理解并排序页面。前端要关心 SEO，是因为页面的 HTML 结构、标题语义、链接可达性、渲染方式、状态码、性能和移动端体验，都会直接影响页面能不能被正确收录，以及用户点进来后的体验。

Q2：前端能做哪些 SEO 优化？​

标准答法：

我会按五层回答。第一是可抓取性，比如链接可达、站点地图、正确状态码；第二是可渲染性，核心内容尽量在首屏 HTML 中可见；第三是语义化结构，包括标题层级、语义标签、图片 alt；第四是站点结构，比如面包屑、canonical、内部链接；第五是页面体验，比如首屏速度、布局稳定性和移动端适配。

Q3：为什么纯 SPA 对 SEO 不友好？​

标准答法：

不是说 SPA 完全不能做 SEO，而是它更容易把主体内容推迟到客户端执行 JS 之后才出现。这样搜索引擎抓取和渲染的稳定性会更差，首屏也可能只有空壳 HTML。所以对承接搜索流量的核心页面，通常更倾向 SSR、SSG 或预渲染。

Q4：SEO 和性能优化是什么关系？​

标准答法：

两者有交集，但不完全相同。性能优化首先服务真实用户体验，而首屏内容出现速度、交互响应、布局稳定性这些体验信号，通常也会间接帮助 SEO。所以 SEO 不是只给爬虫看，还要保证用户进来不流失。

七、常见追问​

  • title 和 h1 是不是写一样就行？
    • 可以接近，但最好各自承担不同职责：title 偏搜索结果展示，h1 偏页面正文主标题。
  • display: none 的文本能不能拿来做 SEO？
    • 不建议。为了排名而隐藏大量关键词是高风险做法，也不利于真实用户体验。
  • 图片 SEO 怎么做？
    • 文件名、alt、上下文说明、图片尺寸与加载体验都重要，不只是压缩图片。
  • 分页、筛选页怎么处理？
    • 重点是控制规范 URL，避免大量低质量重复页被索引。

八、易错点 / 坑​

  • 把 SEO 理解成“加几个 meta 标签”。
  • 只优化首页，不优化真正承接流量的详情页和内容页。
  • 页面已经不存在，却还返回 200。
  • 纯客户端二次请求才拿正文，首屏 HTML 只有 loading。
  • 标题、描述、h1 全站模板化，页面之间区分度很低。
  • 把大量重复筛选参数页直接放开索引。
  • 认为只要上了 SSR，SEO 就会自动变好。

九、速记要点（可背诵）​

  • SEO 的链路是：发现、抓取、理解、排序。
  • 前端重点看：可抓取、可渲染、语义化、站点结构、页面体验。
  • 对 SEO 页面，关键主体内容尽量首屏 HTML 可见。
  • SSR / SSG 是手段，不是目的；目的是让搜索引擎和用户都更容易读懂页面。