第三章
技术SEO
自动化与配置
掌握 URL 结构、Sitemap、robots.txt 和结构化数据等技术层面的 SEO 实现，让搜索引擎更高效地理解你的网站。
进阶内容
预计阅读：40分钟
配置与生成
3.1 URL结构 (File-based Routing)
Next.js 的 App Router 使用基于文件系统的路由，文件夹结构直接映射为 URL 路径，这使得创建清晰、语义化的 URL 变得非常简单。
文件夹结构
app/
dashboard/
settings/
page.tsx
products/
[slug]/
page.tsx
对应的URL
/dashboard/settings
/products/a-cool-product
/products/another-item
💡 URL设计原则
- 简洁易读: 避免使用复杂的参数和ID。
- 包含关键词: 在URL中包含相关关键词 (如 /products/blue-widget)。
- 使用连字符: 使用 - 分隔单词，而不是下划线 _。
3.2 Sitemap 与 robots.txt 的生成
Next.js 允许你在 `app` 目录下创建 `sitemap.ts` 和 `robots.ts` 文件，以编程方式动态或静态地生成对应的 `sitemap.xml` 和 `robots.txt` 文件。
Sitemap.ts 生成器
URL 列表
https://acme.com2026-09-01
https://acme.com/about2026-09-01
https://acme.com/blog/hello-world2026-09-01
生成的文件
app/sitemap.ts
// app/sitemap.ts
import { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://acme.com',
lastModified: new Date('2026-09-01'),
},
{
url: 'https://acme.com/about',
lastModified: new Date('2026-09-01'),
},
{
url: 'https://acme.com/blog/hello-world',
lastModified: new Date('2026-09-01'),
}
]
}/sitemap.xml (输出)
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://acme.com</loc>
<lastmod>2026-09-01</lastmod>
</url>
<url>
<loc>https://acme.com/about</loc>
<lastmod>2026-09-01</lastmod>
</url>
<url>
<loc>https://acme.com/blog/hello-world</loc>
<lastmod>2026-09-01</lastmod>
</url>
</urlset>Robots.ts 生成器
app/robots.ts
// app/robots.ts
import { MetadataRoute } from 'next'
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: ["/"],
disallow: ["/admin","/private/"],
},
sitemap: 'https://acme.com/sitemap.xml',
}
}/robots.txt (输出)
User-agent: * Allow: / Disallow: /admin Disallow: /private/ Sitemap: https://acme.com/sitemap.xml
3.3 规范化标签 (rel="canonical")
当多个URL展示相同或相似内容时，使用规范化标签可以告诉搜索引擎哪个是“首选”版本，避免重复内容问题。
在 `metadata` 中实现
通过 `metadata` 对象的 `alternates` 字段来配置规范化URL。
// app/products/[slug]/page.tsx
import { Metadata } from 'next'
export const metadata: Metadata = {
alternates: {
canonical: 'https://acme.com/products/original-url',
// 也可以指向动态URL
// canonical: `https://acme.com/products/${params.slug}`,
},
}3.4 结构化数据 (JSON-LD)
结构化数据（如JSON-LD）是一种标准化的格式，用于向搜索引擎提供有关页面的明确信息。这可以帮助搜索引擎更好地理解您的内容，并可能在搜索结果中以“富媒体搜索结果”的形式展示。
JSON-LD 结构化数据生成器
文章信息
生成的JSON-LD
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "My Awesome Article",
"image": "https://acme.com/images/awesome.jpg",
"author": {
"@type": "Person",
"name": "John Doe"
},
"datePublished": "2026-09-01"
}Next.js 实现
// app/blog/[slug]/page.tsx
function JsonLd() {
const json = {
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "My Awesome Article",
"image": "https://acme.com/images/awesome.jpg",
"author": {
"@type": "Person",
"name": "John Doe"
},
"datePublished": "2026-09-01"
};
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }}
/>
)
}
export default function Page() {
return (
<>
<JsonLd />
{/* Page content */}
</>
)
}第三章总结
核心技能
- 利用文件路由创建SEO友好的URL。
- 使用 `sitemap.ts` 动态生成站点地图。
- 通过 `robots.ts` 控制搜索引擎抓取行为。
- 在页面中嵌入JSON-LD结构化数据。
下章预告
下一章将深入探讨Next.js的渲染模式（SSG, SSR, ISR），这是理解和最大化Next.js SEO潜力的核心。