MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

通过自定义Next.js Document组件优化SEO

2024-05-034.4k 阅读

1. Next.js 基础与 SEO 重要性

Next.js 是一个基于 React 的轻量级前端框架，它提供了诸如服务器端渲染（SSR）、静态站点生成（SSG）等强大功能，使得构建高性能、可维护的 Web 应用变得更加容易。在当今数字化的时代，搜索引擎优化（SEO）对于网站的成功至关重要。良好的 SEO 可以显著提高网站在搜索引擎结果页面（SERP）中的排名，从而带来更多的自然流量。

在 Next.js 应用中，虽然默认已经提供了一些 SEO 相关的基础设置，但对于更复杂和精细化的 SEO 需求，我们需要深入了解并自定义一些组件，其中 Document 组件就是一个关键的切入点。

2. Next.js 的 Document 组件概述

Next.js 的 Document 组件是一个特殊的 React 组件，它代表了 HTML 文档的顶级结构。它主要负责渲染整个 HTML 页面的基本结构，包括 html、head、body 等标签。通过自定义 Document 组件，我们可以对页面的元数据、样式、脚本等进行更细粒度的控制，这对于优化 SEO 非常有帮助。

默认情况下，Next.js 会自动生成一个基本的 Document 组件，它会包含一些必要的元数据，如 viewport 等，但对于 SEO 相关的元数据，如 title、description、keywords 等，可能需要我们进一步定制。

3. 开始自定义 Document 组件

3.1 创建自定义 Document 组件

首先，在 Next.js 项目的 pages 目录下创建一个名为 _document.js 的文件（注意文件名必须是 _document.js，这是 Next.js 的约定）。在这个文件中，我们需要从 next/document 中导入 Document、Html、Head 和 Main、NextScript 等组件。

以下是一个基本的自定义 Document 组件的示例代码：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

在上述代码中，我们定义了一个 MyDocument 类，它继承自 Document。在 render 方法中，我们返回了一个标准的 HTML 结构，其中 Head 组件用于包含页面的头部信息，Main 组件用于渲染页面的主要内容，NextScript 组件用于加载 Next.js 的相关脚本。

3.2 优化页面标题（Title）

页面标题是 SEO 中最重要的元素之一。它显示在搜索引擎结果页面的链接上方，直接影响用户是否点击进入你的网站。我们可以在 Head 组件中添加 title 标签来设置页面标题。

假设我们有一个博客页面，每个文章都有自己独特的标题。我们可以通过以下方式动态设置页面标题：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getAllPosts } from '../lib/api';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const posts = await getAllPosts();
    const post = posts.find(p => p.slug === ctx.query.slug);
    const title = post? post.title : 'Default Blog Title';
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, title };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

在上述代码中，我们通过 getInitialProps 方法获取当前页面的文章信息，并根据文章标题动态设置页面的 title。这样，每个文章页面都能有一个准确且吸引人的标题，有助于提高 SEO 效果。

3.3 设置页面描述（Description）

页面描述是对页面内容的简要概括，它也会显示在搜索引擎结果页面中，帮助用户了解页面的大致内容。我们同样可以在 Head 组件中添加 meta 标签来设置页面描述。

继续以上面的博客页面为例，假设每个文章都有一个简短的摘要，我们可以这样设置页面描述：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getAllPosts } from '../lib/api';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const posts = await getAllPosts();
    const post = posts.find(p => p.slug === ctx.query.slug);
    const title = post? post.title : 'Default Blog Title';
    const description = post? post.excerpt : 'Default blog post description';
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, title, description };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

通过上述代码，我们为每个文章页面设置了准确的页面描述，使得搜索引擎和用户能够更好地理解页面的内容。

3.4 添加关键词（Keywords）

虽然关键词在现代搜索引擎算法中的权重相对较低，但仍然可以作为辅助的 SEO 手段。我们可以在 Head 组件中添加 meta 标签来设置关键词。

