Next.js SEO 优化指南：提升网站排名的完整清单

一、metadata标签

对于 Next.js App Router，使用内置export const metadata静态参数和动态数据 generateMetadata 可以更轻松地定义这些标签。让我们看看如何做到这一点。您可以访问元数据nextjs文档以了解更多信息。

定义静态metadata

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

或者定义动态metadata

import type { Metadata, ResolvingMetadata } from "next";
 
type Params = {
  slug: string;
};
 
type Props = {
  params: Params;
  searchParams: { [key: string]: string | string[] | undefined };
};
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const { slug } = params;
 
  const post: Post = await fetch(`YOUR_ENDPOINT`, {
    method: "GET",
    next: {
      revalidate: 60 * 60 * 24
    }
  }).then((res) => res.json());
 
  return {
    title: `${post.title} | 月球基地`,
    authors: [
      {
        name: post.author || "longlikun"
      }
    ],
    description: post.description,
    keywords: post.keywords,
    openGraph: {
      title: `${post.title} | longlikun`,
      description: post.description,
      type: "article",
      url: `https://blog.eimoon.com/${post.slug}`,
      publishedTime: post.created_at,
      modifiedTime: post.modified_at,
      authors: ["https://blog.eimoon.com/about"],
      tags: post.categories,
      images: [
        {
          url: `you image url`,
          width: 1024,
          height: 576,
          alt: post.title,
          type: "image/png"
        }
      ]
    },
    alternates: {
      canonical: `https://blog.eimoon.com/${post.slug}`
    }
    
  };
}

请注意，charSet和viewport是由 Next.js App Router 自动添加的，因此您不需要定义它们。

二、json-LD数据结构

JSON-LD是一种轻量级的Linked Data格式，易于机器解析和生成，是目前应用最广泛的Linked Data格式之一。您可以使用Schema 标记生成器工具轻松地为您的网站生成 JSON-LD Schema 。例如，以下 JSON-LD Schema：

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  mainEntityOfPage: {
    "@type": "WebPage",
    "@id": "https://blog.eimoon.com"
  },
  headline: "next.js seo：完整的清单以提高您的网站排名",
  description:
    "完整的介绍nextjs中seo中的相关设置和技巧",
  image:
    "你的文章图片",
  dateCreated: "2024-01-11T11:35:00+07:00",
  datePublished: "2024-01-11T11:35:00+07:00",
  dateModified: "2024-01-11T11:35:00+07:00",
  author: {
    "@type": "Person",
    name: "longlikun",
  },
  publisher: {
    "@type": "Person",
    name: "longlikun",  
  },
  inLanguage: "zh-CN",
  isFamilyFriendly: "true"
};

你可以把它放在任何地方，无论是在head标签内部还是body标签外都可以：


import Head from "next/head";
 
export default function Page() {
  return (
    <div>
      {/* other parts */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </div>
  );
}

三、sitemap 网站地图

您的网站应该提供站点地图，以便搜索引擎可以轻松抓取和索引您的网页。对于 Next.js App Router，您可以在app下定义文件app/sitemap.ts：

import {
  getAllCategories,
  getAllPostSlugsWithModifyTime
} from "@/utils/getData";
import { MetadataRoute } from "next";
 
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const defaultPages = [
    {
      url: "https://blog.eimoon.com",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1
    },
    {
      url: "https://blog.eimoon.com/about",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.9
    },
    {
      url: "https://blog.eimoon.com/contact",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.9
    }
    // other pages
  ];
 
  const postSlugs = await getAllPostSlugsWithModifyTime();
  const categorySlugs = await getAllCategories();
 
  const sitemap = [
    ...defaultPages,
    ...postSlugs.map((e: any) => ({
      url: `https://blog.eioon.com/${e.slug}`,
      lastModified: e.modified_at,
      changeFrequency: "daily",
      priority: 0.8
    })),
    ...categorySlugs.map((e: any) => ({
      url: `https://blog.eimoon.com/category/${e}`,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.7
    }))
  ];
 
  return sitemap;
}

