0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@archer2232in株式会社なかのひとカンパニー

sitemap.xmlとrobots.txtを整備する【Art Navi開発記録 #8】

0
Posted at

sitemap.xmlとrobots.txtを整備する【Art Navi開発記録 #8】

はじめに

こんにちは。
なかのひとカンパニーの archer です。

美術展検索サービス Art Navi の開発内容を、備忘録も兼ねて記事にしています。

前回は、Cloudflare Tunnelを使って自宅サーバー上のNext.jsアプリを公開する構成について書きました。

今回は、Art Naviで対応した sitemap.xml と robots.txt についてまとめます。

今回やりたいこと

Art Naviは、美術館や展覧会を探すサービスなので、検索流入との相性が高いと考えています。

そのため、MVP段階でもSEOの基本対応は早めに入れる方針にしました。

今回やりたいことは以下です。

  • sitemap.xml を用意する
  • robots.txt を用意する
  • 検索エンジンにクロールしてほしいURLを伝える
  • Google Search Consoleにサイトマップを登録できる状態にする

sitemap.xmlとは

sitemap.xml は、サイト内にどのようなページがあるかを検索エンジンに伝えるためのファイルです。

たとえば、Art Naviでは以下のようなページがあります。

/
トップページ

/exhibitions
展覧会一覧

/exhibitions/1
展覧会詳細

/venues/1
施設詳細

/areas/ueno
エリアページ

これらのURLを sitemap.xml に含めることで、検索エンジンにページを見つけてもらいやすくします。

robots.txtとは

robots.txt は、検索エンジンのクローラーに対して、クロールしてよいページやサイトマップの場所を伝えるためのファイルです。

Art Naviでは、基本的に公開ページをクロールしてほしいため、シンプルな設定にしています。

User-agent: *
Allow: /

Sitemap: https://art-weekend.jp/sitemap.xml

この設定で、すべてのクローラーに対してクロールを許可し、サイトマップの場所を伝えています。

Next.jsでrobots.txtを用意する

Next.js App Routerでは、app/robots.ts を使って robots.txt を生成できます。

app/
  robots.ts

実装イメージは以下です。

import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  const baseUrl = "https://art-weekend.jp";

  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
    sitemap: `${baseUrl}/sitemap.xml`,
  };
}

これで、以下のURLにアクセスできるようになります。

https://art-weekend.jp/robots.txt

Next.jsでsitemap.xmlを用意する

Next.js App Routerでは、app/sitemap.ts を使って sitemap.xml を生成できます。

app/
  sitemap.ts

まずは、固定ページをサイトマップに含めます。

import type { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://art-weekend.jp";

  return [
    {
      url: `${baseUrl}/`,
      lastModified: new Date(),
    },
    {
      url: `${baseUrl}/exhibitions`,
      lastModified: new Date(),
    },
    {
      url: `${baseUrl}/favorites`,
      lastModified: new Date(),
    },
  ];
}

これで、以下のURLにアクセスするとサイトマップが生成されます。

https://art-weekend.jp/sitemap.xml

動的ページをサイトマップに含める

Art Naviでは、展覧会詳細ページや施設詳細ページもSEO上重要です。

そのため、固定ページだけでなく、動的ページもサイトマップに含めます。

イメージとしては、展覧会データを取得してURLを生成します。

import type { MetadataRoute } from "next";

const exhibitions = [
  { id: 1, updatedAt: "2026-07-01" },
  { id: 2, updatedAt: "2026-07-02" },
];

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://art-weekend.jp";

  const staticPages = [
    {
      url: `${baseUrl}/`,
      lastModified: new Date(),
    },
    {
      url: `${baseUrl}/exhibitions`,
      lastModified: new Date(),
    },
  ];

  const exhibitionPages = exhibitions.map((exhibition) => ({
    url: `${baseUrl}/exhibitions/${exhibition.id}`,
    lastModified: new Date(exhibition.updatedAt),
  }));

  return [...staticPages, ...exhibitionPages];
}