同样以博客页面为例，假设每个文章都有相关的标签，我们可以将这些标签作为关键词：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getAllPosts } from '../lib/api';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const posts = await getAllPosts();
    const post = posts.find(p => p.slug === ctx.query.slug);
    const title = post? post.title : 'Default Blog Title';
    const description = post? post.excerpt : 'Default blog post description';
    const keywords = post? post.tags.join(',') : 'default,blog,keywords';
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, title, description, keywords };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
          <meta name="keywords" content={this.props.keywords} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

这样，我们就为每个文章页面设置了相关的关键词，有助于搜索引擎更好地索引页面内容。

4. 处理 Open Graph 协议相关元数据

Open Graph 协议是一种让网页成为“富媒体对象”的协议，它允许我们在分享网页到社交媒体等平台时，展示更丰富的信息，如图片、标题、描述等。这对于提高网站在社交媒体上的传播效果以及间接影响 SEO 都非常重要。

4.1 设置 og:title

og:title 用于设置在社交媒体分享时显示的标题。我们可以在 Head 组件中添加 meta 标签来设置 og:title。

继续以博客页面为例：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getAllPosts } from '../lib/api';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const posts = await getAllPosts();
    const post = posts.find(p => p.slug === ctx.query.slug);
    const title = post? post.title : 'Default Blog Title';
    const description = post? post.excerpt : 'Default blog post description';
    const keywords = post? post.tags.join(',') : 'default,blog,keywords';
    const ogTitle = post? `Read: ${post.title}` : 'Read our blog';
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, title, description, keywords, ogTitle };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
          <meta name="keywords" content={this.props.keywords} />
          <meta property="og:title" content={this.props.ogTitle} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

通过上述代码，我们为社交媒体分享设置了一个更具吸引力的标题。

4.2 设置 og:description

og:description 用于设置在社交媒体分享时显示的描述。同样在 Head 组件中添加 meta 标签来设置：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getAllPosts } from '../lib/api';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const posts = await getAllPosts();
    const post = posts.find(p => p.slug === ctx.query.slug);
    const title = post? post.title : 'Default Blog Title';
    const description = post? post.excerpt : 'Default blog post description';
    const keywords = post? post.tags.join(',') : 'default,blog,keywords';
    const ogTitle = post? `Read: ${post.title}` : 'Read our blog';
    const ogDescription = post? `Check out this blog post: ${post.excerpt}` : 'Explore our blog posts';
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, title, description, keywords, ogTitle, ogDescription };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
          <meta name="keywords" content={this.props.keywords} />
          <meta property="og:title" content={this.props.ogTitle} />
          <meta property="og:description" content={this.props.ogDescription} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

这样，在社交媒体分享时，会显示更详细的描述信息，吸引用户点击。

4.3 设置 og:image

og:image 用于设置在社交媒体分享时显示的图片。假设每个博客文章都有一个特色图片，我们可以这样设置：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getAllPosts } from '../lib/api';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const posts = await getAllPosts();
    const post = posts.find(p => p.slug === ctx.query.slug);
    const title = post? post.title : 'Default Blog Title';
    const description = post? post.excerpt : 'Default blog post description';
    const keywords = post? post.tags.join(',') : 'default,blog,keywords';
    const ogTitle = post? `Read: ${post.title}` : 'Read our blog';
    const ogDescription = post? `Check out this blog post: ${post.excerpt}` : 'Explore our blog posts';
    const ogImage = post? post.featuredImage : '/default-image.jpg';
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, title, description, keywords, ogTitle, ogDescription, ogImage };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
          <meta name="keywords" content={this.props.keywords} />
          <meta property="og:title" content={this.props.ogTitle} />
          <meta property="og:description" content={this.props.ogDescription} />
          <meta property="og:image" content={this.props.ogImage} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

通过设置 og:image，在社交媒体分享时会显示对应的图片，使分享内容更加吸引人。

5. 处理 Twitter 卡片相关元数据

