搜索引擎优化（SEO）与Next.js的支持

最新推荐文章于 2025-06-04 15:15:11 发布

懒得跟猪打架

最新推荐文章于 2025-06-04 15:15:11 发布

阅读量2.3k

点赞数

分类专栏： react没入门就放弃文章标签：搜索引擎 javascript react.js

本文链接：https://blog.csdn.net/u011024243/article/details/129471076

版权

本文深入探讨了搜索引擎优化（SEO）在Next.js中的应用，包括理解SEO的重要性、SEO的三大支柱（技术、创建和受欢迎程度）、搜索引擎的工作原理、网络爬虫的运作、HTTP状态码的含义、robots.txt文件、XML站点地图的使用以及特殊Meta标签。重点讨论了Next.js如何支持SEO，如渲染策略、页面性能和核心网页指标的优化，以及如何通过动态导入和next/image组件提升页面加载速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SEO介绍：Search Engine Optimization

什么是SEO

SEO 就是搜索引擎优化。SEO的目标是创建一个策略，以提高您在搜索引擎结果中的排名。排名越高，您网站的自然流量就越多，最终为您带来更多业务！

我们下面将探讨：

搜索系统，以及谷歌机器人等搜索引擎机器人。

拥有SEO策略可以对您的网站产生的影响。

如何整合最佳SEO实践。

使用 Next.js 进行爬网、索引、呈现和排名。

Web 性能主题，包括核心 Web 指标。

为什么SEO如此重要？

SEO是提高转化率和品牌信心的关键。更高的搜索排名位置等同于更多的自然访问者。搜索引擎自然流量 - 通过点击搜索引擎中的结果来到您网站的访问者 - 是许多商业的关键，原因有三：

高质量 – 增加访客变成客户的机会。

值得信赖 – 对您的品牌或使命更有信心。

低成本 – 除了花费的时间和精力外，拥有良好的 SEO 实践可以带来更高的搜索引擎排名是免费的。出现在自然搜索结果的顶部位置没有直接费用。

优化的三大支柱

优化网站的过程可以分为三个主要支柱：

技术 – 优化您的网站以提高抓取和网络性能。

创建 – 创建内容策略以定位特定关键字。

受欢迎程度 – 提高您网站的在线影响力，以便搜索引擎知道您是值得信赖的来源。这是通过使用反向链接来完成的——链接回您网站的第三方网站。

SEO学科很广泛，有很多方面，但作为Next.js开发人员，第一步是了解如何通过一些最佳实践使您的Web应用程序为SEO做好准备。

搜索系统

搜索系统是你通常所说的搜索引擎（谷歌，必应，鸭鸭Go等）。它们是极其复杂的系统，可以解决技术史上一些最大的挑战。

搜索系统有四个主要职责：

爬行——浏览网络并解析所有网站内容的过程。这是一项艰巨的任务，因为有超过 3.5 亿个域名可用。

索引——寻找存储在爬行阶段收集的所有数据的地方，以便可以访问。

渲染——执行页面上的任何资源，例如可能增强网站功能和丰富网站内容的 JavaScript。这个过程不会发生在所有被抓取的页面上，有时它发生在内容被实际索引之前。如果当时没有可用资源来执行任务，则可能会在索引之后进行渲染。

排名——查询数据以根据用户输入制作相关的结果页面。这是在搜索引擎中应用不同排名标准的地方，以便为用户提供实现其意图的最佳答案。

什么是网络爬虫

为了让您的网站出现在搜索结果中，Google（以及其他搜索引擎，例如 Bing、Yandex、Baidu、Naver、Yahoo 或 DuckDuckGo）使用网络爬虫来导航网站以发现网站及其网页。

不同的搜索引擎在每个国家拥有不同的市场份额。

在本指南中，我们介绍了 Google，它是大多数国家/地区最大的搜索引擎。也就是说，您可能需要查看其他搜索引擎及其指南，尤其是当您的目标客户位于中国、俄罗斯、日本或韩国时。

虽然在排名和呈现方面存在一些差异，但大多数搜索引擎在抓取和索引方面的工作方式非常相似。

