ads.txtを設置するために、ブログのURLを変更してFirebaseを利用してリダイレクトする方法

おつかれさまです！のぶじゃすです。

先日当ブログのドメインを y-i.jp から www.y-i.jp に変更しました。ads.txtを設置するのを試してみたかったのでやってみました。もし似たような状況の方とかいらっしゃれば参考になると嬉しいです。

うまく行かなくて頭を抱えている男性のイラスト — ads.txt 置けないじゃん・・・

前提

ads.txt とは、Google AdSense などのアドネットワーク関連の設定で、パブリッシャーが承認したネットワークから広告が配信される事を担保するものです。詳しくはGoogle AdSense ヘルプをごらんください。

ads.txt はルートドメインの直下に設置する必要があります。今回の場合 https://y-i.jp/ads.txt でアクセス出来る必要がありました。

ルートドメインは私の場合ははてなブログに直接設定していました。これが今回の対応をしなければならなくなった元凶です。

はてなブログでは公式でads.txtを配信する機能は提供していません。はてなヘルプで言及されています。

今回クリアしないといけない課題は２つ

ルートドメインでads.txtを配信する
ブログはそのまま稼働させる

ドメインは変更しないとどうしようもなさそう

前提の上で解決方法を考えてみます。はてなブログでads.txtを配信する機能はないので、自力で配信する必要がある。しかし自力で配信するとなるとレンタルサーバーなど何らかのWebサーバで配信しないといけない。

URLをそのままでなんとかするのは難しそう。ではドメインは https://www.y-i.jp/ に変更するようにしよう。しかし旧URLからのリダイレクトをどう処理するか。

最近ホスティングだと、Xserverとかよく聞く気がする。しかしもちろん費用はかかる。とりあえずFirebaseなら動作確認したりテストする分には無料。その後もアクセス数が増えたりしない限りは無料。

という事で気楽にFirebaseで試してみます。

Firebase で行った設定

手順はシンプルです

FirebaseHosting を利用開始
ads.txt をルート（/ads.txt）でアクセスできるようにする
ドメイン設定
ads.txt 以外のアクセスは全て https://www.y-i.jp にリダイレクトする

FirebaseHosting を利用開始

firebase を利用開始してhostingを有効にするだけです

Firebase Hosting

私はGitHubでリポジトリ作成してそこから GitHub Actions で deployしています。多分そこまでしなくてもads.txtをアップするだけなら出来ると思います。

ads.txt をルート（/ads.txt）でアクセスできるようにする

FirebaseHostingのスタートガイド通りに初期設定を行うと public フォルダが出来ます。Google AdSense からダウンロードした ads.txt を public 直下に保存します。あとは firebase deploy --only hosting とかすれば公開されます。

この時点ではデフォルトで用意されているドメインからしかアクセスできません。おそらく xxx.web.app とか xxx.firebaseapp.com みたいなドメインです。

もともとの y-i.jp でアクセス出来るようにするために、「カスタムドメインを追加」します。

ドメイン設定

独自ドメインでFirebaseHostingにアクセス出来るようにします。ドメインプロバイダなどのDNS設定でTXTレコードを設定したりします。詳細な手順などは公式ヘルプを参照。

Connect a custom domain | Firebase Hosting

それ以外のアクセスは全て https://www.y-i.jp にリダイレクトする

これが今回のキモです。具体的に例えると

https://y-i.jp/entry/2022-otherworldly-transfer-comic

というURLに来たアクセスを

https://www.y-i.jp/entry/2022-otherworldly-transfer-comic

に飛ばしたいです。

私は2パターン設定しました。ルートアクセスの場合とそれ以外です。ルートアクセスの場合には public/index.html にアクセスが来るのでそこでリダイレクトするようにしました。それ以外の場合では404.htmlが表示される仕様になっています（ファイルが存在しない場合）。そこでもリダイレクトするようにしました。

色々細かい制約とかあるのかもしれませんが、そこまで詳しくないし簡単だったのでJavaScriptでやってみました。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>リダイレクトします</title>

    <script>
      window.onload = function(){
         setTimeout( `location.href='https://www.y-i.jp'`, 1000);
      }
    </script>
  </head>
  <body>
    <div id="message">
      <h2>URLが変更になったのでリダイレクトします</h2>
    </div>
  </body>
</html>

404.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>リダイレクトします</title>

    <script>
      const pathname= location.pathname;
      window.onload = function(){
         setTimeout( `location.href='https://www.y-i.jp${pathname}'`, 1000);
      }
    </script>
  </head>
  <body>
    <div id="message">
      <h2>URLが変更になったのでリダイレクトします</h2>
    </div>
  </body>
</html>