首页 SEO攻略正文

Next.js：强大的基于React的Web框架，助力SEO优化与页面性能提升

SEO攻略 2025-06-25 21

<[id_1502014499]> Next.js 13 SEO技巧 _Next.js SEO优化 _news目录对seo的作用

Next.js 是一个基于 React 的热门 Web 框架，近年来深受欢迎，社区规模也在持续扩大。该框架功能强大，能够帮助我们快速开发出既快速又对搜索引擎优化友好的 Web 应用。此外，其动态页面在移动设备上的表现也相当出色。

鉴于同构系统设计的复杂性，Next.js在SEO方面可能成为一个难题，让你感到烦恼。尤其是当你将其应用于传统的React应用程序中，并且仅仅依赖文档来操作时。

依托于对服务器端渲染、静态网站生成以及当前 React 服务器组件的深度集成，Next.js 打造了一个功能强大的开发环境，使你的 Web 应用能够达到卓越的搜索引擎优化效果。此外，它还能确保你在使用 Node 和 React 构建的应用中，各个页面都能提供出色的用户体验，并且对搜索引擎优化表现出良好的兼容性。

为什么要学习 NextJS 用于前端开发？

概括来说，最新推出的 NextJS 开源框架有效解决了 React 当前在渲染方面遇到的大量难题。促使我撰写此篇文章的原因在于，众多前端开发者对我表达了强烈的愤慨情绪。:-D

他们投入了6至9个月的时间来打造一个基于React的应用程序，随后我不得不向他们提出重构代码的请求。

Next.js 有效解决了众多渲染难题，使得搜索引擎能够轻松把握网站内容实质。

谁会从这篇文章中得到最大的收获？

作为一名市场营销从业者，抑或是遭遇搜索引擎优化难题的资深软件开发者，这样的知识将对你大有裨益。

然而，新手开发者同样可以查阅这些资料，这些内容对你未来的发展将大有裨益。

你应该如何渲染你的下一个 JS 网页应用程序？

我亲自在我所创办的咨询公司OhMyCrawl中审阅了众多此类网站，并精心制作了一部视频概览，旨在帮助大家更好地理解运用Next.js等框架对搜索引擎优化带来的益处。

Next SEO 与其他框架有什么不同？

Next SEO 通过将众多功能与免费工具整合进一个结构严谨的软件包，使得用户能够轻松地操作并应用于自己的单页应用，这构成了其一大优势。在搜索引擎优化、图像优化以及最小化布局转换等方面，Next 表现出色。

Next.js在搜索引擎优化方面的优势远不止这些。接下来，我们将详细阐述Next.js所提供的众多与搜索引擎相关的优质特性。

搜索引擎、SSR 和 SSG 的概念在不断发展

众多开发者与SEO领域的专业人士普遍对现行的页面构建策略以及SSR与SSG的整体范式感到满意。同时，他们对Next.js的最新12版本抱有极大的信心，因为这个版本为这两种页面生成方式提供了明确的解决方案。

然而，如同以往惯例，另一款网络应用程序的演变进程正悄然展开，这次变革以React服务器端组件（RSCs）为载体，而Next.js的第十三版已将这些组件纳入其中作为默认配置。

SEO 的概念没有改变--只是方法改变了

Next.js的SEO理念基本保持不变。若想实现出色的搜索引擎排名和流量提升，核心要素依然是页面的快速加载、高效渲染以及减少累积布局变化等。静态页面依旧占据着至关重要的地位。

然而，Next.js 拥有众多卓越且独特的特性，这些特性能显著提升我们的搜索引擎优化效果，而它所提供的远不止 React 服务器组件那么简单。

我们将讨论一系列优秀做法，并介绍多种技术和方法，用以在 Next.js 中实现卓越的搜索引擎优化（SEO）效果。同时，我们还将展示如何运用 Next.js 的独有特性，来增强网站在搜索引擎中的排名（优先展示）以及提升用户的互动程度。

Next.js 13 有哪些与 SEO 相关的新内容？