网络爬虫是一种模拟用户并通过网站上的链接导航以索引页面的机器人。网络爬虫使用自定义用户代理（User-Agent）来识别自己。 Google 有多种网络爬虫，但使用较多的是 Googlebot Desktop 和 Googlebot Smartphone。

以Googlebot 的工作原理为例，Googlebot 是 Google 的互联网爬虫，是搜索系统的一部分，它收集创建海量内容数据库以提供搜索结果所需的所有信息。

Googlebot 为网页编入索引的过程

该过程的一般概述如下：

查找 URL：Google 从许多地方获取 URL，包括 Google Search Console、网站之间的链接或 XML 站点地图。

添加到抓取队列：这些 URL 被添加到抓取队列以供 Googlebot 处理。 Crawl Queue 中的 URL 通常会在那里持续几秒钟，但视情况而定可能长达几天，特别是如果页面需要渲染、编入索引，或者——如果 URL 已经编入索引——刷新。然后页面将进入渲染队列。

HTTP 请求：爬虫发出 HTTP 请求以获取标头并根据返回的状态代码执行操作：

200 - 它抓取并解析 HTML。

30X - 它遵循重定向。

40X - 它将记录错误并且不加载 HTML

50X - 它可能会稍后回来检查状态代码是否已更改。

渲染队列：搜索系统的不同服务和组件处理 HTML 并解析内容。如果页面有一些基于 JavaScript 客户端的内容，则 URL 可能会添加到渲染队列中。渲染队列对谷歌来说成本更高，因为它需要使用更多资源来渲染 JavaScript，因此渲染的 URL 在互联网上的总页面中所占的百分比较小。其他一些搜索引擎可能不具备与 Google 相同的渲染能力，而这正是 Next.js 可以帮助您制定渲染策略的地方。

准备好被索引：如果满足所有条件，页面可能有资格被索引并显示在搜索结果中。

抓取和索引

接下来我们来看看一下几个问题：

HTTP 状态代码基础知识。

元数据以及网络爬虫在解析 Web 内容时查找的内容。

如何与 Google 沟通，以便其搜索抓取工具知道您网站上何时有新内容。

如何利用元机器人标签和规范链接向搜索引擎指示您想要的索引状态。

什么是HTTP 状态码（Status Codes）?

HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。有许多状态代码，但只有少数在SEO上下文中有意义。现在让我们来看看它们。

表示请求已成功。

为了在谷歌上将页面编入索引，页面必须返回200状态码。这是您通常希望在页面中寻找的内容，以便它们获得自然流量。这是 Next.js 成功渲染页面时将设置的默认代码。

301/308

HTTP 301 永久移动重定向状态响应代码指示请求的资源已最终移动到目标 URL。

这是一个永久重定向。通常，这是使用最广泛的重定向类型。

出于多种原因可以使用重定向，但最主要的是指示 URL 已从 A 点移动到 B 点。

需要重定向以确保，如果内容从一个地方移动到另一个地方，您不会失去当前和潜在的客户，并且机器人可以继续为您的网站编制索引。

Next.js永久重定向默认使用308而不是301，因为它是较新的版本，被认为是更好的选择。

301和308两者间的主要区别在于301 允许将请求方法从 POST 更改为 GET，而308不允许。

您可以在 Next.js 中触发 308 重定向方法是在 'getStaticProps（）' 函数中返回redirect重定向而不是 props。

export async function getStaticProps(context) {
  return {
    redirect: {
      destination: '/',
      permanent: true, // triggers 308
    },
  };
}

您还可以在 next.config.js 中设置的redirects集合： permanent: true 。

//next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true, // triggers 308
      },
    ];
  },
};

指示请求的资源已临时移动到目标 URL。

在大多数情况下，302 重定向应该是 301 重定向。如果您将用户临时重定向到某个页面（例如促销页面），或者您根据位置重定向用户，则可能并非如此。

指示服务器找不到请求的资源。

一般情况下，应使用 HTTP 301 状态代码将移动的页面重定向到新位置。如果未发生这种情况，URL 可能会返回 404 状态代码。

