K Kiara's Tech Planet Tech Planet
Frontend / Engineering

SEO 从 0 开始：搜索引擎如何理解一个网页

SSR SSG 前端工程化 SEO 搜索引擎 爬虫

前言

SEO 是 Search Engine Optimization 的缩写，中文通常叫“搜索引擎优化”。

很多人一听 SEO，会以为它是“堆关键词”“骗搜索引擎”“想办法排第一”。这其实是很旧、也很危险的理解。

更准确地说，SEO 解决的是：

让搜索引擎更容易发现、理解、收录和展示你的内容，同时让真正的用户更愿意点击和阅读。

如果一篇文章写得很好，但搜索引擎找不到它、看不懂它、或者不知道它和哪个主题相关，那么这篇文章就很难从搜索流量里获得读者。

所以从前端角度看，SEO 不是玄学，它主要关心这些问题：

  • 搜索引擎能不能访问这个页面
  • 首屏 HTML 里有没有真实内容
  • 页面标题、描述、链接结构是否清楚
  • 内容层级和语义结构是否合理
  • 页面加载速度和移动端体验是否足够好
  • 有没有重复页面、错误状态码、错误跳转
  • 有没有 sitemap、robots.txt、canonical 等基础配置

一、搜索引擎是怎么工作的

要理解 SEO，先要知道搜索引擎大概怎么工作。

可以把它分成三个阶段：

1
2
3
发现 Crawling
  -> 理解和收录 Indexing
  -> 排序和展示 Ranking / Serving

1. Crawling：发现页面

搜索引擎会使用爬虫程序不断访问互联网上的页面。

它通常通过这些方式发现 URL：

  • 已经收录页面里的链接
  • 其他网站指向你的外链
  • sitemap.xml
  • Search Console 等站长工具提交
  • 历史访问记录

如果一个页面没有任何入口链接，也不在 sitemap 里，搜索引擎就很难发现它。

所以 SEO 的第一步不是“优化排名”，而是：

先让页面能被发现。

2. Indexing：理解和收录页面

爬虫访问页面后，搜索引擎会尝试理解页面内容，包括：

  • 这个页面的主题是什么
  • 标题是什么
  • 正文是什么
  • 页面里有哪些链接
  • 图片、视频、结构化数据是什么
  • 这个页面和站内其他页面是什么关系
  • 这个页面是不是重复内容

如果页面质量太低、内容重复、被 noindex 禁止、服务器返回错误状态码，或者主要内容依赖很复杂的客户端 JavaScript，搜索引擎可能不会很好地收录它。

3. Ranking / Serving：排序和展示

当用户搜索一个关键词时，搜索引擎会从索引里找出相关页面，再综合很多信号排序。

常见影响因素包括：

  • 内容是否匹配用户意图
  • 内容质量和可信度
  • 页面标题和摘要是否清楚
  • 页面加载体验
  • 移动端体验
  • 站点结构和内部链接
  • 外部链接和品牌信号
  • 地区、语言、时效性等上下文

SEO 不是改一个标签就立刻排名第一，而是让页面在“可发现、可理解、可信、好用”这些维度上整体变好。

二、前端为什么会影响 SEO

传统 HTML 页面天然比较容易被搜索引擎理解：

1
2
3
4
<article>
  <h1>什么是 SSR</h1>
  <p>SSR 是 Server-Side Rendering...</p>
</article>

爬虫拿到 HTML 后，能直接看到标题和正文。

但现代前端应用经常是这样：

1
2
<div id="root"></div>
<script src="/assets/app.js"></script>

页面主要内容要等 JavaScript 下载、执行、请求接口之后才出现。对于用户来说，这可能只是慢一点；对搜索引擎来说，这会增加理解成本和不确定性。

所以前端会从这些方面影响 SEO：

  • 渲染模式：CSR、SSR、SSG 会影响首屏 HTML 里有没有真实内容
  • 路由设计：前端路由是否有独立 URL
  • 元信息：每个页面是否有独立的 title、description、canonical
  • 语义 HTML：是否正确使用 h1、h2、article、nav、main
  • 链接结构：是否用真实 <a href=""> 连接页面
  • 性能：页面是否加载太慢
  • 图片：是否有 alt，是否阻塞加载
  • 状态码：404、301、302、500 是否正确

