Next.jsで施設詳細ページを作ってSEO導線を増やす【Art Navi開発記録 #12】

施設詳細ページを作ってSEO導線を増やす【Art Navi開発記録 #12】

はじめに

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

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

• サービスURL: https://art-weekend.jp/

前回は、エリアページを作って検索導線を増やす内容について書きました。

今回は、Art Naviで作成している 施設詳細ページ についてまとめます。

今回やりたいこと

Art Naviでは、展覧会情報だけでなく、美術館やギャラリーなどの施設情報も扱っています。

展覧会ページだけでもサービスとしては成立しますが、検索流入を考えると、施設ごとのページも重要だと考えました。

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

• 美術館・ギャラリーごとの詳細ページを作る
• 施設名で検索されたときの受け皿を用意する
• その施設で開催中の展覧会へつなげる
• エリアページや展覧会ページとの内部リンクを増やす

なぜ施設詳細ページを作るか

美術展を探すとき、必ずしも展覧会名から探すとは限りません。

たとえば、以下のような探し方もあります。

上野 美術館
六本木 ギャラリー
銀座 展覧会
国立西洋美術館 展示
森美術館 開催中

このような検索に対応するには、展覧会ページだけでなく、施設ごとのページがあると便利です。

また、施設詳細ページがあると、以下のような導線も作れます。

エリアページ
  ↓
施設詳細ページ
  ↓
開催中の展覧会
  ↓
展覧会詳細ページ

ページ同士をつなげることで、ユーザーにも検索エンジンにもサイト構造を伝えやすくなります。

URL設計

施設詳細ページのURLは、以下のような形にします。

/venues/[id]

例です。

/venues/1
/venues/2
/venues/3

Next.js App Routerでは、以下のようなディレクトリ構成になります。

app/
  venues/
    [id]/
      page.tsx

[id] を使うことで、施設ごとの動的ページを作れます。

表示する情報

施設詳細ページでは、まず以下の情報を表示する方針にしました。

• 施設名
• エリア
• 住所
• アクセス
• 施設紹介文
• 展示傾向
• 開催中・開催予定の展覧会
• 公式サイトへのリンク

MVP段階では、完璧な情報量を目指すよりも、まずページとして成立することを優先しています。

ただし、SEOを考えると本文が薄すぎるページは増やしたくありません。

そのため、施設紹介文や展示傾向の説明は、できるだけ自然な文章として用意する方針にしました。

実装イメージ

施設データを取得して、ページに表示するイメージです。

type Venue = {
  id: number;
  name: string;
  areaName: string;
  address: string;
  access: string;
  description: string;
};

type Exhibition = {
  id: number;
  title: string;
  period: string;
};

export default function VenuePage() {
  const venue: Venue = {
    id: 1,
    name: "上野の美術館",
    areaName: "上野",
    address: "東京都台東区上野",
    access: "上野駅から徒歩圏内",
    description:
      "上野エリアにある美術館です。常設展や企画展を通じて、幅広い美術作品に触れられます。",
  };

  const exhibitions: Exhibition[] = [
    {
      id: 1,
      title: "印象派と光の表現",
      period: "2026年6月1日〜2026年8月31日",
    },
  ];

  return (
    <main>
      <h1>{venue.name}</h1>

      <p>{venue.areaName}</p>
      <p>{venue.address}</p>
      <p>{venue.access}</p>

      <section>
        <h2>施設について</h2>
        <p>{venue.description}</p>
      </section>

      <section>
        <h2>開催中・開催予定の展覧会</h2>

        {exhibitions.map((exhibition) => (
          <article key={exhibition.id}>
            <h3>{exhibition.title}</h3>
            <p>{exhibition.period}</p>
            <a href={`/exhibitions/${exhibition.id}`}>展覧会を見る</a>
          </article>
        ))}
      </section>
    </main>
  );
}

実際には、施設IDをもとにDBやデータファイルから情報を取得する形にします。

内部リンクを意識する

施設詳細ページでは、内部リンクも意識しています。

たとえば、以下のようなリンクです。

施設詳細ページ
  ↓
同じ施設の展覧会詳細ページ

施設詳細ページ
  ↓
同じエリアのページ

展覧会詳細ページ
  ↓
会場の施設詳細ページ

このようにページ同士をつなげることで、ユーザーが回遊しやすくなります。

Art Naviでは、単独のページを増やすだけでなく、ページ同士の関係が分かるようにすることを意識しています。

metadataを設定する

施設詳細ページごとに、title と description も変えます。

export async function generateMetadata() {
  const venue = {
    name: "上野の美術館",
    areaName: "上野",
  };

  return {
    title: `${venue.name}の展覧会情報 | Art Navi`,
    description: `${venue.areaName}エリアにある${venue.name}の施設情報、開催中・開催予定の展覧会を紹介します。`,
  };
}

施設名やエリア名を含めることで、ページごとの内容が伝わりやすくなります。

SEOを考えると、すべてのページで同じtitleやdescriptionにしないことが大事だと感じました。

サイトマップにも含める

施設詳細ページを作ったら、sitemap.xml にも含めます。

const venuePages = venues.map((venue) => ({
  url: `${baseUrl}/venues/${venue.id}`,
  lastModified: new Date(venue.updatedAt),
}));

ページを作っても、サイトマップに含めていないと検索エンジンに見つけてもらいにくくなります。

そのため、展覧会詳細ページと同じように、施設詳細ページもサイトマップ生成対象にしました。

構造化データも入れる

施設詳細ページでは、パンくずの構造化データも入れます。

const breadcrumbJsonLd = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: [
    {
      "@type": "ListItem",
      position: 1,
      name: "ホーム",
      item: "https://art-weekend.jp/",
    },
    {
      "@type": "ListItem",
      position: 2,
      name: "施設",
      item: "https://art-weekend.jp/venues",
    },
    {
      "@type": "ListItem",
      position: 3,
      name: venue.name,
      item: `https://art-weekend.jp/venues/${venue.id}`,
    },
  ],
};

施設ページでも、ページ階層を検索エンジンに伝えるために BreadcrumbList を使います。

気をつけたこと

施設詳細ページを作るときに気をつけたことは以下です。

• 施設名だけの薄いページにしない
• エリアページや展覧会ページと内部リンクする
• titleとdescriptionを施設ごとに変える
• サイトマップに含める
• 存在しない施設ページを生成しない
• 公式情報と矛盾しない内容にする

特に、本文がほとんどないページを大量に作ると、SEO上あまりよくないと考えています。

そのため、施設紹介文や展示傾向など、ユーザーにとって意味のある情報を載せるようにしました。

今後やりたいこと

施設詳細ページについては、今後以下を改善したいです。

• 施設紹介文の充実
• 近くの施設への導線
• 同じエリアの展覧会表示
• 開催終了した展覧会の扱い
• 住所やアクセス情報の整理
• OGP画像の設定
• 施設ごとの構造化データ強化

まずは、検索流入の受け皿として最低限のページを用意し、少しずつ情報量を増やしていく予定です。

まとめ

今回は、Art Naviで作成している施設詳細ページについてまとめました。

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

• 展覧会ページだけでなく施設詳細ページも作る
• 施設名検索の受け皿を用意する
• 開催中・開催予定の展覧会へつなげる
• エリアページや展覧会ページと内部リンクする
• metadata、サイトマップ、構造化データも合わせて整備する

施設詳細ページを作ることで、Art Navi全体の検索導線を増やしやすくなりました。

次回は、Google Search Consoleで公開後の状態を確認する内容について書く予定です。