【WordPress】2019年2月AMP用ページにGoogleアドセンス広告を表示させる方法

AMP用ページには、限られたタグやコードしか設置出来ません。
なので現状、AMPページにはそのままではGoogleアドセンス広告を設置出来ません。(今後出来るようになるかもしれませんが)
そこで、2019年2月現在のWordPressのAMPプラグインを用いたAMPページでGoogleアドセンス広告の設置方法を解説していきたいと思います。

*追記
AMPプラグインのアップデートにより、コードが消えましたのでもう一度この記事の方法でコードを設置してください。
AMP Settingで「Template Mode」は、「Reader」を選択してください。

WordPress AMPプラグインの導入

WordPressの管理画面左のメニューから、プラグイン>新規追加 を開きます。

「プラグインの検索窓」AMPと入力し検索します。

「AMP」というプラグインを「今すぐインストール」をし有効にします。

Googleアドセンスで新しい広告ユニットを作成する

AMP用のGoogleアドセンス広告ユニットを新しく作成します。

1、GoogleAdSenseのページのコンテンツ広告ユニットを開きます。

2、左上の「+新しい広告ユニット」を開きます。

3、テキスト広告とディスプレイ広告を選びます。

4、名前を「サイト名+AMP用」などわかりやすい名前を入れます。

5、広告サイズを「レスポンシブ」を選びます。

6、「保存してコードを取得」を押します。

7、広告ユニット一覧から、先程作ったAMP用の「コードを取得」を押します。(コードタイプは同期)

8、広告コードを一旦メモ帳などにコピーして貼り付け保存しておきます。

AMPプラグインに広告コードを設置する

AMP用広告コードの設置

1、WordPressの管理画面から、プラグイン>プラグインエディターを開きます。

2、右上の「編集するプラグインを選択:」「AMP」を選び選択ボタンを押します。

3、amp/amp.php の編集 (使用中)のページになります。

4、右の列のプラグインファイルの中から「templates→single.phpを開きます。

5、amp/templates/single.php の編集 (使用中)のページになります。

6、</footer>と</article>の間に次のコードを設置します。

先程作った、AMP用の広告ユニットコード(同期)の中から

の○と△の部分の数字を、次のコードに書き込みます。(○と△の数字は違います)

33行目辺りの、</footer>と</article>の間に書き込んだ、上のコードを貼り付けます。

7、左下の「ファイルを更新」を押します。

AMPスクリプトの設置

GoogleAdSense広告を表示させるためのスクリプトを設置します。

1、WordPressの管理画面から、プラグイン>プラグインの編集を開きます。

2、右上の「編集するプラグインを選択:」「AMP」を選び選択ボタンを押します。

3、amp/amp.php の編集 (使用中)のページになります。

4、右の列のプラグインファイルの中から「templates/html-start.php」を開きます。

5、amp/templates/html-start.php の編集 (使用中)のページになります。

6、16行目辺りの、<head>の下に次のコードをそのまま設置します。

7、左下の「ファイルを更新」を押します。
8、以上で、設置は完了です。

AMP自動広告の設置方法

Google AdSense AMP用の自動広告の設置も出来たのでご紹介いたします。

Google AdSenseのページから、広告>自動広告>AMP自動広告 を開きます。

1、「テキスト広告とディスプレイ広告のフォーマットをオンにします」スイッチをオンにする。

2、「新しいフォーマットを自動的に取得する」チェックを入れます。

3,「このスクリプトをコピーして、AMP HTML の head タグ内に貼り付けます」のコードを、プラグインエディターからamp/templates/html-start.php の16行目辺り、<head>の下に貼り付ける。

4、「この広告コードをコピーして、AMP HTML の本文に貼り付けます」のコードを、プラグインエディターからamp/templates/single.php の33行目辺り、</footer>と</article>の間に貼り付ける。

*AMP用の自動広告を設置する場合、上記方法の広告ユニットの設置はしないでください。(自動広告のコードだけにする)

こちらの方法で試しましたら、記事本文中・記事下にも自動的に広告が入り効果が高そうです。

AMPページが有効になったかテストする

AMPテストページで、投稿のページのURLの後ろに「/amp/」を付けてテストしてみましょう。

*サイトのトップページではなく、投稿ページのURLです。
「有効なAMPページです。」と出ればOKです。

エラー等が出た場合は、コードの貼り付け方が間違っている可能性があるので確認してください。

AMPページにGoogleアドセンス広告が表示されるか確認する

投稿のページのURLに「/amp/」を付けて、スマートフォンのブラウザで確認してください。
記事の下に、Googleアドセンス広告が表示されていれば成功です。

PCではなく、スマートフォンで確認してください。(PCでは広告が表示されない可能性があります)

*サイトのトップページではなく、投稿ページのURLです。

*Googleアドセンスの広告は、表示されるまで時間がかかることがあります。(私の場合、約30分後に広告ユニットが表示されました。)

*今後プラグインのアップデートがあると、書き込んだコードが消えますのでその都度設定の程よろしくお願いします。

*今後プラグインのアップデート等で、コードを書き込まなくても設定で広告ユニットを設置出来るようになる可能性もあります。

【WordPress】2018年10月AMP用ページにGoogleアドセンス広告を表示させる方法
この記事が役に立ったらフォローして、ブログの更新情報をチェックしよう!