Next.js动态站点地图和SEO元数据教程

Try Proseoai — it's free

AI SEO Assistant

SEO Link Building

SEO Writing

Home SEO-zh Next.js动态站点地图和SEO元数据教程

Next.js动态站点地图和SEO元数据教程

介绍 🌟
构建网站使用的工具和框架 🔧
简介页面和帖子 🔍
为网站生成动态站点地图 🗺️
设置元标签以优化 SEO ⚙️
添加开放图谱和 Twitter 卡片 📷
设置规范 URL 🖇️
在 Google 搜索控制台中添加和提交网站地图 ☑️
创建博客页面的元标签的可重用函数 🔁
总结和下一步 🏁

介绍 🌟

嗨大家好！今天我要向大家展示一个我用Next.js 13 构建的网站，它使用了App Router，并且我想为这个网站添加一个动态站点地图和一些其他的元标签。

构建网站使用的工具和框架 🔧

这个网站是使用Tailwind UI模板构建的，所以并不是所有的东西都是我自己制作的。我是基于一个Tailwind UI模板进行构建的。同时，它还使用了App Router。这是一个真实的网站，我一直在上面进行实验，这个网站是一个旅行博客。

简介页面和帖子 🔍

首先，我想要谈论的是网站地图，这是与SEO相关的最重要的事情之一，因为你希望让Google知道你的网站存在，并向Google和其他搜索引擎提供有关你网站上的页面的信息。要生成一个站点地图，在Source app下新建一个名为 sitemap.ts 的文件。由于这个站点规模非常小，所以页面只有主页(home page)和关于页面(about page)，此外还有在“posts”文件夹下的一些博文页面。我们将生成一个站点地图来告诉搜索引擎网站上的所有页面。

为网站生成动态站点地图 🗺️

根据Next.js文档提供的静态站点地图示例，我们可以直接将一个站点地图放入app目录，并直接访问它(通过sitemap.xml文件)。但这种方式没有办法生成一个动态的站点地图。对于这样一个小网站来说，这是一个好的解决方案。因此，我们将在sitemap.ts文件中添加一些代码。我们要返回一个包含URL的数组。

const routes = [
  "/", // 主页
  "/about", // 关于页面
  "/posts/best-pizza-in-denver", // 博客文章页面
]

const sitemap = routes.map(route => ({
  url: `${process.env.SITE_URL}${route}`, // 形成完整的URL
  lastModified: new Date().toISOString(), // 最后修改日期
  changeFrequency: "daily", // 频率
}))

export default sitemap

接下来，我们需要将这些URL声明为我们页面的请求路径，并生成XML格式的站点地图。我们可以使用类似于下面的代码将此站点地图显示在sitemap.xml中：

import sitemap from "./sitemap.ts"

export async function getServerSideProps({ res }) {
  res.setHeader("Content-Type", "text/xml")
  res.write(createSitemapString(sitemap))
  res.end()
}

function createSitemapString(sitemapData) {
  // 生成XML格式的站点地图并返回
}

设置元标签以优化 SEO ⚙️

在使用App Router时，元标签的设置有了一些变化，现在可以在layout中设置元标签。下面是一个包含一些常见元标签的例子：

import { Head } from "next/document"

function Layout({ children }) {
  return (
    <>
      <Head>
        <title>网站标题</title>
        <meta name="description" content="网站描述" />
      </Head>
      {children}
    </>
  )
}

在这个例子中，我们设置了标题和描述元标签。现在，我想要添加一些其他的元标签，举个例子，这里是一个包含开放图谱数据和Twitter卡片的元标签设置：

import { Head } from "next/document"

function Layout({ children }) {
  const metadata = {
    title: "网站标题",
    description: "网站描述",
  }

  return (
    <>
      <Head>
        <title>{metadata.title}</title>
        <meta name="description" content={metadata.description} />
        <meta property="og:title" content={metadata.title} />
        <meta property="og:description" content={metadata.description} />
        <meta property="og:image" content="/path/to/og-image.jpg" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      {children}
    </>
  )
}

添加元标签可以提高网站的SEO，使其在搜索引擎结果中更易于发现。

添加开放图谱和 Twitter 卡片 📷

开放图谱和Twitter卡片是在分享网站链接时生成的预览图像和标题。对于每个网页，你可以在head中添加这些元标签。以下是一个带有开放图谱和Twitter卡片的元标签的示例：

import { Head } from "next/document"

function Layout({ children }) {
  const metadata = {
    title: "网站标题",
    description: "网站描述",
  }

  return (
    <>
      <Head>
        <title>{metadata.title}</title>
        <meta name="description" content={metadata.description} />
        <meta property="og:title" content={metadata.title} />
        <meta property="og:description" content={metadata.description} />
        <meta property="og:image" content="/path/to/og-image.jpg" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      {children}
    </>
  )
}

