先生と生徒の会話形式で理解しよう

生徒

「Next.jsでページのタイトルや説明文って、どうやって変えるんですか？」

先生

「Next.jsでは、ページごとにHeadを管理する仕組みがあります。」

生徒

「Headって何ですか？パソコンもあまり触ったことがなくて……」

先生

「大丈夫です。まずはHeadが何をしているのかから、ゆっくり説明していきましょう。」

1. Next.jsのHeadとは何かを超かんたんに理解しよう

Next.jsのHeadとは、Webページの裏側にある情報をまとめている場所です。普段インターネットを見ているとき、画面には文字や画像が表示されていますが、そのページには「タイトル」や「説明文」といった、目には見えにくい情報も一緒に入っています。

この見えにくい情報は、ブラウザのタブに表示されたり、 Googleなどの検索エンジンがページ内容を理解するために使われます。 Headは、いわばページの名札や説明書のような役割を持っています。

Next.jsでは、このHeadをかんたんに設定できる仕組みが用意されています。 Pages Routerを使っている場合は、next/headという専用の機能を使います。

2. Pages Routerとは何かをやさしく説明

Next.jsには、ページを作る方法がいくつかあります。 Pages Routerは、その中でも昔から使われている、基本的な仕組みです。

Pages Routerでは、pagesフォルダの中にファイルを作るだけで、そのファイルがそのままWebページになります。たとえば、pages/index.jsというファイルを作ると、トップページとして表示されます。

このPages RouterでHeadを管理するときに使うのが、 next/headという仕組みです。難しそうに見えますが、やることはとても単純です。

3. next/headを使ってページタイトルを設定してみよう

まずは、ページのタイトルを設定してみましょう。タイトルとは、ブラウザのタブに表示される文字のことです。


import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>はじめてのNext.jsページ</title>
      </Head>
      <h1>トップページ</h1>
    </div>
  );
}

（ブラウザのタブに「はじめてのNext.jsページ」と表示されます）

Headという部品でtitleを囲むことで、このページ専用のタイトルを設定できます。他のページには影響しないので安心してください。

4. 説明文を設定して検索エンジンに内容を伝えよう

次に、ページの説明文を設定します。これは検索結果に表示されることが多い文章です。


import Head from "next/head";

export default function About() {
  return (
    <div>
      <Head>
        <title>会社紹介ページ</title>
        <meta name="description" content="このページは会社の紹介をしています。" />
      </Head>
      <h1>会社紹介</h1>
    </div>
  );
}

（検索結果にページの説明として文章が表示されることがあります）

metaという書き方は少し難しく見えますが、「このページは何について書いているか」を伝えるためのものです。説明文を入れておくことで、ページの内容が伝わりやすくなります。

5. 複数の情報をHeadにまとめて書く方法

Headの中には、タイトルや説明文だけでなく、いくつかの情報をまとめて書くことができます。


import Head from "next/head";

export default function Contact() {
  return (
    <div>
      <Head>
        <title>お問い合わせ</title>
        <meta name="description" content="お問い合わせページです。" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <h1>お問い合わせ</h1>
    </div>
  );
}

（スマートフォンでも見やすい設定が反映されます）

viewportという設定は、スマートフォンやタブレットで画面を見やすくするためのものです。 Headの中にまとめて書いても問題ありません。

6. 全ページ共通のHead設定とページごとの違い

Next.jsでは、全ページで共通のHead設定を持たせることもできます。たとえば、サイト名などは毎回同じにしたい場合があります。

その場合でも、各ページでHeadを使えば、ページごとに内容を上書きすることができます。 Pages Routerでは、この仕組みがとてもシンプルです。

初心者のうちは、「ページファイルの中でHeadを書く」という考え方だけ覚えておけば大丈夫です。

7. Headを使うときに初心者がつまずきやすいポイント

よくある間違いとして、 Headを書いたのにタイトルが変わらないということがあります。これは、Headの書く位置が間違っていることが多いです。

Headは、必ずコンポーネントの中に書く必要があります。外に書いてしまうと、正しく動きません。

また、Pages Routerではnext/headを使う点も重要です。他の仕組みと混ざらないように注意しましょう。