我们无法提供第13版技术变革的详尽指导，转而聚焦于Next JS在搜索引擎优化方面的优势。同时，我们也会讨论如何运用最有效的SEO策略，以在搜索引擎中获得最佳排名，并且在这个过程中，你将感受到精力上的显著节省。

我们将在这里讨论的 Nextjs 13 变化如下：

Next.js 版本 13 的 SEO 优化，除了依托于其内置的 SEO 功能外，还以这些特定的功能升级为基础。每一个升级都具备独特的优势，我们计划在不久的将来，逐一为大家详细介绍。

React 服务器组件

RSCs 允许在客户端和服务器上采用更精细的渲染方式。

React赋予了开发者自主权，他们可以自主决定组件是在服务器端还是客户端进行渲染，无需在用户发起请求时被动地决定整个页面的渲染位置是客户端还是服务器端。这样的设计使得开发者能够在大搜素引擎的结果页面上拥有显著的优势。

当前，大部分的页面优化工作都集中在降低向用户终端传输JavaScript的量。毕竟，减少这一部分内容是采用预渲染和服务器端渲染技术构建网页及HTML页面的核心优势所在。

RSC作为辅助达成该目标的工具之一，能够从你的网页或单页应用中提取出最大的SEO效益。它通过更新React组件中的动态数据，同时保留页面静态内容的完整性，进而提升SEO效果。

流式 UI 块

Next.js在引入RSC（React服务器组件）功能后，实现了显著的SEO提升，而流式UI（Streaming UI）代码块更是为其增添了光彩。流式用户界面代表了一种新兴的设计范式，这种模式被称作岛屿架构，其核心目标是在应用程序初次启动时，尽可能减少向用户终端传输的代码量。

细粒度的控制做得相当出色，然而，为何不先向用户端推送一个无需借助JavaScript即可完全呈现的网页页面，之后再逐步传输其余内容呢？这正是流式UI代码块所追求的宗旨。

在服务器端渲染页面时，Next.js 常规操作是将页面中的所有 JavaScript 代码打包后一同传输。然而，流式 UI 代码块技术的应用，消除了这一步骤，使得我们可以向客户端发送一个极小的静态页面。这一改进显著提升了首次内容展示速度和整体页面加载速度等性能指标。

Next.js 13 App 目录

启动 Next.js 13 新项目后，你会看到名为“app”的目录。该目录内所有内容均已预先设置，旨在支持 RSCs 和流媒体 UI 块的展示。此时，你只需构建一个名为“loading.js”的组件，该组件将全面覆盖页面组件及其内部的任何子节点。

您可以通过亲自设定悬念分界点来达到更细致的加载效果，这样在初始请求阶段，您能够对要加载的信息进行几乎无限制的调控。

流式 UI 代码块的步骤大致如下：

这种新型工具对技术性SEO领域产生了显著的影响，它使得交互性更强的页面得以与静态页面展开竞争，同时提升了页面的加载速度以及其他在搜索引擎排名中扮演重要角色的指标。

升级的 Next Image 组件

Next.js在SEO方面的又一显著提升体现在其图片组件（Image component）上。尽管这一功能常被忽视，但我认为其中最显著的进步在于它实现了原生的懒加载功能。

浏览器对本地资源的延迟加载功能已实施了一段时间，而额外添加JavaScript代码来支持这一功能，实则只是徒增了网络带宽的消耗。

其他一些对 SEO 有很大帮助的改进是：

总体而言，这款新的图片模块经历了简化与精炼的过程，同时，在编程领域，简洁的设计往往更为优越。

Next Font 组件

字体组件对于Next.js的搜索引擎优化而言，堪称一大突破，它无疑将有效缓解未来可能出现的诸多困扰。经验丰富的开发者都深知，合理设置字体是一项相当复杂的工作（在此情形下，所谓的“正确”并非模棱两可的！）。

由于页面加载速度较慢，常常会引起布局的累积性变动，这一问题十分普遍。谷歌等搜索引擎已明确指出，CLS（累计布局偏移的缩写，用于衡量网页生命周期内所有意外布局偏移的总得分）是一个关键的性能指标。

