BackEnd

Next.jsでサイトマップの実装

投稿日:

はじめに

Next.jsでサイトマップの実装を行う方法を調べたので簡単にまとめてみたいと思います。

Sitemapとは

Google などの検索エンジンが効率的にクロールを行う為に、サイト上のページや動画などのファイルについての情報や、各ファイルの関係を伝えるファイルです。

ここでは深く触れませんが、各ページのURL、ページの更新頻度、最終更新日、ページの優先度などをの情報を検索エンジンに提供してインデックス促進してSEO強化します。

基本的な実装方法

Next.jsではサイトマップ生成用の sitemap.ts ファイルでsitemap.xmlを実装します。
app直下に配置します。

Sitemap 型オブジェクトの配列を返す sitemap() 関数を実装しています。
Sitemap 型では、主に以下のパラメーターを設定します。

  • url:ページのURL、必須項目
  • lastModified:最終更新日
  • changeFrequency:更新頻度
  • priority:ページのクローリング優先度

実装後にhttp://localhost:3000/sitemap.xmlで確認すると以下の様にサイトマップが生成される事が確認出来ます。

 

動的に生成

今度は動的にURLを生成してサイトマップを生成してみたいと思います。

サイトマップ生成時にAPIで取得した値を元にして各URLを設定しています

以下の様に、それぞれのURLが生成されます

 

複数ファイルの生成

大規模サイト向けなど複数のサイトマップファイルを配置したい場合もあるかと思います。
その場合は generateSitemaps 関数を使用することが出来ます。

上記例でいうと、クエリパラメーターに id の値を持たせて、 generateSitemaps 関数で生成したteamID毎にサイトマップファイルを生成して、各チームの選手のプロフィールURLを含んでいる形です。
今回はteam_idを固定値としていますが、ここの値もAPI等で動的に取得することも可能です。
generateSitemapsn の特徴は以下のようになっています。

  • idプロパティを持つオブジェクトの配列を返却している。
  • このidプロパティが生成される各xmlファイルの番号になっている。
  • 今回なら、http://localhost:3000/sitemap/1.xml、http://localhost:3000/sitemap/2.xml、http://localhost:3000/sitemap/3.xmlの 3つのサイトマップファイルが生成されている

生成結果はそれぞれ、以下の様になります。

さいごに

Next.jsでサイトマップを実装してみました。
ファイル数が多い場合などは自分で実装するよりは楽に実装できそうです。

おすすめ書籍

Next.js+ヘッドレスCMSではじめる! かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた 実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書

blog-page_footer_336




blog-page_footer_336




-BackEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

FastAPIのPath Operationをasync defにするときはブロッキングに気をつけよう!

1 はじめに2 Path Operationと並行処理3 挙動の確認4 対応方法4.1 asyncioを使って自力で非同期化する4.2 async対応済みのパッケージを使う4.3 async defを ...

rails

RailsでS3に画像をアップロードする

1 はじめに2 今回やりたいこと3 下準備3.1 ImageMagickをインストールする3.2 Gemをインストールする4 レコード生成時にファイルを指定してアップロードする4.1 アップローダを作 ...

Stripe Connectを使って継続課金を実装

1 はじめに2 商品・価格の登録2.1 マイグレーション2.2 製品・価格登録処理の実装2.3 Stripe管理画面での確認3 サブスクリプション登録3.1 事前準備3.2 課金処理の実装3.3 St ...

rails

【Puma】アプリサーバのチューニング

1 はじめに2 チューニングで注意する項目3 子プロセスの数3.1 最低3つの子プロセスを割り当てる3.2 最大子プロセス数3.3 CPUコア数と子プロセス数3.4 なぜPumaの子プロセス数を増やす ...

Go言語

Go言語の基礎〜Go 1.11 開発環境構築とパッケージバージョン管理〜

1 はじめに2 Go言語(Golang)とは2.1 シンプルな構文2.2 コンパイル言語2.3 並行処理2.4 その他の特徴3 Go開発環境の構築3.1 Goのインストール3.1.1 1. homeb ...

フォロー

blog-page_side_responsive

2025年3月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。