Glittering's blog

Appearance

一、SEO 本质：它到底在解决什么问题？ ​

SEO（Search Engine Optimization）的核心目标是：

让你的页面更容易被搜索引擎发现 + 理解 + 排名靠前

带来的结果就是：

  • 更多自然流量（organic traffic）
  • 更高转化率
  • 更低获客成本 (Next.js)

二、搜索引擎工作流程 ​

Next.js 教程里强调了一个非常关键的链路：

1️⃣ Crawling（抓取） ​

搜索引擎机器人（如 Googlebot）访问你的网站

影响因素：

  • sitemap.xml
  • robots.txt
  • 内链结构

2️⃣ Indexing（索引） ​

将页面内容存入数据库

影响因素：

  • HTML 是否可读（SSR vs CSR）
  • 页面内容是否真实存在

3️⃣ Rendering（渲染） ​

解析 JS，生成最终页面（对 SPA 很关键）

👉 CSR 问题：

  • 初始 HTML 是空壳
  • 影响抓取效率

👉 Next.js 优势：

  • SSR / SSG 提供完整 HTML

4️⃣ Ranking（排名） ​

搜索引擎决定你排第几

影响因素：

  • 内容质量
  • 关键词匹配
  • 页面性能（Core Web Vitals）

三、SEO 核心三大体系 ​

你可以把 SEO 分成三层：

1️⃣ 内容 SEO（Content SEO） ​

本质：你写的内容值不值得被推荐

关键点：

  • 关键词（Keyword）
  • 标题（Title）
  • 描述（Description）
  • 内容深度

👉 示例：

html
<title>Next.js SEO 完整指南</title>
<meta name="description" content="详细讲解 Next.js SEO优化..." />

2️⃣ 技术 SEO（Technical SEO）⭐ ​

Next.js 教程核心就在这块

✔ 渲染策略 ​

方式SEO效果
CSR❌ 较差
SSR✅ 好
SSG✅ 最好

原因：

✔ 页面结构 ​

  • 语义化 HTML（h1~h6）
  • 合理 DOM 结构
  • 可访问性（a11y）

✔ URL 设计 ​

  • 清晰路径
/blog/nextjs-seo
  • 避免：
?id=123

✔ Sitemap + Robots ​

  • sitemap.xml → 告诉搜索引擎有哪些页面
  • robots.txt → 控制爬虫行为 (swiftorial.com)

✔ Metadata（核心） ​

Next.js 重点：

js
export const metadata = {
  title: 'xxx',
  description: 'xxx'
}

作用：

  • 决定搜索结果展示
  • 影响点击率

✔ 结构化数据（Schema） ​

  • JSON-LD
  • Open Graph

👉 提升：

  • 富文本搜索结果（Rich Snippets）

3️⃣ 性能 SEO（Performance SEO） ​

👉 Google 已明确：性能影响排名

核心指标（Core Web Vitals）：

指标含义
LCP加载速度
FID交互响应
CLS页面稳定性

✔ 工具：Lighthouse ​

  • 自动检测 SEO / 性能问题
  • 给优化建议 (Next.js)

四、Next.js 为什么天然 SEO 友好？ ​

Next.js = 技术 SEO 的最佳实践集合

1️⃣ SSR（服务端渲染） ​

优势：

  • HTML 完整
  • 搜索引擎可直接读取

2️⃣ SSG / ISR ​

优势：

3️⃣ Image 优化 ​

Next.js 自动：

  • lazy load
  • WebP
  • 尺寸适配

👉 提升 LCP

4️⃣ 自动优化性能 ​

  • 代码分割
  • 缓存
  • Edge/CDN

👉 技术 SEO + 性能 SEO 一起解决

五、一个“高级认知” ​

👉 SEO ≠ 技术

真正排名核心：

内容 + 权威性 + 用户体验

技术 SEO 只是“基础设施”

来自社区的一个很真实观点：

Lighthouse 分数 ≠ 排名 真正影响 SEO 的是内容和相关性 (Reddit)

Copyright © 2026