默认情况下，404状态代码不一定是坏的，因为如果用户碰巧访问不存在的URL，这是理想的结果，但它们不应该是页面中的常见错误，因为它可能导致搜索排名下降。

Next.js将自动为应用程序中不存在的 URL 返回 404 状态代码。

在某些情况下，您可能还希望从页面返回 404 状态代码。这时候可以通过返回以下内容来代替props来达到此目的：

export async function getStaticProps(context) {
  return {
    notFound: true, // triggers 404
  };
}

您可以通过创建 pages/404.js 创建一个在构建时静态生成的自定义 404 页面。

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}

指示源服务器不再可以访问目标资源，并且此情况可能是永久性的。

这并不经常使用，但如果您要删除网站上不再存在的内容，则可能需要用到此状态代码。

使用 HTTP 410 消失可能是明智之举的示例包括：

电子商务：商品已从库存中永久移除。

论坛：已被用户删除的话题。

博客：已从网站移除的博客文章。

此状态代码通知机器人不应再返回来对此内容进行爬网。

指示服务器遇到阻止其完成请求的意外情况。

Next.js将自动返回 500 状态代码，用于意外的应用程序错误。您可以通过创建 pages/500.js 来创建在构建时静态生成的自定义 500 错误页面。

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>;
}

指示服务器尚未准备好处理请求。

建议在网站关闭时返回此状态代码，并且您预测网站将在较长时间内关闭。这可以防止长期失去排名。

什么是robots.txt文件？

robots.txt是一个文本文件，用于指示网络爬虫（搜索引擎蜘蛛）哪些页面可以被访问，哪些页面不能被访问。该文件通常位于网站的根目录下，可以通过在浏览器中输入网站地址后加上“/robots.txt”来访问。该文件的作用是帮助网站管理员控制搜索引擎对网站内容的访问和抓取，保护网站的安全和隐私。

您可能希望保护网站的某些区域不被抓取并因此被索引，例如您的 CMS 或管理员、电子商务中的用户帐户或某些 API 路由等。

这些文件必须在每个主机的根目录中提供，或者您可以将根 /robots.txt 路径重定向到目标 URL，大多数机器人都会遵循。

由于 Next.js 中的静态文件服务我们可以轻松添加“robots.txt”文件。我们将在根目录中的public目录下创建一个名为“robots.txt”的新文件。

放置的内容的示例如下：

//robots.txt

# Block all crawlers for /accounts
User-agent: *
Disallow: /accounts

# Allow all crawlers
User-agent: *
Allow: /

注意：不要将public目录命名为任何其他名称。该名称无法更改，并且是唯一用于提供静态资源的目录。

XML 站点地图

站点地图是与 Google 沟通的最简单方式。它们会指示属于您网站的网址以及更新时间，以便 Google 可以轻松检测新内容并更有效地抓取您的网站。

尽管XML站点地图是最知名和最常用的站点地图，但它们也可以通过RSS或Atom创建，如果您更喜欢最大的简单性，甚至可以通过文本文件创建。

站点地图是一个文件，您可以在其中提供有关您网站上的网页、视频和其他文件以及它们之间的关系的信息。像谷歌这样的搜索引擎会读取此文件，以更智能地抓取您的网站。

根据谷歌，在以下情况下，您可能需要站点地图：

您的网站非常大。因此，Google 网络抓取工具更有可能忽略抓取您的某些新网页或最近更新的网页。

您的网站有大量内容页面存档，这些内容页面是孤立的或彼此链接不紧密的。如果您的网站网页没有自然地相互引用，您可以在站点地图中列出它们，以确保 Google 不会忽略您的某些网页。

您的网站是新的，几乎没有外部链接。Googlebot 和其他网络抓取工具通过跟踪从一个网页到另一个网页的链接来浏览网络。因此，如果没有其他网站链接到您的网页，Google 可能无法发现这些网页。

您的网站包含大量富媒体内容（视频、图片）或显示在 Google 新闻中。如果提供，Google 可以在适当的情况下考虑站点地图中的其他信息以进行搜索。

虽然站点地图对于出色的搜索引擎性能不是强制性的，但它们可以促进抓取和索引到机器人，因此您的

最低0.47元/天解锁文章