Next.js 13 最新版本：頁面元資料、Robots、Sitemap、結構化數據的SEO教學

Next.js 13 最新版本：頁面元資料、Robots、Sitemap、結構化數據的SEO教學

目錄

1. 介紹Next.js
2. 最新版本的改進
3. 建立頁面元資料
4. 創建Robots和Sitemap內容
5. 創建結構化數據
6. 使用Schema.hyphen-dTS庫
7. 生成結構化數據對象
8. 使用結構化數據組件
9. 其他SEO功能
10. Next.js應用程序路由器解析

🚀 最新的Next.js 13版本為SEO帶來了重大改進

Next.js是一個非常流行的React框架，其主要承諾之一就是提升SEO（搜索引擎優化）效果。最新的Next.js 13版本引入了新的應用程序路由器（app router），這一改進帶來了更快的速度和減少的JavaScript加載，得益於React服務器組件（React server components）。然而，應用程序路由器的一些功能直接針對SEO需求進行了優化。讓我們一起來深入研究，首先是如何生成頁面的元資料，其次是如何創建Robots和Sitemap內容，以及如何創建結構化數據。

1️⃣ 建立頁面元資料

在Next.js中，我們可以通過在page.tx文件中的附加函數中生成頁面的元資料。generateMetadata函數的調用方式與主組件函數相同，但它返回一個帶有鍵值對的對象，這些對象定義了將注入到文檔頭部的元資料。請看下面這個例子：

import { metadata } from 'next';

export async function generateMetadata(language) {
  return {
    title: '頁面標題',
    description: '頁面描述'
  };
}

通過導入metadata，然後調用generateMetadata函數並傳遞語言參數，我們可以輕松地返回具有指定標題和描述的元資料。這在新的應用程序路由器中變得非常簡單，但在之前的版本中是不可能這樣做的。

2️⃣ 創建Robots和Sitemap內容

Robots.txt文件和Sitemap是SEO中非常重要的部分，它們告訴搜索引擎機器人在哪裡尋找網站的內容。在Next.js中，我們可以通過創建robots.ts文件來生成Robots內容。該文件導出了一個默認的函數，該函數返回一個定義了Robots文件內容的對象。例如：

export default function generateRobotsContent() {
  return {
    content: 'User-agent: *\nDisallow:/private/'
  };
}

與上述函數類似，我們可以使用sitemap.ts文件來生成動態Sitemap內容。通過返回一個定義了Sitemap內容的對象，我們可以輕鬆創建一個動態且自動更新的Sitemap。具體操作如下：

import { metadata } from 'next';

export default async function generateSitemap() {
  const URLList = ['/en', '/fr']; // 靜態URL列表

  // 獲取動態URL並添加到URL列表中
  const posts = await fetchPosts();
  posts.forEach((post) => {
    URLList.push(`/blog/${post.id}`);
  });

  // 將URL列表轉換為對象列表
  const sitemap = URLList.map((url) => ({
    URL: url,
    lastModified: new Date().toISOString()
  }));

  return sitemap;
}

如此一來，我們就能輕鬆生成一個動態且自動更新的Sitemap，這些功能的實現都得益於Next.js的新應用程序路由器。

3️⃣ 創建結構化數據

SEO的另一個重要方面是以易於被搜索引擎機器人解析的格式呈現數據。這就是結構化數據的理想應用場景，結構化數據是一種標準化的格式，可以準確告訴搜索引擎機器人頁面的內容，從而提高網站的可見性和點擊率。那麼，我們該如何在網站中添加結構化數據呢？

以博客文章為例，我們可以使用結構化數據模式（Schema.org）來添加結構化數據。使用結構化數據庫表來生成結構化數據可以保證提供具有正確結構的數據。以下是一個使用結構化數據模式庫的示例：

import { blogPosting } from 'schema-dts';

export function generateStructuredData(contentData) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: contentData.title,
    description: contentData.description,
    author:
      {
        '@type': 'Person',
        name: '作者名字'
      },
    image: contentData.image,
    datePublished: contentData.publicationDate
  };

  return schema;
}

通過上述代碼，我們可以使用結構化數據模式庫來簡單地生成結構化數據對象。這些數據對象可以通過結構化數據組件渲染為符合Google標準的LV + JSON腳本格式。具體代碼如下：

export function StructuredData({ data }) {
  return (
    <script type="application/ld+json">
      {JSON.stringify(data)}
    </script>
  );
}

將這個組件添加到我們的頁面並傳遞數據，就能夠在網站中展示結構化數據。我們可以在網站中利用結構化數據顯示FAQ等其他信息。詳細的結構化數據類型定義可以在schema.org網站上找到。

上述功能都是由Next.js的應用程序路由器提供的，非常容易實現。如果您想更好地理解應用程序路由器的工作原理，可以觀看我的相關視頻。如果您還想了解如何翻譯使用應用程序路由器的Next.js應用程序，也可以參考相關視頻。如果您有其他想了解的主題，請在評論中告訴我，我會將它們添加到說明中。期待下一個視頻與你再次見面！