hn_pgtech

～ 課題を解決したいブログ ～

目次

  1. はじめに
  2. 審査は元のドメインでする必要がある
  3. サイトの審査
  4. 301 リダイレクトの設定

サブドメインでGoogle Adsenceに登録する方法

サブドメインでGoogle Adsenceに登録する方法
Google AdsenceGatsby

はじめに

サブドメインで運用していた Gatsby で作成しているこのブログを Google Adsence に登録しようとしたときに、いくつか手順を踏まないと上手くいかなかったので今回はその解決方法を書いていきます。

ちなみにこのブログは GitHub Actions を使用して自動デプロイするようにしていますが、サーバは Xserver で運用されています。

審査は元のドメインでする必要がある

Google Adsence にサブドメインを登録しようとするとエラーになって先に進めません。

unable-to-register.png

そのため、この画面では元のドメインを登録する必要があります。

そして審査をする前に 301 リダイレクトの設定をして、元のドメインのアクセスがサブドメインに向くようにする必要があります。

サイトの審査

元のドメインを登録すると Google Adsence に審査を出す前の確認画面が開きます。

ここでは指定されたタグをheadタグ内に設置し、コードを設置しましたのチェックボックスにチェックを入れ、確認ボタンを押すと正しくアクセスできれば審査が進みます。

adsence-code.png

この確認ボタンを押す前に 301 リダイレクト設定をしておく必要があります。

301 リダイレクトの設定

Xserver の管理画面にログインし、サイト転送設定から指定した場合はリダイレクトの無限ループが発生してしまいました。

redirect-setting.png

このとき.htaccessは以下のようになっていました。

"/home/[ユーザー名]/hn-pgtech.com/public_html/.htaccess" 
SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_AllCacheMode
# ↓管理パネルの操作で追加された設定
Redirect permanent / https://blog.hn-pgtech.com/

この設定では元のドメインhn-pgtech.comからサブドメインblog.hn-pgtech.comにリダイレクトされる設定ですが、blog.hn-pgtech.comへのリクエストもリダイレクトの対象となってしまい無限ループしてしまいました。

この事象を解決するために.htaccessを以下のように修正します。これは、ssh 接続で修正しても管理画面から編集してもどちらでも構いません。

"/home/[ユーザー名]/hn-pgtech.com/public_html/.htaccess" 
SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_AllCacheMode
- Redirect permanent / https://blog.hn-pgtech.com/
+ # リダイレクト設定を追加
+ RewriteEngine On # URL書き換えモジュールを有効
+ RewriteBase / # ベースURLを設定
+ RewriteCond %{HTTP_HOST} ^hn-pgtech\.com$ [NC] # ホスト名が「hn-pgtech.com」である場合にのみルールを適用（[NC]は大文字小文字を区別しない）
+ RewriteRule ^(.*)$ https://blog.hn-pgtech.com/$1 [R=301,L] # すべてのリクエストをhttps://blog.hn-pgtech.com/に301リダイレクトする

redirect-setting-htaccess.png

ここではアクセス元の URL がhn-pgtech.comの場合にのみblog.hn-pgtech.comへのリダイレクトを行い、無限ループされないような設定にしています。

ここまでレンタルサーバ側で設定できていれば、AdSense のコードが適切に設定されていれば問題ないはずです。

AdSense のコードは、Gatsby Head API の設定ができていれば SEO コンポーネントに追加するだけで OK です。

"/src/components/seo.jsx" 
import * as React from 'react';
import PropTypes from 'prop-types';
import { useStaticQuery, graphql } from 'gatsby';
import defaultImage from '../images/ogp.png';

const Seo = ({ description = '', meta = [], title, img, location, type, date, modified }) => {

  // 省略

  return (
    <>

      // 省略

      // 追加
      <script
        async
        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
        crossorigin="anonymous"
      />

    </>
  );
};

Seo.propTypes = {

  // 省略

};

export default Seo;

Gatsby Head API の実装方法は以下の記事を参考にしてください。

ここまで設定できていれば審査を要求すれば審査中のステータスになるはずです。