Masayan tech blog .

  1. ホーム→
  2. ブログ記事一覧→
  3. Vercelの無料ドメインでGoogle Search Consoleを設定する完全ガイド

Vercelの無料ドメインでGoogle Search Consoleを設定する完全ガイド

公開日
最終更新日
フロントエンド ソフトウェア開発 Vercel

目次

はじめに

Vercelでサイトをデプロイした際、独自ドメインを取得せずにVercelが提供する無料の.vercel.appドメインを使っている方も多いのではないでしょうか。

「Google Search Consoleを使いたいけど、独自ドメインがないと設定できないのでは？」と思っている方に朗報です。Vercelの無料ドメインでもGoogle Search Console（以下GSC）の所有権確認を行い、分析機能を利用できます。

本記事では、独自ドメインなしでGSCを設定する方法を、具体的な手順とコード例を交えて解説します。

独自ドメインなしでGSCを使う鍵：URLプレフィックス

Google Search Consoleには、プロパティを追加する際に2つの方法があります:

  1. ドメインプロパティ - ドメイン全体（すべてのサブドメイン、http/https両方）を一括管理
  2. URLプレフィックス - 特定のURL（例：https://yoursite.vercel.app/）のみを管理

Vercelの無料ドメインでは、DNS設定を編集できないため、URLプレフィックス方式を使用します。

URLプレフィックスの特徴

  • 特定のURLから始まるページのみを対象
  • DNS設定不要で、HTMLタグやファイルアップロードで所有権確認が可能
  • https://yoursite.vercel.appと指定すれば、そのドメイン配下のすべてのページが対象になる

所有権確認の方法

URLプレフィックスでは、以下の方法で所有権を確認できます:

1. HTMLタグによる確認（推奨）

最も簡単で、Next.jsなどのフレームワークと相性が良い方法です。

手順

  1. Google Search Consoleで確認コードを取得
    • Google Search Consoleにアクセス
    • 「プロパティを追加」→「URLプレフィックス」を選択
    • https://yoursite.vercel.appを入力
    • 「HTMLタグ」を選択し、メタタグをコピー
  2. Next.jsプロジェクトに追加

App Routerの場合（app/layout.tsx）:

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'あなたのサイト',
  description: 'サイトの説明',
  verification: {
    google: 'ここに確認コード（contentの値のみ）を貼り付け',
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  )
}

Pages Routerの場合（pages/_document.tsx）:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="ja">
      <Head>
        <meta name="google-site-verification" content="ここに確認コードを貼り付け" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
  1. デプロイして確認
    • コードをコミット＆プッシュ
    • Vercelで自動デプロイが完了するまで待つ
    • GSCで「確認」ボタンをクリック

2. HTMLファイルによる確認

GSCから指定されたHTMLファイルをダウンロードし、サイトのルートディレクトリに配置する方法です。

Next.jsでの実装

App Routerの場合:

// app/google[確認コード].html/route.ts
export async function GET() {
  return new Response('google-site-verification: google[確認コード].html', {
    headers: {
      'Content-Type': 'text/html',
    },
  })
}

Pages Routerの場合:

public/ディレクトリに直接HTMLファイルを配置すれば、自動的にルートから配信されます。

public/
└── google[確認コード].html

3. Google Analyticsによる確認

すでにGoogle Analytics（GA4）を設置している場合、追加の設定なしで所有権を確認できます。

前提条件

  • 対象サイトにGA4が設置済み
  • GSCとGAで同じGoogleアカウントを使用
  • GAでの「編集」権限を保有

Next.jsでのGA4設定例

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <head>
        <Script
          src={`https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX`}
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXXXXX');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  )
}

GA4が正しく設定されていれば、GSCで「Google Analytics」を選択するだけで確認が完了します。

4. Google Tag Managerによる確認

Google Tag Manager（GTM）を使用している場合も、所有権確認が可能です。

前提条件

  • GTMコンテナが設置済み
  • GTMでの「公開」権限を保有
  • GSCとGTMで同じGoogleアカウントを使用

Next.jsでのGTM設定例

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <head>
        <Script id="google-tag-manager" strategy="afterInteractive">
          {`
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXXX');
          `}
        </Script>
      </head>
      <body>
        <noscript>
          <iframe
            src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
            height="0"
            width="0"
            style={{ display: 'none', visibility: 'hidden' }}
          />
        </noscript>
        {children}
      </body>
    </html>
  )
}

確認とトラブルシューティング

確認が失敗する場合のチェックポイント

  1. デプロイが完了しているか確認
    • Vercelのダッシュボードで最新のデプロイが成功していることを確認
    • ブラウザで実際にサイトにアクセスし、ソースコードを表示してメタタグが存在するか確認
  2. 正確なURLを入力しているか
    • https://を含む完全なURLを入力（http://ではなく）
    • 末尾のスラッシュの有無に注意
  3. 複数の確認方法を試す
    • HTMLタグで失敗した場合、HTMLファイルやGA4の方法も試してみる
  4. キャッシュをクリア
    • ブラウザのキャッシュをクリアしてから再度確認
    • Vercelのキャッシュもクリアする場合は、再デプロイを実行

確認後のデータ反映

所有権確認が完了しても、すぐにはデータが表示されません:

  • 検索パフォーマンス: 数日〜1週間程度
  • インデックス状況: 数時間〜数日
  • URL検査ツール: すぐに使用可能

GSC活用のメリット

独自ドメインなしでも、GSCを設定することで以下のメリットが得られます:

  1. 検索パフォーマンスの把握
    • どのキーワードで検索されているか
    • クリック率（CTR）の分析
    • 平均掲載順位の確認
  2. インデックス状況の管理
    • Googleにインデックスされているページの確認
    • インデックス登録のリクエスト
    • サイトマップの送信
  3. 技術的な問題の検出
    • モバイルユーザビリティの問題
    • ページエクスペリエンスの評価
    • 構造化データのエラー検出
  4. セキュリティ問題の通知
    • マルウェアやハッキングの警告
    • 手動対策（ペナルティ）の通知

まとめ

Vercelの無料ドメイン（.vercel.app）でも、URLプレフィックス方式を使用することで、Google Search Consoleの全機能を利用できます。

おすすめの方法:

  1. HTMLタグ - Next.jsとの相性が良く、実装が簡単
  2. Google Analytics - すでにGA4を設置済みなら最も手軽
  3. HTMLファイル - ファイル配置だけで完結するシンプルな方法

独自ドメインを取得する前でも、GSCを活用してSEO対策を始められます。まずは所有権確認を完了させて、検索パフォーマンスのデータ収集を開始しましょう。

参考リンク

関連記事

ブログ管理人

西垣雅矢のプロフィール画像

masayan

Full Stack Engineer

📍 大阪, Japan

🎯 Specialties

MCP Server Clean Architecture Test Automation

⚡ Focus

AI-Driven Dev Claude Code