SEO 不是只有运营和内容团队要关心，前端也会直接决定搜索引擎能不能顺利读取页面。

三、CSR、SSR、SSG 对 SEO 的影响

CSR：客户端渲染

CSR 页面通常先返回一个空壳 HTML：

1
<div id="root"></div>

正文内容需要等客户端 JavaScript 执行后才出现。

现代搜索引擎可以处理一部分 JavaScript，但这并不代表纯 CSR 对 SEO 没有成本。因为搜索引擎需要：

  1. 先抓取 HTML
  2. 再加载 JavaScript
  3. 执行 JavaScript
  4. 等页面渲染完成
  5. 再理解最终内容

这个过程更复杂，也更容易因为接口失败、资源阻塞、执行超时、内容延迟加载而出问题。

所以纯 CSR 更适合：

  • 后台管理系统
  • 用户中心
  • 登录后页面
  • SEO 不重要的复杂应用

不太适合：

  • 博客文章
  • 新闻内容
  • 商品详情页
  • 官网首页
  • 营销落地页

SSR：服务端渲染

SSR 会在用户请求页面时，由服务器生成完整 HTML：

1
2
3
4
<article>
  <h1>什么是 SEO</h1>
  <p>SEO 是搜索引擎优化...</p>
</article>

搜索引擎爬虫第一次访问时，就能直接看到主要内容。

SSR 适合：

  • 需要 SEO 的动态页面
  • 内容需要按请求实时变化的页面
  • 新闻、商品、活动等内容页

但 SSR 会增加服务端渲染成本，也要处理缓存、数据请求、错误状态码和水合问题。

SSG：静态站点生成

SSG 在构建阶段提前生成 HTML，用户访问时直接返回静态文件。

这对 SEO 很友好，因为：

  • HTML 里已经有完整内容
  • 页面可以通过 CDN 快速返回
  • 稳定性高
  • 成本低

SSG 适合：

  • 博客
  • 文档站
  • 官网
  • 更新频率不高的内容页

如果内容既要 SEO，又不需要每秒实时更新，SSG 往往是很舒服的方案。

四、一个页面最基础的 SEO 信息

一个页面至少应该有这些基础信息：

1
2
3
4
5
6
7
8
<head>
  <title>SEO 从 0 开始：搜索引擎如何理解一个网页</title>
  <meta
    name="description"
    content="从爬取、收录、排名、渲染模式、元信息、链接结构和前端工程角度理解 SEO。"
  />
  <link rel="canonical" href="https://example.com/frontend/seo-from-zero/" />
</head>

title

title 是页面标题，通常会影响搜索结果里的标题展示。

好的 title 应该：

  • 准确描述页面主题
  • 每个页面唯一
  • 不要堆关键词
  • 不要太长
  • 把最重要的信息放前面

不好的例子：

1
<title>首页</title>

更好的例子：

1
<title>React SSR 水合详解：从能看到能交互</title>

description

description 是页面摘要，搜索引擎不一定每次都直接使用它，但它能帮助搜索引擎和用户理解页面。

好的 description 应该：

  • 概括页面内容
  • 和页面正文一致
  • 对用户有点击价值
  • 每个页面尽量不同

canonical

canonical 用来告诉搜索引擎：

如果多个 URL 内容相同或高度相似，哪个 URL 才是首选版本。

比如这些 URL 可能指向同一篇文章：

1
2
3
https://example.com/post/seo
https://example.com/post/seo?from=twitter
https://www.example.com/post/seo

为了避免搜索引擎把它们当成重复页面，可以在页面里声明：

1
<link rel="canonical" href="https://example.com/post/seo" />

五、页面结构：让搜索引擎看懂内容层级

搜索引擎不只看文字，也会看页面结构。

为什么结构这么重要：爬虫看不见“好看”，只读“语义”

要理解这一节，先记住一个前提：

