Next.js SEO 优化指南

在 Next.js 项目中进行 SEO（搜索引擎优化）可以显著提高网页在搜索引擎结果中的排名，提升可见性与访问量。以下是 Next.js SEO 优化的全面指南，涵盖技术层面与内容策略：

🧠 一、基础 SEO 实践

1. 使用 next/head 设置 Meta 标签

import Head from 'next/head'

export default function HomePage() {
  return (
    <>
      <Head>
        <title>你的页面标题</title>
        <meta name="description" content="页面描述，有助于提升搜索排名" />
        <meta name="keywords" content="关键词1, 关键词2" />
        <meta property="og:title" content="社交媒体分享标题" />
        <meta property="og:description" content="社交媒体分享描述" />
        <meta property="og:image" content="/og-image.jpg" />
        <meta name="robots" content="index, follow" />
      </Head>
      <main>...</main>
    </>
  )
}

2. 页面唯一性

  • 每个页面都应有独特的 <title> 和 <meta description>。
  • 避免复制粘贴模板内容。

🚀 二、技术层优化

1. 服务端渲染（SSR）或静态生成（SSG）

利用 Next.js 的 getServerSideProps 或 getStaticProps 提供预渲染内容，提高爬虫可读性。

export async function getStaticProps() {
  const data = await fetchContent()
  return {
    props: { data },
  }
}

2. 使用 Sitemap 和 robots.txt

安装插件 next-sitemap 生成 sitemap：

npm install next-sitemap

配置 next-sitemap.config.js：

module.exports = {
  siteUrl: 'https://yourdomain.com',
  generateRobotsTxt: true,
}

添加到 package.json：

"scripts": {
  "postbuild": "next-sitemap"
}

3. 支持多语言 SEO（如需）

使用 Next.js 的 国际化路由：

i18n: {
  locales: ['en', 'zh'],
  defaultLocale: 'zh',
}

🖼️ 三、结构化数据（Structured Data）

添加 JSON-LD 数据以增强 Google 富摘要（Rich Results）：

<Head>
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{
      __html: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "文章标题",
        "author": {
          "@type": "Person",
          "name": "作者名"
        },
        ...
      }),
    }}
  />
</Head>

🧰 四、使用第三方库优化 SEO

推荐库：next-seo

安装

npm install next-seo

使用示例

import { NextSeo } from 'next-seo'

<NextSeo
  title="页面标题"
  description="页面描述"
  canonical="https://yourdomain.com/page"
  openGraph={{
    url: 'https://yourdomain.com/page',
    title: 'OG标题',
    description: 'OG描述',
    images: [{ url: '/og-image.jpg', width: 800, height: 600 }],
  }}
/>

📱 五、提升移动端体验和性能

  • ✅ 响应式设计（使用 Tailwind CSS、CSS Modules 等）
  • ✅ 使用 Image 组件优化图片：
import Image from 'next/image'

<Image src="/example.jpg" alt="描述" width={800} height={600} />
  • ✅ 使用 Lighthouse 测试性能、可访问性和 SEO 分数。

📈 六、内容优化建议

  • 原创内容优先
  • 使用 H1-H6 正确分层标题
  • 链接到内部和外部权威页面
  • 页面 URL 简洁且包含关键词，如：/blog/nextjs-seo 而不是 `/blog?id=123
#Next.js #SEO
Next.js SEO 优化指南
https://liuyuhe666.github.io/2025/06/04/Next-js-SEO-优化指南/
作者
Liu Yuhe
发布于
2025年6月4日
许可协议