8. Pages RouterでHead管理を覚える意味

Pages RouterでHeadを管理できるようになると、ページごとに情報を整理して作れるようになります。

これは、ブログ記事や会社のサイトなど、たくさんのページを作るときにとても役立ちます。

パソコンに慣れていなくても、まずは「Headはページの説明を書く場所」と覚えるだけで十分です。少しずつ慣れていきましょう。

まとめ

ここまでの記事では、Next.jsのPages Routerを使ったHead管理について、初心者の方でも理解できるように、できるだけやさしい言葉で説明してきました。Headとは何かという基本から始まり、ページタイトルの設定方法、説明文となるmetaタグの書き方、複数の情報をまとめて設定する方法、そして全ページ共通設定とページごとの違いまで、一つずつ段階的に学んできました。

Next.jsにおけるHead管理は、見た目を変えるためのものではなく、ページの裏側にある情報を整理するための大切な仕組みです。ブラウザのタブに表示されるタイトルや、検索結果に表示される説明文は、利用者だけでなく検索エンジンにもページ内容を伝える重要な役割を持っています。そのため、Headを正しく設定できるようになることは、Webサイト全体の品質を高めることにつながります。

Pages Routerでは、next headを使うことで、ページごとにHeadを直感的に管理できます。pagesフォルダの中にある各ファイルがそのままページになるという仕組みと組み合わせることで、どのページにどの情報が設定されているのかを把握しやすくなります。これは、ブログ記事を増やしていく場合や、会社案内やお問い合わせページなど複数のページを持つサイトを作る場合に、特に大きなメリットとなります。

タイトルタグは、そのページが何について書かれているのかを一言で表す要素です。Next.jsのHeadコンポーネントの中でtitleを書くだけで、ブラウザのタブや検索結果に反映されます。説明文として使われるmeta descriptionも同様に、ページ内容を文章で補足する役割があります。これらを設定しておくことで、ページを開く前の段階でも内容が伝わりやすくなります。

また、viewportの設定のように、スマートフォンやタブレットでの表示を意識した情報もHeadに含めることができます。Headの中には、タイトルや説明文だけでなく、ページの動作や表示に関わるさまざまな情報を書けるという点を理解しておくと、今後の学習がぐっと楽になります。

初心者の方がつまずきやすいポイントとして、Headを書いたのに反映されないというケースがありますが、その多くはHeadの書く場所やimportの指定が間違っていることが原因です。Pages Routerでは必ずnext headを使い、コンポーネントの中でHeadを記述するという基本を守ることが大切です。この基本さえ押さえておけば、大きな失敗は防げます。

最初はHead管理が難しく感じるかもしれませんが、やっていることはページごとに名札と説明書を付けているだけだと考えると、少し気が楽になります。Next.jsとPages Routerに慣れていく中で、Headの設定も自然と身についていくはずです。今回学んだ内容を何度か書いて試してみることで、理解がより深まります。


import Head from "next/head";

export default function Sample() {
  return (
    <div>
      <Head>
        <title>まとめページのサンプル</title>
        <meta name="description" content="Next.jsのHead管理を復習するためのサンプルです。" />
      </Head>
      <h1>Head管理の復習</h1>
      <p>このページでは、Headの基本的な使い方を確認できます。</p>
    </div>
  );
}

（ブラウザのタブには設定したタイトルが表示され、検索エンジン向けの説明文も設定されます）

このように、まとめの中でも実際のコードを見ながら復習することで、Head管理の流れを再確認できます。Next.jsのPages Routerとnext headを組み合わせた基本的な書き方を身につけておくことで、今後より複雑なページ構成にも対応できるようになります。

先生と生徒の振り返り会話

生徒

Next.jsのHeadって、最初は難しそうだと思っていましたが、ページの名札みたいなものだと聞いて、少しイメージできました。

先生

そうですね。タイトルや説明文を付けてあげることで、ページの役割がはっきりします。

生徒

Pages Routerだと、ページごとにHeadを書けるので、どこで何を設定しているか分かりやすいですね。

先生

その感覚がとても大切です。まずはページファイルの中でHeadを書くという基本を覚えましょう。

生徒