爬虫不是人，它看不懂“视觉上的好看”，它只能读 HTML 标签的语义。

人眼看到一段加粗的大字，就知道“这是标题”。但爬虫看到的不是样式，是标签。下面两段在页面上可能长得一模一样，在爬虫眼里却天差地别：

1
2
3
4
5
<!-- ❌ 爬虫眼里：这就是一坨普通文字 -->
<div class="title-style">什么是 SSR</div>

<!-- ✅ 爬虫眼里：这是整个页面的主标题，权重最高 -->
<h1>什么是 SSR</h1>

视觉相同，机器理解的含义完全不同。所谓“好的页面结构”，本质就是：

用正确的标签，把“内容的含义和层级”明确地告诉机器。

它体现在两件事上：

  1. 用标题层级表达“主次关系”。爬虫靠 h1 → h2 → h3 这棵树判断哪些是主题、哪些是细节、谁从属于谁。如果全用 <div>，这棵树就塌成一堆平铺的文字，机器无法判断主次。
  2. 用语义标签表达“区域职责”。<main> 是正文、<nav> 是导航、<aside> 是次要内容。有了它们，爬虫能一眼分清“哪块是真正的正文，哪块是导航/广告”，从而把权重集中到该集中的地方。

一个内容页的理想结构

一个内容页最好有清晰的语义结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<main>
  <article>
    <h1>SEO 从 0 开始</h1>

    <section>
      <h2>搜索引擎如何工作</h2>
      <p>搜索引擎会经历爬取、收录和排序...</p>
    </section>

    <section>
      <h2>前端为什么会影响 SEO</h2>
      <p>现代前端应用经常依赖 JavaScript...</p>
    </section>
  </article>
</main>

几个基本原则：

  • 一个页面最好有一个明确的 h1
  • 小标题按层级使用 h2、h3
  • 正文内容不要全塞进无语义的 div
  • 导航用 nav
  • 主体用 main
  • 独立文章用 article
  • 图片用有意义的 alt

结构是怎么一步步影响到排名的

把上面连起来，就是一条完整的因果链：

1
2
3
4
好的结构
  -> 爬虫能高效、准确地理解页面内容和主题
  -> 搜索引擎能把页面正确匹配给“对的搜索词”
  -> 相关性判断更准 -> 更可能被展现、排名更靠前

落到具体的结构要素上：

结构要素 对搜索引擎的影响
唯一且准确的 h1 判断“页面主题是什么”的最强信号之一
清晰的 h2/h3 层级 帮助理解内容结构，还可能被抓成“段落直达”结果
语义标签 main/article 让爬虫聚焦正文，不被导航、广告干扰
合理的嵌套（不滥用 div） 解析成本低、不易出错，抓取预算用得更值
结构化数据（见第十节） 直接告知内容类型，可触发富媒体摘要

这里还有一个常被忽略的概念——抓取预算（Crawl Budget）：搜索引擎分配给每个站点的抓取资源是有限的。结构混乱、嵌套过深的页面，爬虫解析更费劲、甚至可能半途放弃；结构干净的页面则能被更完整、更频繁地抓取。

最后要强调：这不只是为了 SEO。屏幕阅读器等无障碍工具，同样依赖这些语义标签来导航——无障碍（a11y）和 SEO 本质是同一套逻辑：都是让“非视觉的机器”读懂页面。所以好结构是一举多得：对搜索引擎友好，对无障碍友好，也对自己的可维护性友好。

六、链接：搜索引擎靠链接发现页面

搜索引擎发现页面，很大程度依赖链接。

前端开发里要注意：

1
<a href="/posts/seo-from-zero/">SEO 从 0 开始</a>

这类真实链接对爬虫友好。

不推荐只有点击事件，没有真实链接：

1
<button onclick="goToPost()">SEO 从 0 开始</button>

或者：

1
2
3
<div onClick={() => router.push('/posts/seo-from-zero')}>
  SEO 从 0 开始
</div>

用户可以点，但搜索引擎不一定会把它当成清晰的页面链接。

如果一个页面希望被搜索引擎发现，最好保证它能通过普通 <a href=""> 从站内其他页面访问到。

