WordPressをAMP化して、Google AdsenseもAMP対応する方法
AMPとはGoogleが提唱しているモバイル用にデータをGoogleでキャッシュし、キャッシュデータからサイトを表示して、超高速にモバイルユーザにサイト閲覧させて、ユーザビリティを高める仕組みです
WordPressではAMP化は非常にカンタンで、Wordpressのプラグインで「AMP」と検索して、プラグインを有効化するだけでAMP化することが可能です。
有名どころとしては、AMP Projectが作成している「AMP」プラグイン
もしくは「AMP for WP-Accelerated Mobile Page」です。
今回はAMP Projectが作成している「AMP」プラグインを使ったAMP化手順を紹介します。
目次
１．AMPプラグインをインストール
WordPressのプラグインで「AMP」と検索して、AMPプラグインをインストールします
２．プラグインを有効化して設定
プラグインを有効化して、設定画面に移動します
３．テンプレートモードを選択
Standard は、AMP だけで配信するモードで、サイトを完全 AMP 化するため、URLは１つになります。
Transitional は、通常のモバイルページと AMP ページがそれぞれ作成されます。
Reader も、通常のモバイルページと AMP ページがそれぞれ作成されます。
Transitional と異なる点は、AMP 用に別のテーマを準備する点で、現在利用しているテーマがAMPプラグインによって適切に AMP 変換できないときに利用します。
４．Redirect mobile visitors to AMP
モバイルユーザは自動的にAMPサイトに移動するように設定できます
５．Plugin Suppression
AMP化した際に既存の別のプラグインがエラーで判定される場合があります。
AMPのときに無効化するプラグインを選択することができます。
６．Analysis設定
AMPサイトは通常のGoogle Analyticsではカウントできないため、別でAnalytics設定を行う必要があります。
種類欄に「googleanalytics」と入力すると、上記のようにanalytics用のテンプレートが表示されるので
"account": "XXXXXXXXXXX"
のXXXXXXXXXXXのところにUA-XXXXX-YというGoogle AnalyticsのIDを入力します。
設定を保存したら、AMPプラグインの設定は完了です。
７．サイトの確認
サイトの後ろに?ampをつけて、サイトにアクセスするとAMPサイトを閲覧することができます。
https://example.com/sample/?amp=1
モバイルのRedirectが有効になっている場合は、モバイルからアクセスすると自動的に?ampサイトにRedirectされます
Google Chromeを使っている場合はAMP Validatorというツールがあり、カンタンにチェックすることも可能です
８．Google Adsenseをつけ直す
AMPサイトではGoogle Adsenseの通常のHTMLコードの場合は表示されないため、AMPサイトの場合は別でAMP用コードで広告を表示させるようにする必要があります。
AMPコードはGoogle Adsenseの各広告ユニットのコード取得欄でAMPを選択すると表示されます
まずHeaderにスクリプトを埋め込んでおきます
次に広告を表示させたい場所にAMPコードを挿入します。
以上でAMPサイトを閲覧した際にAMPコードが動作して、Google Adsenseが表示されるようになりました。
８−１.HTMLコードとAMPコードを同居させる方法
AMP Google AdsenseコードをHTML Google Adsenseコードと入れ替えてしまうと、AMPではないサイトにアクセスした場合、広告が表示されません。
そのため、同じテンプレートでAMPサイトの場合はAMP Google Adsenseコードを、通常ページの場合はHTML Google Adsenseコードが表示させるようにする必要があります。
やり方はカンタン下記のように「両方とものコードを書く」で終わりです。
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="xxxxxxx"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxx"
data-ad-slot="xxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
ただし、こちらはレスポンシブ対応ユニットのみ有効になり、もしサイズ指定広告でこのやり方した場合、AMPサイトで見たら、HTMLコードの場所が空白になってしまうので注意です。
９．自動広告のAMP有効化
Google Adsense上の広告掲載の自動化項目で「AMPをオン」にしましょう。