创建此sitemap.ts文件后，您可以访问站点地图https://blog.eimoon.com/sitemap.xml。

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://blog.eimoon.com</loc>
    <lastmod>2025-01-11T02:03:09.613Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  <!-- other pages -->
</urlset>

四、robots.txt

robots.txt应该添加一个文件来告诉搜索引擎要抓取哪些页面以及要忽略哪些页面。

对于 Next.js App Router，您无需手动定义robots.txt文件。您可以在以下位置定义 app/robots.ts：

import { MetadataRoute } from "next";
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: ["/"],
      disallow: ["/search?q=", "/admin/"]
    },
    sitemap: ["https://blog.eimoon.com/sitemap.xml"]
  };
}

创建此robots.ts文件后，您可以通过访问https://blog.eimoon.com/robots.txt 查看该robots.txt文件。

User-agent: *
Allow: /
Disallow: /search?q=
Disallow: /admin
 
Sitemap: https://blog.eimoon.com/sitemap.xml

五、链接标签

对于 Next.js App Router，可以使用或generateMetadata类似于元标签部分来定义链接标签。

export const metadata: Metadata = {
  // other parts
  alternates: {
    types: {
      "application/rss+xml": "https://blog.eimoon.com/rss.xml"
    }
  },
  icons: {
    icon: [
      {
        url: "/favicon.ico",
        type: "image/x-icon"
      },
      {
        url: "/favicon-16x16.png",
        sizes: "16x16",
        type: "image/png"
      }
      // add favicon-32x32.png, favicon-96x96.png, android-chrome-192x192.png
    ],
    shortcut: [
      {
        url: "/favicon.ico",
        type: "image/x-icon"
      }
    ],
    apple: [
      {
        url: "/apple-icon-57x57.png",
        sizes: "57x57",
        type: "image/png"
      },
      {
        url: "/apple-icon-60x60.png",
        sizes: "60x60",
        type: "image/png"
      }
      // add apple-icon-72x72.png, apple-icon-76x76.png, apple-icon-114x114.png, apple-icon-120x120.png, apple-icon-144x144.png, apple-icon-152x152.png, apple-icon-180x180.png
    ]
  }
};

export const metadata: Metadata = {
  // other parts
  alternates: {
    canonical: "https://blog.eimoon.com"
  }
};

六、图片优化

图像优化也是 SEO 的一个重要部分，因为它可以帮助您的网站更快地加载。

更快的图片渲染速度将有助于提高Google PageSpeed分数，从而可以提升用户体验和SEO。

您可以使用next/image来优化 Next.js 网站中的图像。

例如，以下代码将优化此帖子缩略图：

import Image from "next/image";
 
export default function Page() {
  return (
    <Image
      src="你的图片地址"
      alt="Next.js SEO"
      width={1200}
      height={630}
    />
  );
}

七、浏览统计

Next.js App Router 引入了一个名为@next/third-parties的新库，用于：

Google 跟踪代码管理器谷歌分析谷歌地图嵌入 YouTube 嵌入

要使用该@next/third-parties库，您需要安装它：

npm install @next/third-parties

然后，您可以将以下代码添加到您的app/layout.tsx：

import { GoogleTagManager } from "@next/third-parties/google";
import { GoogleAnalytics } from "@next/third-parties/google";
import Head from "next/head";
 
export default function Page() {
  return (
    <html lang="en" className="scroll-smooth" suppressHydrationWarning>
      {process.env.NODE_ENV === "production" && (
        <>
          <GoogleAnalytics gaId="G-XXXXXXXXXX" />
          {/* other scripts */}
        </>
      )}
      {/* other parts */}
    </html>
  );
}

请注意，如果您只使用其中一个，则无需同时包含 GoogleTagManager 和 GoogleAnalytics。参考文档

总结

通过本文的指南，开发者可以全面了解如何在 Next.js 应用中进行 SEO 优化，从而提升网站的搜索引擎排名和用户体验。文章提供了详细的步骤和代码示例，帮助读者快速实现各项优化措施。

关注我获取更多资讯

📢 公众号

💬 个人号