在这个例子中，我们添加了Open Graph图像和Twitter卡片的元标签。你可以将自定义图像上传到你的网站，并在这些元标签中使用URL来引用它们。

设置规范 URL 🖇️

规范URL是指为网页设置主URL，以避免重复内容的问题。通过添加一个规范URL元标签，你可以告诉搜索引擎哪个URL是主URL，并避免搜索引擎对重复内容进行索引。在我们的示例中，我们将规范URL设置为主URL，如下所示：

import { Head } from "next/document"
import { SITE_URL } from "../../lib/constants"

function Layout({ children }) {
  const metadata = {
    title: "网站标题",
    description: "网站描述",
  }

  return (
    <>
      <Head>
        <title>{metadata.title}</title>
        <meta name="description" content={metadata.description} />
        <meta property="og:title" content={metadata.title} />
        <meta property="og:description" content={metadata.description} />
        <meta property="og:image" content="/path/to/og-image.jpg" />
        <meta name="twitter:card" content="summary_large_image" />
        <link rel="canonical" href={SITE_URL} />
      </Head>
      {children}
    </>
  )
}

在这个例子中，我们使用了一个名为SITE_URL的常量，它指向我们网站的主URL。这样，当搜索引擎遇到重复的内容时，就会知道哪个是主URL。

在 Google 搜索控制台中添加和提交网站地图 ☑️

为了让Google知道你的网站存在并索引你的网页，你需要将网站和站点地图添加到Google搜索控制台。你可以按照以下步骤进行操作：

使用你的Google账号登录到Google Search Console。
在顶部的搜索框中输入你的域名，并添加你的域名。
点击左侧菜单中的站点地图。
输入你的站点地图URL，例如：https://your-website.com/sitemap.xml。
提交并等待Google处理你的站点地图和网页。

通过添加和提交站点地图，你可以确保Google搜索引擎会索引你的网页，并将其显示在搜索结果中。

创建博客页面的元标签的可重用函数 🔁

为了避免重复代码，当显示博客页面时，我们可以创建一个可重用的函数来生成元标签。以下是一个示例：

function createArticleMetadata(title, description, slug) {
  const metadata = {
    title,
    description,
  }

  const url = `${SITE_URL}/posts/${slug}`

  const articleMetadata = {
    ...metadata,
    type: "article",
    images: [
      `${SITE_URL}/path/to/image.jpg`,
    ],
  }

  const twitterCardMetadata = {
    ...metadata,
    card: "summary_large_image",
    images: [
      `${SITE_URL}/path/to/image.jpg`,
    ],
  }

  const canonicalMetadata = {
    canonical: url,
  }

  return {
    articleMetadata,
    twitterCardMetadata,
    canonicalMetadata,
  }
}

通过使用这个函数，我们可以在博客页面中轻松添加和更新元标签，减少了重复代码。

总结和下一步 🏁

通过本文，我们学习了如何为基于Next.js的网站生成动态站点地图和添加元标签以优化SEO。我们还了解了如何添加开放图谱和Twitter卡片，以及如何设置规范URL。最后，我们还介绍了将网站和站点地图提交给Google搜索控制台的步骤。接下来，你可以进一步优化你的网站，为每个页面添加自定义的元标签，并监控你在搜索引擎中的排名。

FAQ

Q：如何添加Google Analytics？
A：你可以将Google Analytics代码嵌入到你的网站中以跟踪访问者的行为。首先，在Google Analytics中创建一个新的帐户并获取跟踪ID。然后，在你的网站的head或footer中添加Google Analytics代码。

Q：如何在页面中添加自定义元标签？
A：你可以在每个页面的metadata对象中添加自定义元标签。例如，你可以添加一个自定义的meta标签，用于指定页面的作者或其他信息。

Q：如何创建一个动态站点地图，以确保每当添加新的博客文章时，地图也会更新？
A：你可以在构建过程中生成动态站点地图，并在每次添加新的博客文章时更新地图。你可以使用Next.js的构建钩子来实现这一点，每当博客文章被添加或更新时，都重新生成地图。

资源

Are you spending too much time on seo writing?

SEO Course: 1M+
SEO Link Building: 5M+
SEO Writing: 800K+

WHY YOU SHOULD CHOOSE Proseoai

Proseoai has the world's largest selection of seo courses for you to learn. Each seo course has tons of seo writing for you to choose from, so you can choose Proseoai for your seo work!

Browse More Content