七、robots.txt：控制爬虫访问什么

robots.txt 是放在站点根目录的文本文件：

1
https://example.com/robots.txt

它用来告诉爬虫哪些路径可以抓，哪些路径不建议抓。

例如：

1
2
3
4
5
User-agent: *
Disallow: /admin/
Disallow: /api/

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

这表示：

  • 所有爬虫都不应该抓 /admin/
  • 所有爬虫都不应该抓 /api/
  • sitemap 地址是 /sitemap.xml

要注意：

robots.txt 主要控制“能不能爬”，不等于“能不能被索引”。

如果你想明确禁止某个页面出现在搜索结果里，通常应该使用 noindex。

八、noindex：禁止页面被收录

如果某个页面不希望出现在搜索结果里，可以加：

1
<meta name="robots" content="noindex" />

适合 noindex 的页面：

  • 登录页
  • 用户中心
  • 后台页面
  • 搜索结果页
  • 临时活动预览页
  • 重复或低价值页面

注意不要误把重要页面加上 noindex，否则搜索引擎会把它从索引里移除。

九、sitemap.xml：告诉搜索引擎你有哪些页面

sitemap.xml 是一个页面清单，告诉搜索引擎站点里有哪些重要 URL。

简单示例：

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/posts/seo-from-zero/</loc>
    <lastmod>2026-06-10</lastmod>
  </url>
  <url>
    <loc>https://example.com/posts/ssr-hydration/</loc>
    <lastmod>2026-06-10</lastmod>
  </url>
</urlset>

sitemap 不能保证页面一定被收录，但它能帮助搜索引擎更完整地发现站点页面，尤其适合：

  • 页面很多的网站
  • 新站
  • 内部链接不够充分的网站
  • 文章、商品、文档数量很多的网站

十、如何让页面被发现

前面反复提到“先让页面能被发现”，这里集中讲清楚：搜索引擎发现一个 URL，本质只有两条路——要么顺着链接爬过来，要么你主动把 URL 递给它。其余所有方法都是这两类的展开。

1. 被动发现：让爬虫顺着链接爬进来

爬虫的工作方式就是不断顺着链接跳转，所以核心是“让页面有路可达”。

  • 站内链接：一个页面如果没有任何其他页面链向它，就是一座“孤岛”，爬虫和用户都进不去。要保证重要页面能从首页、分类页、相关文章一路点进去（这也是博客需要分类页、归档页、相关推荐的原因——本质是给爬虫铺路）。
  • 外链：别的网站链向你，是最强的发现信号之一，还顺带传递信任度。新站常见的“渲染没问题却迟迟不被收录”，真凶往往就是没有任何外链、没人知道你的存在。

⚠️ 再次强调第六节的结论：<div onClick={...}> 这类假链接爬虫不认，必须是真实的 <a href="">。

2. 主动提交：直接把 URL 递给搜索引擎

不等爬虫慢慢爬，主动告诉它“我有这些页面”。

  • sitemap.xml：把站点所有重要 URL 一次性打包递过去（见第九节）。对新站、内链不足、页面很多的站，这是发现效率最高的手段。
  • Search Console / 站长平台：这是你和搜索引擎之间的官方通道，注册后可以提交 sitemap、手动提交单个 URL（新文章想快点被抓就直接交），还能看到“哪些页面被收录了、哪些没有、为什么没有”。

3. 关键认知：收录是“各家各做各的”

这是新站最容易踩的误区——没有“一次注册、全网收录”这种事。每个搜索引擎是独立系统，各自爬、各自收：

目标用户在用 要去注册的平台
Google Google Search Console
必应 / 部分 AI 搜索 Bing Webmaster Tools
百度 百度搜索资源平台

你想被哪家收录，就得去哪家分别注册、分别提交。好消息是 sitemap.xml 只需做一份，三家提交同一个即可。

4. 别把顺序搞反

注册提交只是“催爬虫来看”，真正决定收不收的是页面本身。正确顺序是：

1
2
3
4
5
6
7
8
先有「经得起看的页面」
  内容有价值 + SSR/SSG 让 HTML 有真实内容 + 状态码正常、没误加 noindex
       ↓
