基于Next.js的SEO技术实操指南：优化网站流量与影响力

[id_[id_[id_2[id_[id_[id_11663839[id_1409779879]]28489054]13846897]87[id_1888824500]566][id_7384[id_[id_263395161]69836]8[id_134173328]][id_16857[id_1700[id_160[id_2002233754]68737]4883]4[id_229282910]5]0[id_[id_1960358700]5929095[id_[id_331600918]98031714]]2275]935073030]

很多技术人拥有自己的博客。他们有的记录一些东西，有的则通过贴广告来赚取银子。无论是记录还是贴广告赚银子，都需要有足够的流量。

在本文里，我们会讨论一些基于 next.js 的重要 seo 技术的实际操作。这些操作能帮助你优化网站的 SEO，进而吸引更多的读者，同时扩大网站的影响力和公众影响力。

[id_243132109]

这里不多说了，你可以翻看这篇地址

什么是 SEO

搜索引擎优化的缩写是 SEO。它的作用是提高网站在谷歌、必应和百度等搜索引擎中的可见度。通过搜索引擎优化，能够提高网站在搜索结果中的排名，进而为网站带来更多流量。

搜索引擎优化是个复杂的过程，需要耗费很多时间和精力。这并非短时间内可以完成，然而倘若你希望给自身的网站带来更多流量，付出努力是有价值的。

Next.js 具备一些内在的功能，能够让您在构建网站时更加轻松，并且能使网站更利于搜索引擎收录。

实践Robots.txt

我们首先要做的事情是在网站的根目录里创建 robots.txt 文件。这个文件能够告知搜索引擎哪些页面是需要被抓取的，哪些页面是不需要被抓取的。

您可以使用以下代码创建 robots.txt 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

App 路由器的文件名为 app/robots.ts
import { MetadataRoute } from "next";

const robots: MetadataRoute.Robots = () => {
  [id_812532425] {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/private/",
    },
    sitemap: 此链接为 "https://example.com/sitemap.xml",
  };
};

export default robots;

Sitemap.xml

接下来要做的事情是在网站的根目录当中创建一个 sitemap.xml 文件。这个文件能够告知搜索引擎哪些页面是需要被抓取的，哪些页面是不需要被抓取的。

Next.js 能够为你生成 sitemap.xml 文件。你可以借助以下代码来生成 sitemap.xml 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

app 目录下有一个 sitemap.ts 文件（属于 App Router）。

import { allPosts } from "/example.ts";
import { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const blogs = allPosts;
  const URL = "https://example.com";

  const restUrls = [
    {
      url: `${URL}/`, // 首页
      lastModified: new Date(),
      priority: 1.0,
      changeFrequency: "weekly",
    },
    {
      url: `${URL}/blogs`,
      lastModified: new Date(),
      priority: 0.8,
      changeFrequency: "daily",
    },
    {
      url: `${URL}/projects`,
      lastModified: new Date(),
      priority: 0.8,
      changeFrequency: "weekly",
    },
    {
      url: `${URL}/skills`,
      lastModified: new Date(),
      priority: 0.8,
      changeFrequency: "weekly",
    },
  ];

  const allBlogs = blogs.map(({ slugAsParams, date }) => {
    return {
      url: `${URL}/blog/${slugAsParams}`,
      lastModified: new Date(date),
      priority: 0.64,
      changeFrequency: "daily",
    };
  });

  return [...restUrls, ...allBlogs];
}

我们能够利用 generateSitemaps 来为每一篇博文生成动态路由。

1
2
3
4
5
6
7
8
9
10
11

// app/sitemap.ts  (App Router)

export async function generateSitemaps() {
  return [{ id: "one" }, { id: "two" }, { id: "three" }, { id: "four" }];
}

export default async function sitemap({
  id,
}: {
  id: string,
}): Promise<MetadataRoute.Sitemap> {}

元标签优化

元标签是用于提供网站元数据的 HTML 标签。搜索引擎凭借它们来明确网站的内容，并且确定在搜索结果里的排名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