実際には、DBやデータファイルから展覧会情報を取得して、URLを組み立てる形にします。

エリアページも含める

Art Naviでは、エリアごとの検索導線も大事にしています。

たとえば、以下のようなページです。

/areas/ueno
/areas/roppongi
/areas/ginza

これらもサイトマップに含めます。

const areas = [
  { slug: "ueno" },
  { slug: "roppongi" },
  { slug: "ginza" },
];

const areaPages = areas.map((area) => ({
  url: `${baseUrl}/areas/${area.slug}`,
  lastModified: new Date(),
}));

展示名だけでなく、エリア名での検索流入も狙いたいため、エリアページは今後強化していく予定です。

サイトマップに含めるページ

MVP段階では、以下のページをサイトマップに含める方針にしています。

/
トップページ

/exhibitions
展覧会一覧

/exhibitions/[id]
展覧会詳細

/venues/[id]
施設詳細

/areas/[slug]
エリアページ

一方で、以下のようなページはサイトマップに含めない方針です。

/favorites
お気に入りページ

お気に入りページはユーザーのブラウザ上のLocalStorageに依存するため、検索流入向けのページではありません。

そのため、サイトマップには含めなくてよいと判断しました。

lastModifiedについて

サイトマップでは、lastModified を指定できます。

これは、そのURLが最後に更新された日時を表します。

{
  url: "https://art-weekend.jp/exhibitions/1",
  lastModified: new Date("2026-07-01"),
}

展覧会情報や施設情報は更新される可能性があるため、可能であればデータ側の更新日時を使うのがよさそうです。

MVP段階では、まず new Date() やデータファイル側の日付を使って対応しています。

Google Search Consoleに登録する

sitemap.xml を用意したら、Google Search Consoleに登録します。

登録するURLは以下です。

https://art-weekend.jp/sitemap.xml

Search Consoleに登録することで、Googleにサイトマップの存在を伝えられます。

もちろん、登録したからといってすぐにインデックスされるわけではありません。

ただ、サイト構造を伝えるための基本対応として、早めに入れておく価値はあると考えています。

動作確認

公開後は、ブラウザや curl で確認します。

curl -I https://art-weekend.jp/robots.txt

curl -I https://art-weekend.jp/sitemap.xml

中身も確認します。

curl https://art-weekend.jp/robots.txt

curl https://art-weekend.jp/sitemap.xml

ブラウザでも以下にアクセスします。

https://art-weekend.jp/robots.txt
https://art-weekend.jp/sitemap.xml

どちらも正常に表示されればOKです。

気をつけたこと

sitemap.xml と robots.txt で気をつけたことは以下です。

  • 本番URLを正しく設定する
  • http ではなく https を使う
  • 存在しないURLをサイトマップに入れない
  • 検索流入向けでないページは無理に入れない
  • 動的ページのURL生成漏れに注意する
  • Search Console登録後も実際の表示を確認する

特に、サイトマップに存在しないURLを入れると、クロール時にエラーになります。

そのため、生成対象のURLは実際にアクセスできるものに絞るようにしています。

まとめ

今回は、Art Naviで対応した sitemap.xml と robots.txt についてまとめました。

今回のポイントは以下です。

  • robots.txt でサイトマップの場所を伝える
  • sitemap.xml で検索エンジンにURL一覧を伝える
  • Next.js App Routerでは app/robots.ts と app/sitemap.ts で生成できる
  • 展覧会詳細、施設詳細、エリアページをサイトマップに含める
  • お気に入りページのような検索流入向けでないページは含めない
  • Google Search Consoleにサイトマップを登録する

SEOはすぐに結果が出るものではありませんが、MVP段階から土台を作っておくことで、後からページを増やしたときに活かしやすくなると感じました。

次回は、Next.jsで構造化データを入れる内容について書く予定です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?