Twitter 卡片允许我们在 Twitter 上分享网页时，以更丰富的格式展示内容，包括图片、标题、描述等。这对于在 Twitter 平台上提高网站的曝光度和点击率非常有帮助。

5.1 设置 twitter:title

twitter:title 用于设置在 Twitter 分享时显示的标题。在 Head 组件中添加 meta 标签来设置：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getAllPosts } from '../lib/api';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const posts = await getAllPosts();
    const post = posts.find(p => p.slug === ctx.query.slug);
    const title = post? post.title : 'Default Blog Title';
    const description = post? post.excerpt : 'Default blog post description';
    const keywords = post? post.tags.join(',') : 'default,blog,keywords';
    const ogTitle = post? `Read: ${post.title}` : 'Read our blog';
    const ogDescription = post? `Check out this blog post: ${post.excerpt}` : 'Explore our blog posts';
    const ogImage = post? post.featuredImage : '/default-image.jpg';
    const twitterTitle = post? `📖 ${post.title}` : 'Read our blog on Twitter';
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, title, description, keywords, ogTitle, ogDescription, ogImage, twitterTitle };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
          <meta name="keywords" content={this.props.keywords} />
          <meta property="og:title" content={this.props.ogTitle} />
          <meta property="og:description" content={this.props.ogDescription} />
          <meta property="og:image" content={this.props.ogImage} />
          <meta name="twitter:title" content={this.props.twitterTitle} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

通过上述代码，我们为 Twitter 分享设置了一个吸引人的标题。

5.2 设置 twitter:description

twitter:description 用于设置在 Twitter 分享时显示的描述。同样在 Head 组件中添加 meta 标签：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getAllPosts } from '../lib/api';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const posts = await getAllPosts();
    const post = posts.find(p => p.slug === ctx.query.slug);
    const title = post? post.title : 'Default Blog Title';
    const description = post? post.excerpt : 'Default blog post description';
    const keywords = post? post.tags.join(',') : 'default,blog,keywords';
    const ogTitle = post? `Read: ${post.title}` : 'Read our blog';
    const ogDescription = post? `Check out this blog post: ${post.excerpt}` : 'Explore our blog posts';
    const ogImage = post? post.featuredImage : '/default-image.jpg';
    const twitterTitle = post? `📖 ${post.title}` : 'Read our blog on Twitter';
    const twitterDescription = post? `Discover this blog post: ${post.excerpt}` : 'Explore amazing blog posts on Twitter';
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, title, description, keywords, ogTitle, ogDescription, ogImage, twitterTitle, twitterDescription };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
          <meta name="keywords" content={this.props.keywords} />
          <meta property="og:title" content={this.props.ogTitle} />
          <meta property="og:description" content={this.props.ogDescription} />
          <meta property="og:image" content={this.props.ogImage} />
          <meta name="twitter:title" content={this.props.twitterTitle} />
          <meta name="twitter:description" content={this.props.twitterDescription} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

这样，在 Twitter 分享时会显示更详细的描述，吸引用户点击。

5.3 设置 twitter:image