App 的布局文件是 layout.tsx，它属于 App Router 。
// app/page.tsx (App Router)

import { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  return {
    metadataBase: new URL("https://example.com"),
    title:"Name,
    description: "description",
    authors: [
      {
        name: "Site Name",
        url: "https://example.com",
      },
    ],
    twitter: {
      card: "summary_large_image",
      creator: "@example",
      images: "some-image",
    },
    robots: "index, follow",
    alternates: {
      canonical: `https://example.com`,
      languages: {
        "en-US": "/",
      },
    },
    openGraph: {
      type: "website",
      url: `https://example.com`,
      title: "name",
      description: "description",
      siteName: "Site Name",
      images: [
        {
          url: "some-image",
        },
      ],
    },
    assets: "some-image",
    keywords: [
      "keywords"
    ],
  };
}

我们也可以在 app/page.tsx 这个文件中使用 generateMetadata 函数。

如果想要每个页面都具备单独的元标记，那么在不同的页面里可以运用相同的 generateMetadata 函数。

您可以将 utils 方法提取出来，接着在您的 app/layout.tsx 这个文件里调用该函数，也可以在 app/page.tsx 文件中调用该函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// app/layout.tsx (App Router)
// app/page.tsx (App Router)

export async function generateMetadata() {
  const metaData = commonMetaData({
    name: "",
    desc: "",
    image: 该链接指向的是 "example.com/images/hero.png" 这个图片。 它是一个特定的图片资源地址。 用于在相关的网页或应用中显示对应的图片。 例如在某些网站的首页或特定页面中，可能会使用这个地址来展示英雄形象的图片。 这个地址对于获取和展示特定的图片起到了关键作用。 它是与该图片相关的唯一标识路径。 可以通过这个地址准确地找到并显示该图片。,
    url: "/",
    keywords: [],
  });
  return {
    ...metaData,
  };
}

优化图片和字体

Next.js 自身带有图像组件，此组件可用于对图像进行优化。我极力推荐使用图像组件，而非 img 标签。

Next.js 的 next/font 为我们提供了优化字体的途径。它能够自动对字体（包含自定义字体）进行优化，并且移除外部的网络请求，以此来提升隐私保护水平以及性能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// app/layout.tsx (App Router)

import { Roboto } from "next/font/google";

const roboto = Roboto({
  weight: "400",
  subsets: ["latin"],
  display: "swap",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}body>
    html>
  );
}

图片对搜索引擎优化很重要，它能帮助搜索引擎了解网站的内容。字体对搜索引擎优化也很重要，它能帮助搜索引擎了解网站在搜索结果中的排名。

它还有助于通过减少网络请求的数量来提高网站的性能。

优化第三方脚本

第三方脚本在使用它的路由被访问时会被提取。这表明只有在有需求时才会获取脚本，如此一来就减少了网络请求的数量，并且提高了性能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// app/layout.tsx (App Router)

import Script from "next/script";

const RootLayout = ({ children }表示 { children: React.ReactNode } 。 即 { children } 就是 { children: React.ReactNode } 所指代的内容 。 它意味着 { children } 具有 { children: React.ReactNode } 的特征或属性 。 可以理解为 { children } 与 { children: React.ReactNode } 是等同的 。 它们在特定的上下文中具有相同的意义和作用 。) => {
  return (
    <>
      {children}
      <Script src=该链接为 "https://example.com/script.js" 。 它指向一个特定的脚本文件。 该脚本文件可能包含用于网页或应用程序的代码。 这些代码可以实现各种功能，如交互效果、数据处理等。 它在网页开发或应用程序运行中可能起到重要作用。 例如，它可以控制页面的动态行为或与服务器进行通信。 具体的功能取决于脚本的内容和使用场景。 />
    
  );
};

export default RootLayout;

结论

Next.js 是一个能构建搜索引擎友好型网站的优秀框架。它内置的功能可以让构建搜索引擎优化友好型网站变得更为容易。

@rajreetesh7 对于 Next.js 应用的最佳 SEO 实践，其编号为 6cad24c0fb0e 。