Next.js 如何进行 SEO 优化？ - 面试题

Next.js 提供了强大的 SEO 优化功能，帮助开发者构建搜索引擎友好的 Web 应用。以下是 Next.js 中主要的 SEO 优化技术：

1. 元数据管理

Pages Router - 使用 Head 组件

javascript
import Head from 'next/head';

export default function BlogPost({ post }) {
  return (
    <>
      <Head>
        <title>{post.title} - My Blog</title>
        <meta name="description" content={post.excerpt} />
        <meta name="keywords" content={post.tags.join(', ')} />
        <meta name="author" content={post.author} />
        
        {/* Open Graph */}
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:image" content={post.image} />
        <meta property="og:type" content="article" />
        <meta property="og:url" content={`https://example.com/blog/${post.slug}`} />
        
        {/* Twitter Card */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={post.title} />
        <meta name="twitter:description" content={post.excerpt} />
        <meta name="twitter:image" content={post.image} />
        
        {/* Canonical URL */}
        <link rel="canonical" href={`https://example.com/blog/${post.slug}`} />
        
        {/* Favicon */}
        <link rel="icon" href="/favicon.ico" />
      </Head>
      
      <article>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </article>
    </>
  );
}

App Router - 使用 Metadata API

javascript
// app/layout.js
export const metadata = {
  title: {
    default: 'My Website',
    template: '%s | My Website'
  },
  description: 'A website built with Next.js',
  keywords: ['nextjs', 'react', 'web development'],
  authors: [{ name: 'John Doe' }],
  creator: 'John Doe',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://example.com',
    siteName: 'My Website',
    images: [
      {
        url: 'https://example.com/og.jpg',
        width: 1200,
        height: 630,
        alt: 'My Website'
      }
    ]
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Website',
    description: 'A website built with Next.js',
    images: ['https://example.com/twitter.jpg']
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  verification: {
    google: 'google-site-verification-code',
    yandex: 'yandex-verification-code',
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

动态元数据

javascript
// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPostBySlug(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.image],
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author],
    },
  };
}

export default function BlogPost({ params }) {
  return <div>Post content</div>;
}

2. 结构化数据

使用 JSON-LD 添加结构化数据，帮助搜索引擎理解内容。

javascript
import Head from 'next/head';

export default function BlogPost({ post }) {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.excerpt,
    image: post.image,
    author: {
      '@type': 'Person',
      name: post.author,
    },
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
  };

  return (
    <>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
        />
      </Head>
      <article>{/* Post content */}</article>
    </>
  );
}

3. 服务器端渲染（SSR）

SSR 确保搜索引擎爬虫能够抓取到完整的 HTML 内容。

javascript
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data').then(r => r.json());
  
  return {
    props: { data },
  };
}

export default function Page({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

4. 静态生成（SSG）

对于内容不经常变化的页面，使用 SSG 可以获得最佳性能。

javascript
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(r => r.json());
  
  return {
    props: { data },
    revalidate: 3600, // ISR：每小时重新生成
  };
}

export default function Page({ data }) {
  return <div>{data.content}</div>;
}

5. 动态路由的 SEO

使用 getStaticPaths 为动态路由生成静态页面。

javascript
export async function getStaticPaths() {
  const posts = await getAllPosts();
  
  return {
    paths: posts.map(post => ({
      params: { slug: post.slug }
    })),
    fallback: 'blocking', // 确保所有页面都可被索引
  };
}

export async function getStaticProps({ params }) {
  const post = await getPostBySlug(params.slug);
  
  return {
    props: { post },
  };
}

6. 语义化 HTML

使用语义化 HTML 标签提升 SEO。

javascript
export default function BlogPost({ post }) {
  return (
    <article>
      <header>
        <h1>{post.title}</h1>
        <time dateTime={post.publishedAt}>
          {new Date(post.publishedAt).toLocaleDateString()}
        </time>
      </header>
      
      <main>
        {post.content}
      </main>
      
      <aside>
        <h2>Related Posts</h2>
        <ul>
          {post.related.map(related => (
            <li key={related.id}>
              <Link href={`/blog/${related.slug}`}>
                {related.title}
              </Link>
            </li>
          ))}
        </ul>
      </aside>
      
      <footer>
        <p>Written by {post.author}</p>
      </footer>
    </article>
  );
}

7. 图片优化

使用 next/image 优化图片，提升页面加载速度。

javascript
import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={1200}
      height={630}
      priority
      placeholder="blur"
    />
  );
}

8. Sitemap 和 Robots.txt

生成 Sitemap

javascript
// app/sitemap.js
import { getPosts } from '@/lib/posts';

export default async function sitemap() {
  const posts = await getPosts();
  const baseUrl = 'https://example.com';
  
  const postUrls = posts.map(post => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly',
    priority: 0.8,
  }));
  
  return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.5,
    },
    ...postUrls,
  ];
}

生成 Robots.txt

javascript
// app/robots.js
export default function robots() {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/api/', '/admin/'],
    },
    sitemap: 'https://example.com/sitemap.xml',
  };
}

9. 性能优化

性能是 SEO 的重要因素，Next.js 提供了多种性能优化技术。

使用 Web Vitals 监控

javascript
// pages/_app.js
import { useReportWebVitals } from 'next/web-vitals';

export function reportWebVitals(metric) {
  // 发送到分析服务
  console.log(metric);
}

export default function App({ Component, pageProps }) {
  useReportWebVitals(reportWebVitals);
  
  return <Component {...pageProps} />;
}

优化 Core Web Vitals

javascript
// 使用 next/image 优化 LCP
import Image from 'next/image';

// 使用 Suspense 优化 TTFB
import { Suspense } from 'react';

// 优化 CLS
export default function Page() {
  return (
    <div style={{ minHeight: '100vh' }}>
      {/* 内容 */}
    </div>
  );
}

10. 国际化（i18n）

Next.js 内置支持国际化，帮助构建多语言网站。

javascript
// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'zh', 'es'],
    defaultLocale: 'en',
  },
};

// 为每个语言设置不同的元数据
export async function generateMetadata({ params }) {
  const { locale } = params;
  const translations = await getTranslations(locale);
  
  return {
    title: translations.title,
    description: translations.description,
    alternates: {
      canonical: `https://example.com/${locale}`,
      languages: {
        'en': 'https://example.com/en',
        'zh': 'https://example.com/zh',
        'es': 'https://example.com/es',
      },
    },
  };
}

SEO 最佳实践

使用 SSR 或 SSG：确保内容可被搜索引擎抓取
优化元数据：为每个页面设置适当的标题、描述和关键词
使用结构化数据：帮助搜索引擎理解内容
优化页面性能：提升 Core Web Vitals
创建 Sitemap：帮助搜索引擎发现所有页面
使用语义化 HTML：提升内容可读性
优化图片：使用 next/image 优化图片加载
设置 Canonical URL：避免重复内容问题
实现面包屑导航：提升用户体验和 SEO
监控 SEO 指标：使用工具监控 SEO 表现

通过合理使用这些 SEO 优化技术，可以显著提升 Next.js 应用在搜索引擎中的排名和可见性。