Zenn
🐕

Next.jsでGoogle Search Consoleの所有権の確認を行う

に公開
HTML
Next.js
Search Console
tech

はじめに

Next.jsでGoogle Search Consoleの所有権の確認を行う方法を紹介します。所有権の確認方法にはいくつかの方法があります。この記事ではGoogle Search Consoleでおすすめの確認方法とされているウェブサイトにHTMLファイルアップロードする方法を紹介します。

1. Google Search ConsoleからHTMLファイルをダウンロードする

はじめに、Google Search Consoleの「1.ファイルをダウンロード」からgoogle****************.htmlをダウンロードします。

HTMLファイルの中身は以下のような内容になっています。

google****************.html
google-site-verification: google****************.html

2. HTMLファイルをNext.jsプロジェクトのpublicディレクトリにアップロードする

次に、先ほどダウンロードしたHTMLファイルを、所有権の確認を行うページのルートディレクトリにアップロードします。Next.jsのプロジェクトの場合、publicディレクトリにHTMLファイルを置くことで、ルートディレクトリから静的ファイルとしてHTMLファイルを配信することができます。

筆者のプロジェクトのディレクトリ構成の抜粋は以下の通りです。

ディレクトリ構成
Project/
   ├─ app/
   │   ├─ layout.tsx
   │   └─ page.tsx
   ├─ public/
   │   └─ google****************.html
   ├─ package.json
   └─ README.md

3. HTMLファイルのアップロードを確認する

最後に、HTMLファイルのアップロードを確認します。ブラウザのシークレットウィンドウから、URLにアクセスしてHTMLファイルが閲覧できることを確認しましょう。

筆者の場合、https://dice-z19i.vercel.app/の所有権を確認するため、https://dice-z19i.vercel.app/google****************.htmlのURLでHTMLファイルが閲覧できることを確認します。

最終的にGoogle Search Consoleで「確認が完了しました」と表示されれば作業完了です。

筆者のWebアプリ

記事を読んでいただいてありがとうございました。今回はNext.jsでGoogle Search Consoleの所有権の確認を行う方法を紹介しました。この記事の方法で所有権の確認を行った筆者のアプリは以下です。
以下のリンクから遊べますので、是非1000点超えを目指してみてください！

https://dice-z19i.vercel.app/

Discussion