再做「让搜索引擎发现」
  生成 sitemap.xml -> 各家 Search Console 注册并提交 -> 争取外链
       ↓
最后「持续观察」
  在 Search Console 看收录与抓取错误，迭代

十一、关于 SEO 的几个常见误解

把前面几节连起来，有三个新手最容易想当然的点，单独点破。

误解 1：打包时会自动生成 sitemap

默认不会。 sitemap 几乎都要靠框架约定或插件生成：

  • Vite / CRA / 裸 webpack：完全不会，要自己写或上插件；
  • Next.js：App Router 有 sitemap.ts 约定，但内容要你写，或用 next-sitemap；
  • Nuxt / Astro：需要 @nuxtjs/sitemap、@astrojs/sitemap 等模块；
  • Hexo / Hugo 等静态博客：需要装对应的 sitemap 生成插件。

别默认“构建产物里就有 sitemap.xml”，多数情况要主动配置。

误解 2：React 单页应用会自动加 noindex

不会，而且方向恰好相反。 SPA 默认不会偷偷给你加 noindex——noindex 永远是你主动写 <meta name="robots" content="noindex"> 才会有的。

SPA 的真正风险不是“被禁止收录”，而是首屏 HTML 是空壳：

1
2
<div id="root"></div>
<script src="/app.js"></script>

内容藏在 JS 后面，爬虫要等脚本执行完才可能看到，成本高、不确定性大。

一句话：SPA 不是“被 noindex”，而是“内容搜索引擎不一定看得到”。解法是 SSR/SSG，不是去关 noindex。

误解 3：只要 SSR / SSG 就会自动被收录

不会。SSR/SSG 是必要条件，不是充分条件。 回到第一节那张图，它只解决了“收录”里的一个子问题——让 HTML 里有真实内容、爬虫看得见。但整条链路还需要：

1
2
3
4
5
6
7
SSR/SSG 让内容出现在 HTML 里   ← 只解决「看得见」
        ↓ 还需要……
被发现   有站内链接 / 在 sitemap 里 / 有外链
没被拦   没被 robots 挡、没加 noindex
状态对   返回 200，而非 404 / 500 / soft 404
有价值   不是低质、重复、采集内容
够信任   新站还需要时间积累信号

任何一环断了，渲染得再完美也进不了索引。常见的“SSR 了却没被收录”，基本都栽在没提交 sitemap、被 robots 误挡、新站没外链、或内容质量不过关。

SSR/SSG 让你“有资格被读懂”，但“被发现 + 不被拦 + 有价值”才决定最终能不能被收录。

十二、结构化数据：告诉搜索引擎内容类型

结构化数据是一段机器可读的数据，通常使用 JSON-LD。

比如一篇文章可以写：

1
2
3
4
5
6
7
8
9
10
11
12
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SEO 从 0 开始：搜索引擎如何理解一个网页",
  "datePublished": "2026-06-10",
  "author": {
    "@type": "Person",
    "name": "Tech Planet"
  }
}
</script>

结构化数据的作用不是“强行提高排名”，而是帮助搜索引擎更准确地理解内容类型。

常见类型包括：

  • Article
  • BreadcrumbList
  • Product
  • FAQPage
  • Recipe
  • Event
  • Organization

如果页面是文章、商品、课程、活动、问答等明确类型，可以考虑加入结构化数据。

十三、图片 SEO

图片也会影响 SEO 和用户体验。

基本原则：

1
2
3
4
5
6
7
<img
  src="/images/seo-flow.png"
  alt="搜索引擎爬取、收录和排序流程图"
  width="800"
  height="400"
  loading="lazy"
/>

要点：

  • alt 描述图片内容，不要堆关键词
  • 设置 width 和 height，减少布局抖动
  • 非首屏图片可以懒加载
  • 图片文件名尽量有意义
  • 图片体积不要过大
  • 重要文字不要只放在图片里

如果一张图片承载了重要信息，最好在正文里也有对应文字说明。

十四、性能和 Core Web Vitals

