これまでの Next.js ブログサイト構築シリーズをまとめたページは以下の通りです。
第14回までで、ヘッダーナビゲーションとフッターリンクの整備が完了し、
サイトの外枠が整いました。
サイトとして見られる形になってきたところで、次にやるべきことがあります。
「サイトに誰も来ていないのか、それとも来ているのに気づいていないだけなのか。」
ブログを公開したばかりのころ、私はずっとそんなことを思っていました。
デザインを整えて、記事を書いて、デプロイして。
でも実際に誰かが見ているのかどうかが、まったくわからない。
それはなかなか落ち着かない状態です。
Google アナリティクス（GA4）と Google サーチコンソールを設定すると、
その「わからない」がひとつ解消されます。
この記事では、
Next.js で作った静的ブログに GA4 とサーチコンソールを設定した手順を、
アカウントの新規登録から非エンジニア目線でできるだけ丁寧に記録します。
この記事でわかること
- Google アナリティクス（GA4）とサーチコンソールが何をするツールなのか
- GA4 のアカウント新規登録から測定 ID の取得まで
- サーチコンソールの新規登録から所有権確認コードの取得まで
- Next.js App Router への GA4 の正しい追加方法（
@next/third-partiesを使う方法） - サーチコンソールの所有権確認を
layout.tsxのみで完結させる方法 - サイトマップと
robots.txtの作成方法と、静的エクスポートモードでの注意点
- 記事の前提条件と対象読者
- Google アナリティクスとサーチコンソールは何が違うのか
- STEP 1：Google アナリティクス（GA4）に登録する
- STEP 2：Google サーチコンソールに登録する
- STEP 3：@next/third-parties パッケージをインストールする
- STEP 4：.env.local に測定 ID を追加する
- STEP 5：layout.tsx を更新する
- STEP 6：robots.txt を作成する
- STEP 7：sitemap.xml を作成する
- STEP 8：ビルドとデプロイを実行する
- STEP 9：GA4 の動作確認をする
- STEP 10：サーチコンソールの所有権を確認する
- STEP 11：サイトマップを送信する
- まとめ
記事の前提条件と対象読者
この記事は、以下の環境と進捗を前提として手順を解説しています。
- Next.js のバージョン： Next.js 16.2 系（React 19）環境の App Router を使用しています
- 対象読者： シリーズ第14回までを完了し、ヘッダー・フッターが実装済みの方を対象としています
また、以下のような状況で検索してたどり着いた方にも参考になる内容です。
- GA4 やサーチコンソールに初めて登録する方
- Next.js で作ったブログに GA4 を設定したい方
output: 'export'（静的エクスポート）モードでsitemap.tsがエラーになって困っている方
Google アナリティクスとサーチコンソールは何が違うのか
設定の前に、まずこの2つのツールの違いを整理しておきます。
似ているようで、役割がまったく異なります。
Google アナリティクス（GA4）：「サイトの中」を見るツール
GA4 は、サイトに訪れた人の行動を記録するツールです。
- 何人がサイトを訪れたか
- どのページが何回読まれたか
- どこから来たか（検索・SNS・直接アクセスなど）
- どのデバイスで見ているか（PC・スマートフォンなど）
サイトを訪れた人が「サイトの中で何をしているか」を把握するためのツールです。
Google サーチコンソール：「Google からの見え方」を見るツール
サーチコンソールは、Google 検索でサイトがどう扱われているかを確認するツールです。
- どんなキーワードで検索されてサイトにたどり着いたか
- 検索結果の何位に表示されているか
- Google がどのページをインデックス（検索データベースに登録）しているか
- サイトにクロール上の問題がないか
「Google の目から見たサイトの状態」を把握するためのツールです。
両方とも「データ蓄積型」であることが重要
どちらのツールも、設定した日からデータが積み上がっていく仕組みです。
設定が1ヵ月遅れれば、その1ヵ月分のデータは永遠に失われます。
ブログの成長を実感するうえでも、早いうちに設定しておくことをおすすめします。
WordPress であれば登録さえすれば比較的簡単に連携できますが、Next ブログではこの連携部分を自分で作る必要があります。
このページで説明する方法で、簡単に連携部分を作ることができますので、ぜひ試してみてください。
STEP 1：Google アナリティクス（GA4）に登録する
まず GA4 のアカウントを新規作成し、Next ブログの測定 ID を取得します。
GA4 の利用には Google アカウントが必要です。
すでに Gmail などで使っている Google アカウントがあれば、そのまま使えます。
1-1. GA4 の管理画面にアクセスする
以下の URL から Google アナリティクスにアクセスします。
`https://analytics.google.com/`
Google アカウントでログインしていない場合はログイン画面が表示されます。
ログイン後、「測定を開始」ボタンをクリックします。
1-2. アカウントを作成する
最初に「アカウント名」を入力します。アカウントとは、GA4 全体の最上位の管理単位です。
複数のサイトを同じアカウントでまとめて管理できます。
個人ブログであれば自分の名前やブログ名（例：your-blog）を入力するのが一般的です。
「アカウントのデータ共有設定」が表示されますが、基本的にすべてチェックを入れたままで問題ありません。「次へ」をクリックします。
1-3. プロパティを作成する
次に「プロパティ」を設定します。
プロパティとは、1つのサイトに対応するデータの入れ物です。
以下の内容で入力して「次へ」をクリックします。
| 項目 | 入力内容 |
|---|---|
| プロパティ名 | 自分のブログ名 |
| レポートのタイムゾーン | 日本（GMT+09:00） |
| 通貨 | 日本円（¥） |
1-4. ビジネス情報を入力する
続いてビジネスの情報を入力します。
個人ブログの場合は以下の内容で問題ありません。
「次へ」をクリックします。
| 項目 | 入力内容 |
|---|---|
| 業種 | コンピュータ、電化製品 |
| ビジネスの規模 | 小規模 – 従業員数 1〜10 名 |
1-5. ビジネス目標を選択する
ビジネスの目標を選ぶ画面では、以下の2つを選択しました。
「作成」をクリックします。
- ウェブ／アプリのトラフィックの分析
- ユーザーエンゲージメントとユーザー維持率の把握
利用規約への同意画面が表示された場合は、内容を確認して同意します。
1-6. データストリームを作成する
プロパティが作成されると、「データ収集を開始する」画面が表示されます。
データストリームとは、「このプロパティはどのサイトのデータを受け取るか」を設定するものです。
プラットフォームの選択画面で「ウェブ」をクリックし、以下の内容で設定します。
| 項目 | 設定内容 |
|---|---|
| ウェブサイトの URL | https://next.example.com |
| ストリーム名 | 自分のブログ名 |
| 拡張計測機能 | すべてオン（デフォルトのまま） |
「ストリームを作成」をクリックします。
1-7. 測定 ID をコピーする
作成完了後、「ウェブストリームの詳細」画面が表示されます。
ここに表示されている 測定 ID（G-XXXXXXXXXX 形式） をコピーしておきます。
この ID を後のコードに使います。
STEP 2：Google サーチコンソールに登録する
次に Google サーチコンソールに Next ブログを登録し、所有権確認コードを取得します。
2-1. サーチコンソールにアクセスする
以下の URL から Google サーチコンソールにアクセスします。
`https://search.google.com/search-console/`
「今すぐ開始」をクリックします。
Google アカウントでのログインが求められた場合はログインします。
2-2. プロパティタイプを選択する
ログイン後、「プロパティタイプの選択」画面が表示されます。
左側の「ドメイン」と右側の「URL プレフィックス」の2種類があります。
- ドメイン：
example.comのすべてのサブドメインを一括管理できる。DNS の設定変更が必要。 - URL プレフィックス：指定した URL のみを管理する。HTML タグで所有権確認ができる。
今回は右側の 「URL プレフィックス」 を選びます。
DNS の設定変更はやや難易度が高く、Next.js のコード1行で所有権確認を完結させる今回の方法と相性が良いのが URL プレフィックスです。
URL 入力欄に https://next.example.com と入力して「続行」をクリックします。
（サイトの URL は、ご自身のサイトの URL に変更してください）
2-3. 所有権確認コードを取得する
「所有権の確認」画面が表示されます。
画面上部に「HTML ファイル」という確認方法がデフォルトで開いていますが、今回は使いません。HTML ファイルをサーバーにアップロードする手間が省けるためです。
「その他の確認方法」の中にある「HTML タグ」をクリックして展開します。
以下のようなメタタグが表示されます。
<meta name="google-site-verification" content="確認コード" />「コピー」ボタンをクリックして確認コードを取得します。
この画面はまだ閉じないでください。
実装・デプロイが完了した後に「確認」ボタンを押しにきます。
STEP 3：@next/third-parties パッケージをインストールする
Next.js に GA4 を追加する方法はいくつかありますが、現時点で最も推奨されている方法は @next/third-parties パッケージを使う方法です。
これは Next.js の開発元である Vercel が公式に提供しているパッケージで、GA4 スクリプトをパフォーマンスに配慮した形で読み込んでくれます。example-blog ディレクトリで以下を実行します。
npm install @next/third-partiesnpm install は Node.js のパッケージ（プログラムの部品）を追加するコマンドです。
このコマンドを実行すると、@next/third-parties というパッケージが node_modules フォルダにダウンロードされ、プロジェクトで使えるようになります。
STEP 4：.env.local に測定 ID を追加する
GA4 の測定 ID は、コードに直接書かず、環境変数として管理します。
環境変数とは、プログラムの設定値をコードの外側で管理する仕組みです。
測定 ID をコードに直接書くと、Git で管理しているリポジトリに公開されてしまうリスクがあります。.env.local に書くことで、リポジトリには公開されず手元の環境だけで安全に管理できます。
example-blog ディレクトリの直下に .env.local ファイルを新規作成し、以下を記述して保存します。
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXXG-XXXXXXXXXX の部分は、STEP 1 で取得した実際の測定 ID に置き換えてください。
変数名の先頭についている NEXT_PUBLIC_ というプレフィックスには意味があります。
Next.js では、環境変数の名前が NEXT_PUBLIC_ で始まる場合のみ、ブラウザ側のコードからも参照できます。
GA4 スクリプトはブラウザで動作するため、このプレフィックスが必要です。
STEP 5：layout.tsx を更新する
app/layout.tsx に、GA4 スクリプトとサーチコンソールの確認コードを追加します。
1ファイルを編集するだけで、すべてのページに GA4 が適用され、サーチコンソールの所有権確認も完了します。思っていたよりずっとシンプルな作業です。
完成版 app/layout.tsx
（コードの中の URL などはご自身のサイトの URL に変更してください）
import type { Metadata } from "next";
import "./globals.css";
import Header from "../components/Header";
import Footer from "../components/Footer";
import { GoogleAnalytics } from "@next/third-parties/google";
const SITE_URL = 'https://next.example.com';
export const metadata: Metadata = {
metadataBase: new URL(SITE_URL),
title: {
default: 'サイト名',
template: '%s | サイト名',
},
description: 'サイトキャッチフレーズ',
openGraph: {
siteName: 'サイト名',
images: [
{
url: `${SITE_URL}/images/default-ogp.webp`,
width: 1200,
height: 630,
},
],
},
verification: {
google: 'STEP2でコピーした確認コードをここに貼り付ける',
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja" suppressHydrationWarning>
<body className="bg-[#1e2028] text-[#e2e4ea] min-h-screen flex flex-col">
<Header />
<main className="flex-grow">
{children}
</main>
<Footer />
</body>
{process.env.NEXT_PUBLIC_GA_ID && (
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
)}
</html>
);
}追加した内容の解説
import { GoogleAnalytics } from "@next/third-parties/google"
先ほどインストールした @next/third-parties パッケージから GoogleAnalytics コンポーネントを読み込みます。
このコンポーネントが GA4 のスクリプトを自動的に <head> に埋め込みます。
metadataBase: new URL(SITE_URL)
サイトのベース URL を Next.js に伝えます。
OGP 画像などで相対パスを使っている場合に、正しい絶対 URL に変換するために必要な設定です。
verification: { google: '確認コード' }
サーチコンソールの確認コードを設定します。
Next.js がビルド時に自動的に以下のメタタグを <head> に生成します。
<meta name="google-site-verification" content="確認コード" />HTML ファイルをサーバーにアップロードする必要はなく、コードに1行追加するだけで所有権確認が完了します。
process.env.NEXT_PUBLIC_GA_ID && ( ... )
環境変数 NEXT_PUBLIC_GA_ID が設定されている場合のみ GA4 スクリプトを読み込む条件式です。
ID が設定されていない場合はスクリプトを読み込まない安全策になっています。
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
GA4 スクリプトを読み込むコンポーネントです。</html> の直前に配置することで、すべてのページに GA4 が適用されます。
STEP 6：robots.txt を作成する
robots.txt は、Google などの検索エンジンのクロールロボットに「どのページをクロールしてよいか」を伝えるファイルです。
example-blog/public/ フォルダの中に robots.txt を新規作成して、以下を記述します。
User-agent: *
Allow: /
Sitemap: https://next.example.com/sitemap.xml各行の意味は以下の通りです。
User-agent: *：すべての検索エンジンのクロールロボットに対して適用する設定ですAllow: /：ルート（/）以下のすべてのページへのクロールを許可しますSitemap: ...：サイトマップファイルの場所をクロールロボットに伝えます
なお、Next.js には app/robots.ts というファイルで robots.txt を自動生成する方法もあります。
しかし、現在のサイトは output: 'export'（静的エクスポート）モードで動いており、このモードでは app/robots.ts を使うとビルドエラーになります。
そのため、静的ファイルとして public/robots.txt を直接作成する方法を採用しました。
STEP 7：sitemap.xml を作成する
サイトマップは、サイト内のページ一覧を Google に伝えるための XML ファイルです。
example-blog/public/ フォルダの中に sitemap.xml を新規作成して、以下を記述します。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://next.example.com</loc>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
</urlset>各タグの意味は以下の通りです。
<urlset>：サイトマップファイルであることを宣言するタグです<url>：1つのページ情報のまとまりです<loc>：ページの URL です<changefreq>：ページの更新頻度のヒントです。Google への強制力はありません<priority>：サイト内でのページの重要度です。1.0が最高値です
robots.txt と同様の理由で、app/sitemap.ts ではなく静的ファイルとして作成しています。
記事が増えたら、以下の形式で sitemap.xml に追記していきます。
<url>
<loc>https://next.example.com/posts/記事のスラッグ</loc>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>第18回でサーバーモードに切り替えた後は、app/sitemap.ts を使った自動生成に移行する予定です。それまでは手動で更新します。
STEP 8：ビルドとデプロイを実行する
以下のコマンドを順番に実行します。
cd ~/example-blog && npm run build./deploy.shnpm run build は Next.js のプロジェクトを本番用にビルドするコマンドです。output: 'export' の設定により、静的ファイルが out フォルダに出力されます。deploy.sh がその内容を VPS に転送して公開します。
STEP 9：GA4 の動作確認をする
デプロイ完了後、ブラウザで https://next.example.com を開きます。
開発者ツール（F12）は閉じた状態で開くのがポイントです。
GA4 の管理画面 →「レポート」→「リアルタイム」を開いて、自分のアクセスが計測されているか確認します。
「過去 5 分間のアクティブユーザー数」が 1 になっていれば成功です。
「リアルタイム」 と言いつつも、すぐには反映されないかもしれません。
私自身も、アクティブユーザー数がカウントされるまで、何度か画面を更新するなどしました。
リアルタイムで「1」が表示されたときは、設定やコードがちゃんと動いていることが実感できて、うれしかったです。
GA4 スクリプトが正しく読み込まれているか不安な場合は、開発者ツール（F12）→「Network」タブ → 検索欄に gtag と入力してページをリロードしてみてください。js?id=G-XXXXXXXXXX というファイルがステータス 200 で読み込まれていれば正常です。
STEP 10：サーチコンソールの所有権を確認する
STEP 2 で開いたままにしていたサーチコンソールの「所有権の確認」画面に戻り、「確認」ボタンをクリックします。
「所有権を証明しました」と表示されれば成功です。
STEP 11：サイトマップを送信する
最後に、Google サーチコンソールにサイトマップを送信します。
- サーチコンソールの左メニューから「サイトマップ」を開く
- 入力欄に
sitemap.xmlと入力する - 「送信」をクリックする
これで、Google にサイト内のページ一覧を伝えることができました。
まとめ
今回の作業で設定できたことをまとめます。
| 設定 | 内容 |
|---|---|
| GA4 | アクセス数・ページビュー数の計測を開始 |
| サーチコンソール | 検索キーワード・インデックス状態の把握が可能に |
| robots.txt | クロールロボットへの許可設定 |
| sitemap.xml | Google へのページ一覧の提供 |
GA4 の設定は layout.tsx に数行追加するだけで完了しました。
サーチコンソールの所有権確認も verification の1行を書くだけで済みます。
作業量はそれほど多くありませんが、データは設定した日から蓄積されていくため、早めに設定しておいてよかったと感じています。
ひとつ注意点があります。現在のサイトは静的エクスポートモード（output: 'export'）のため、sitemap.xml を手動で管理する必要があります。
記事を追加するたびに public/sitemap.xml を更新する手間が発生しますが、第18回でサーバーモードに切り替えた際に自動化する予定です。
次回は第16回として、カテゴリー・タグページの作成に取り組みます。
コメント