运用您所采用的架构（例如 Gatsby），确保字体得以高效预加载或许会面临挑战。长期以来，向谷歌等字体资源库发起外部调用已成为一种不可避免的不雅举动，这在众多单页应用程序（SPA）中形成了一个难以掌控的瓶颈。

Next Font Component 的设计宗旨在于解决这一问题，该组件在构建过程中会收集所有外部字体，并将它们托管在自己的域下。同时，字体还得到了自动优化，并且通过CSS中的size-adjust（大小调整）属性，实现了布局转移的零累积效果。

用 Next.js 完成与 SEO 相关的常见任务

在为Next.js 13进行常规SEO任务配置的过程中，存在一些关键问题必须加以关注。

Next.js 13 的 SEO

Next.js中的React Head组件通常用于为文档头部（Head）的元标签设置属性，同时也可用于引入结构化信息。

然而，在 Nextjs13 中，Head 组件已经不再存在。最初，Next 选择了借助一个名为 head.js 的特定文件，其运作原理与 Head 组件相似。自 13.2 版本起，Next 引入了 Metadata 组件，这代表了一种更为专有的解决方案，它能够通过便捷地填充元标签来有效处理元数据问题。

让我们逐一审视这两个常遇的搜索引擎优化任务，同时回顾它们以往的处理方法，而非考察最新第13版的方法。

如何为搜索引擎优化配置头部标签（head tag）

在13版问世之前，我们通常会引入Next/Head组件，并在网页的HTML文档中对必要的元数据信息进行配置，例如设定标题、描述以及其他的元标签。

12 版中 Head 组件的一个简单例子是这样的：