twitter:image 用于设置在 Twitter 分享时显示的图片。假设博客文章有特定的 Twitter 分享图片，我们可以这样设置：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getAllPosts } from '../lib/api';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const posts = await getAllPosts();
    const post = posts.find(p => p.slug === ctx.query.slug);
    const title = post? post.title : 'Default Blog Title';
    const description = post? post.excerpt : 'Default blog post description';
    const keywords = post? post.tags.join(',') : 'default,blog,keywords';
    const ogTitle = post? `Read: ${post.title}` : 'Read our blog';
    const ogDescription = post? `Check out this blog post: ${post.excerpt}` : 'Explore our blog posts';
    const ogImage = post? post.featuredImage : '/default-image.jpg';
    const twitterTitle = post? `📖 ${post.title}` : 'Read our blog on Twitter';
    const twitterDescription = post? `Discover this blog post: ${post.excerpt}` : 'Explore amazing blog posts on Twitter';
    const twitterImage = post? post.twitterFeaturedImage : '/default-twitter-image.jpg';
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, title, description, keywords, ogTitle, ogDescription, ogImage, twitterTitle, twitterDescription, twitterImage };
  }

  render() {
    return (
      <Html>
        <Head>
          <title>{this.props.title}</title>
          <meta name="description" content={this.props.description} />
          <meta name="keywords" content={this.props.keywords} />
          <meta property="og:title" content={this.props.ogTitle} />
          <meta property="og:description" content={this.props.ogDescription} />
          <meta property="og:image" content={this.props.ogImage} />
          <meta name="twitter:title" content={this.props.twitterTitle} />
          <meta name="twitter:description" content={this.props.twitterDescription} />
          <meta name="twitter:image" content={this.props.twitterImage} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

通过设置 twitter:image，在 Twitter 分享时会显示对应的图片，增强分享效果。

6. 处理结构化数据（Schema.org）

结构化数据是一种以标准化格式提供有关网页内容信息的方式，它可以帮助搜索引擎更好地理解页面内容，并在搜索结果中以更丰富的形式展示，如知识卡片、产品信息等。在 Next.js 中，我们可以通过在 Head 组件中添加 script 标签来引入结构化数据。

假设我们有一个产品页面，我们可以添加产品相关的结构化数据：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const product = {
      "@context": "https://schema.org",
      "@type": "Product",
      "name": "Sample Product",
      "description": "This is a sample product description",
      "image": "/product-image.jpg",
      "offers": {
        "@type": "Offer",
        "price": "19.99",
        "priceCurrency": "USD",
        "availability": "https://schema.org/InStock"
      }
    };
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps, product };
  }

  render() {
    return (
      <Html>
        <Head>
          <script type="application/ld+json">{JSON.stringify(this.props.product)}</script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

通过上述代码，我们为产品页面添加了结构化数据，有助于搜索引擎更好地展示产品信息，提高用户点击率。

7. 优化自定义 Document 组件的性能

虽然自定义 Document 组件可以极大地优化 SEO，但我们也需要注意性能问题。由于 Document 组件在服务器端渲染时会被调用，过多的复杂逻辑可能会影响渲染速度。

7.1 数据预取优化

对于在 getInitialProps 方法中获取的数据，如博客文章信息、产品信息等，可以考虑使用数据预取策略。例如，可以在构建时（对于静态站点生成）或请求前（对于服务器端渲染）提前获取数据，而不是在每次渲染 Document 组件时都去获取。

7.2 避免不必要的计算

在 render 方法中，尽量避免进行复杂的计算。如果有一些需要计算的数据，尽量在 getInitialProps 中提前计算好，并作为属性传递给 render 方法。

7.3 缓存策略

对于一些不经常变化的数据，如网站的基本元数据（如网站名称、默认描述等），可以考虑使用缓存策略。这样在多次渲染 Document 组件时，可以直接从缓存中获取数据，而不需要重复计算或获取。

8. 常见问题及解决方法

8.1 自定义 Document 组件不生效

这可能是由于文件名错误或组件导入路径错误导致的。确保文件名是 _document.js，并且从 next/document 中正确导入了相关组件。

8.2 页面标题和描述在搜索引擎中显示不正确

这可能是由于动态数据获取失败或设置的元数据格式不正确导致的。检查 getInitialProps 方法中数据获取的逻辑，确保数据能够正确获取。同时，检查 meta 标签的属性设置是否符合标准。

8.3 社交媒体分享图片不显示

这可能是由于图片路径错误或图片格式不被支持导致的。确保 og:image 和 twitter:image 设置的图片路径是正确的，并且图片格式是常见的如 jpg、png 等。

通过以上对 Next.js 中自定义 Document 组件优化 SEO 的详细介绍，我们可以看到通过合理地定制 Document 组件，能够显著提升网站的 SEO 效果，从而吸引更多的流量和用户。在实际应用中，需要根据项目的具体需求和特点，灵活运用上述方法，并不断优化和调整。