How to optimize SEO in Next.js? - 面试题

Next.js provides powerful SEO optimization features to help developers build search engine-friendly web applications. Here are the main SEO optimization techniques in Next.js:

1. Metadata Management

Pages Router - Using Head Component

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 - Using 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>
  );
}

Dynamic Metadata

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. Structured Data

Use JSON-LD to add structured data, helping search engines understand content.

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. Server-Side Rendering (SSR)

SSR ensures search engine crawlers can crawl complete HTML content.

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. Static Site Generation (SSG)

For pages with infrequently changing content, use SSG for best performance.

javascript
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(r => r.json());
  
  return {
    props: { data },
    revalidate: 3600, // ISR: Regenerate every hour
  };
}

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

5. SEO for Dynamic Routes

Use getStaticPaths to generate static pages for dynamic routes.

javascript
export async function getStaticPaths() {
  const posts = await getAllPosts();
  
  return {
    paths: posts.map(post => ({
      params: { slug: post.slug }
    })),
    fallback: 'blocking', // Ensure all pages are indexable
  };
}

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

6. Semantic HTML

Use semantic HTML tags to improve 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. Image Optimization

Use next/image to optimize images and improve page load speed.

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 and Robots.txt

Generate 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,
  ];
}

Generate Robots.txt

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

9. Performance Optimization

Performance is an important factor for SEO, and Next.js provides various performance optimization techniques.

Monitor with Web Vitals

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

export function reportWebVitals(metric) {
  // Send to analytics service
  console.log(metric);
}

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

Optimize Core Web Vitals

javascript
// Use next/image to optimize LCP
import Image from 'next/image';

// Use Suspense to optimize TTFB
import { Suspense } from 'react';

// Optimize CLS
export default function Page() {
  return (
    <div style={{ minHeight: '100vh' }}>
      {/* Content */}
    </div>
  );
}

10. Internationalization (i18n)

Next.js has built-in support for internationalization to help build multilingual websites.

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

// Set different metadata for each language
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 Best Practices

Use SSR or SSG: Ensure content is crawlable by search engines
Optimize metadata: Set appropriate titles, descriptions, and keywords for each page
Use structured data: Help search engines understand content
Optimize page performance: Improve Core Web Vitals
Create Sitemap: Help search engines discover all pages
Use semantic HTML: Improve content readability
Optimize images: Use next/image to optimize image loading
Set Canonical URL: Avoid duplicate content issues
Implement breadcrumb navigation: Improve user experience and SEO
Monitor SEO metrics: Use tools to monitor SEO performance

By properly using these SEO optimization techniques, you can significantly improve the ranking and visibility of Next.js applications in search engines.