import Head from 'next/head';
const structData = {
  '@context': 'https://schema.org',
  '@type': 'BlogPosting',
  headline: 'Learning Next.js SEO',
  description: 关于Next.js的各项特性及其他内容。,
  author: [
    {
      '@type': 'Person',
      name: 'Jane Doe'
    }
  ],
  datePublished: '2023-02-16T09:00:00.000Z'
};
function IndexPage() {
  return (
    <div>
      <Head>
        <meta name="viewport" content=设置初始缩放比例为1.0，同时宽度设置为设备宽度。 />
        <title>My page titletitle>
        <script
          key="structured-1"
          type="application/ld+json"
          dangerouslySetInnerHTML={{html等于JSON.stringify(structData)的调用结果。
        />
      Head>
      <p>Hello world!p>
    div>
  );
}
export default IndexPage;

在网页的元信息部分，加入具有组织性的数据内容，这涉及诸如设定标题、描述以及添加其他补充性的元标签等操作。实际上，这并非复杂的问题，只需在页面中插入一个带有dangerouslySetInnerHTML属性的脚本标签，正如示例中所演示的那样。

许多开发者会创建一个基于 Head 组件的 SEO 组件，目的在于采用更多避免重复的编程策略。通过这种方式，可以避免相同的数据或 HTML 文件被反复发送给用户。然而，在技术层面，Head 组件仍然是优化网页元标签的首选手段。

Next 特殊的 head.js 文件

在第13版中，Head组件的使用可以完全忽略。自13版的首个迭代起，Next引入了head.js（或.tsx）文件。此文件可放置于应用程序目录的任意子文件夹中，用于动态处理SEO元数据，并指定哪些标签及其对应值将应用于特定的路由和页面。

在应用程序的目录结构中，每个单独的文件夹代表了一条独立的路径。因此，为了设定相应的元数据信息，你需要在每个文件夹内部建立一个名为 head.js 的配置文件。以下是一个 head.js 文件的示例：

export default function Head(params) {
  return (
    <>
      <title>head.js Exampletitle>
    
  );
}

我们需注意，所提供的是一段 React 片段，非真正的 head 标签或类似元素。这构成了 head.js 组件不可或缺的特性之一。

您只能提取以下元数据标签：、、（带有优先级属性）以及（带有异步属性）。

Next 永远未能使该组件得到充分完善，正因如此，众多开发者转而自行构建了结构化数据的解决方案。然而，Next 随后确实提出了将结构化数据融入布局或页面组件的建议，这一点我们将在稍后的讨论中展开。

该组件自13.2版本起已不再被支持，Vercel团队已转向采用Metadata组件。

Next Metadata 组件

Next 13.2 版本的推出之际，Next 团队作出决策，将不再采用 head 组件，转而自主研发了 Metadata 组件。

撰写此文之际，尚未广泛采纳诸如实例等素材。实际上，第13.2版尚未问世，目前我们所处的阶段仅停留在13.1.7-canaray。

尽管存在这些限制，Next公司在他们的文件中依然展现了一种出色的表述方式，因此我们将仔细研究其用法，并对其进行初步解读。若你希望在Next.js的搜索引擎优化领域取得成绩，那么掌握这些知识至关重要，因为这一领域的发展趋势即将显现。

Metadata组件致力于打造一个综合性平台，旨在以高效便捷的方式为网页的head标签添加标题、描述等动态元数据。其使用过程相当简便，只需从页面组件中导出名为metadata的对象，或者调用名为generateMetadata的函数即可。

让我们来看看一个基本的使用例子：

Next.js export metadata 例子

examplePage.tsx

import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Example component',
description: 'Learning Next.js SEO',
};
export default function Page() {
return (
<>
<div>Example page component…div>
)   
}

该操作将自动为examplePage.tsx组件添加相应的HTML标签，并赋予其指定的数据值。

metadata组件同样配备了一套预设的标签，这些标签会自动配置相应的charset和viewport元标签。


"utf-8" />
<meta name="viewport" content=设置宽度为设备宽度，初始缩放比例为1。 />

Next.js中展示如何导出生成元数据功能的示例

在众多应用软件中，尤其是那些涉及电子商务的，我们常常需要处理动态更新元标签的任务，目的是保证这些信息能够实时同步并准确反映数据库或其他数据存储中的变动。

针对此类状况，Next.js 配备了 generateMetadata 这一功能，该函数可从任意页面组件中提取信息，并且可以与执行获取或注入所需数据的必要API调用相结合使用。

以下是一个利用该方法的示例页面组件：

pageExample.tsx

import type { Metadata } from 'next';
async function getInfo(id) {
  const res = await fetch(`https://someapi/product/${id}`);
  return res.json();
}
export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getInfo(params.id);
  return { title: product.title };
}
export default async function Page() {
  return <div>Example page…div>;
}

正如您所目睹的，我们设计了一套流程，用以从API获取产品相关资讯，并在我们的generateMetadata函数中实施这一流程，进而完成title属性的填充。这一操作最终会在我们生成的HTML页面中确立标题标签（title tag）。

值得注意的是，generateMetadata这一函数的使用范围仅限于服务器组件之中，这一点我们之前已有过讨论。需牢记，位于app目录之下的所有组件均被系统自动设置为默认的服务器组件。

关于Metadata组件所支持的属性及其扩展功能的详细清单，请参阅相关文档。其中，几乎涵盖了您所能想到的所有功能，且实现起来相对简便。

如何用 Next 13 实现结构化数据

接下来，我们建议将结构化的JSON-LD数据融入布局或页面组件之中。坦白讲，这实际上是一种更为简便的途径，因为谷歌从未明确表示过要将结构化数据排除在页面内容之外。

实际上，这已成为一种普遍现象；至于为何众多开发者倾向于将之置于头部标签之中，其背后的原因却显得颇为神秘。

如何对版面或页面组件中嵌入结构化信息的步骤进行操作？

将结构化信息整合进某个模块，不论是在版面设计还是整个页面上，其呈现效果均如文档中所示（具体案例已摘自文档内容）：

export default async function Page({ params }) {
  const product = await getProduct(params.id);
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.image,
    description: product.description
  };
  return (
    <section>
在您的网页中添加JSON-LD代码。
      <script type="application/ld+json">{JSON.stringify(jsonLd)}script>
      {/* ... */}
    section>
  );
}