页面体验会影响 SEO，尤其是移动端。

前端常见要关注：

  • LCP：最大内容绘制，主要内容多久出现
  • INP：交互响应是否及时
  • CLS：页面布局是否突然跳动

常见优化方式：

  • 使用 SSR 或 SSG 输出首屏 HTML
  • 压缩和拆分 JavaScript
  • 优化图片尺寸和格式
  • 避免阻塞渲染的资源
  • 减少第三方脚本
  • 给图片和广告位预留尺寸
  • 使用 CDN 和缓存

SEO 不是只看性能，但性能差会影响用户体验，也会影响搜索引擎对页面质量的判断。

十五、状态码和跳转

搜索引擎会看 HTTP 状态码。

常见状态码：

状态码 含义 SEO 影响
200 页面正常 可以正常抓取和收录
301 永久重定向 适合 URL 永久迁移
302 临时重定向 适合临时跳转
404 页面不存在 应该用于真正不存在的页面
500 服务器错误 会影响抓取和用户访问

几个常见坑：

  • 页面不存在却返回 200，这叫 soft 404
  • 旧 URL 改了但没有 301
  • 页面加载失败却仍返回空白 200
  • 客户端路由 404，但服务端一直返回首页

对 SEO 来说，正确的状态码很重要。

十六、前端项目的 SEO 检查清单

可以用这张清单快速检查一个页面：

  • 页面是否有唯一、准确的 title
  • 页面是否有清楚的 description
  • 重要页面是否能通过 <a href=""> 访问
  • 首屏 HTML 是否包含主要内容
  • 是否使用了合理的 h1、h2 层级
  • 图片是否有有意义的 alt
  • 不该收录的页面是否加了 noindex
  • 重要页面是否没有被 robots.txt 阻止
  • 是否有 sitemap.xml
  • 重复页面是否设置 canonical
  • 404 页面是否返回真正的 404
  • URL 是否稳定、可读、可分享
  • 移动端是否正常展示
  • 页面加载速度是否可接受
  • 页面内容是否真的解决用户问题

如果是 React / Vue / SPA 项目，还要额外看：

  • 爬虫拿到的 HTML 是否有真实内容
  • 是否需要 SSR 或 SSG
  • 每个路由是否有独立元信息
  • 客户端请求失败时是否会导致正文缺失
  • 动态加载内容是否能被搜索引擎看到

十七、一个新站从 0 做 SEO 的顺序

可以按这个顺序来：

  1. 先保证内容有价值：页面要真的回答用户的问题
  2. 保证页面能访问：URL 稳定，状态码正确
  3. 保证搜索引擎能看到内容：重要页面优先 SSR / SSG，避免纯空壳 HTML
  4. 补齐基础元信息：title、description、canonical
  5. 做好站内链接：让重要页面能从首页、分类页、相关文章进入
  6. 生成 sitemap.xml：让搜索引擎知道重要 URL
  7. 配置 robots.txt：不要误挡重要资源
  8. 优化页面结构：语义 HTML、标题层级、图片 alt
  9. 优化性能：首屏、图片、JS、移动端体验
  10. 接入 Search Console：观察收录、抓取、索引和搜索表现

SEO 是长期过程，不是一次性配置。

十八、SEO 和前端开发的关系总结

SEO 的本质不是“讨好搜索引擎”，而是：

让内容更容易被发现、被理解、被信任、被用户使用。

前端在其中负责很关键的一层：

  • 页面内容能不能被爬虫看到
  • HTML 结构是否清楚
  • 元信息是否完整
  • 链接是否真实可发现
  • 渲染模式是否适合内容页面
  • 页面速度和移动体验是否足够好
  • 状态码、跳转、canonical、sitemap 是否正确

如果一句话记住 SEO：

好内容是基础，可访问是前提，结构化表达是放大器。

延伸阅读

本篇讲的是“理解 SEO 并把基础做对”。当这些都配置完之后，下一步是怎么持续提升排名、又怎么用数值衡量效果，见续篇：

《SEO 进阶：怎么提升排名，以及怎么用数值衡量效果》

参考资料