第二章
页面级
SEO优化
掌握Next.js的Metadata API、next/image优化、语义化HTML和核心组件的SEO最佳实践。
进阶内容
预计阅读：45分钟
实战代码
2.1 Metadata API详解
Next.js App Router 的 Metadata API 是现代前端 SEO 的核心工具。它提供了类型安全的方式来管理页面元数据， 支持静态和动态配置，完美集成了现代Web标准。
Metadata API 实时预览
建议长度：50-60个字符 (6/60)
建议长度：150-160个字符 (27/160)
搜索结果预览
我的网站标题
https://yoursite.com/page
这是我的网站描述，简洁明了地介绍网站的主要内容和价值。
Next.js 代码
// app/page.tsx or app/layout.tsx
import { Metadata } from 'next';
export const metadata: Metadata = {
title: '我的网站标题',
description: '这是我的网站描述，简洁明了地介绍网站的主要内容和价值。',
// keywords 可用于站内分类，但 Google 不将其作为排名信号
keywords: '关键词1, 关键词2, 关键词3',
openGraph: {
title: '我的网站标题',
description: '这是我的网站描述，简洁明了地介绍网站的主要内容和价值。',
type: 'website',
},
};静态Metadata
在页面或布局文件中直接导出metadata对象
// app/page.tsx
export const metadata = {
title: '首页 | 我的网站',
description: '网站描述...'
};动态Metadata
使用generateMetadata函数根据参数生成
// app/posts/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.summary
};
}2.2 next/image终极优化
next/image组件是Next.js提供的强大图片优化解决方案，它自动处理图片压缩、格式转换、 懒加载等性能优化，显著提升Core Web Vitals分数。
next/image 优化对比
传统 <img> 标签
文件大小:~500KB
加载时间:~2.5s
LCP影响:较大
CLS影响:可能发生
<img
src="/large-image.jpg"
alt="图片描述"
style={{width: '100%', height: 'auto'}}
/>Next.js Image 组件
文件大小:~50KB (WebP)
加载时间:~0.3s
LCP影响:最小化
CLS影响:已防止
import Image from 'next/image';
<Image
src="/large-image.jpg"
alt="图片描述"
width={800}
height={600}
priority // 首屏图片
placeholder="blur"
/>next/image核心特性
自动格式优化
优先使用WebP、AVIF等现代格式
响应式图片
根据设备自动调整尺寸
智能懒加载
视口外图片延迟加载
防止CLS
预设尺寸避免布局偏移
模糊占位符
优雅的加载体验
优先级控制
首屏图片优先加载
2.3 语义化HTML与组件
语义化HTML不仅提升了代码的可读性和可维护性，更重要的是为搜索引擎提供了清晰的内容结构信息， 有助于更好地理解和索引页面内容。
语义化HTML结构查看器
页面结构
<header>
页面头部，包含导航和Logo
<nav>
<h1>
<main>
主要内容区域
<article>
<section>
<aside>
侧边栏内容
<nav>
<footer>
页面底部
<address>
元素详情
点击左侧元素查看详细信息
2.4 页面SEO检查清单
使用这个交互式检查清单确保每个页面都遵循了SEO最佳实践。 勾选完成的项目，跟踪你的优化进度。
SEO优化检查清单
0%
0/16 完成
基础Metadata
设置页面标题（title）
每页都应有独特的标题
添加页面描述（description）
150-160字符的简洁描述
设置规范 URL（canonical）
避免重复页面分散索引信号
设置Open Graph标签
社交媒体分享优化
图片优化
使用next/image组件
自动优化和懒加载
添加alt属性
描述性的图片替代文本
设置width和height
防止布局偏移CLS
为首屏图片添加priority
优先加载重要图片
语义化HTML
使用正确的标题层级
h1 > h2 > h3 逻辑结构
添加语义化标签
header, main, article, aside, footer
使用有意义的链接文本
避免"点击这里"等无意义文本
添加结构化数据
JSON-LD格式的结构化信息
Next.js特性
配置robots.txt
使用robots.ts动态生成
生成sitemap.xml
使用sitemap.ts自动生成
使用next/link组件
客户端路由和预加载
优化字体加载
使用next/font减少布局偏移