WordPressをAMPに対応する方法(Google Analytics、AdsenseもOK)

AMPはGoogleの検索結果でモバイルサイトを高速表示する仕組みです。

今回は、WordPressをAMPに対応する方法を紹介します。プラグインの「AMP」と「Facebook Instant Articles & Google AMP Pages by PageFrog」を組み合わせて利用することで、簡単にAMP対応ができます。Google Analyticsや、Adsenseにも対応しています。

目次

  1. プラグイン「AMP」をインストール
    簡単なAMP対応ができます。
  2. プラグイン「Facebook Instant Articles & Google AMP Pages by PageFrog」をインストール
    ほぼ完璧なAMP対応ができます。
  3. AMPの見た目をカスタマイズする
    AMP対応ページの見た目を調整します。
  4. AMPにGoogle Analyticsを設定する(他の解析ツールもOK)
    AMP対応ページにGoogle Analyticsタグを挿入します。
  5. AMPにGoogle Adsenseを設定する
    AMP対応ページにGoogle Adsense広告を表示します。

AMPについては、こちらの記事もどうぞ

プラグイン「AMP」をインストール

プラグイン、「AMP」をインストールします。これは、インストールするだけでWordPressサイトをAMPに対応できるという便利なプラグインです。

cap20

バージョン0.2までは色々と不具合がありましたが、バージョン0.3で大幅に改善しました。

インストールして有効化するだけで、AMP対応は完了です。細かな設定項目も一切ありません。

例えば、記事のURLが
「https://www.webtoolnavi.com/theme-check/」の場合、
末尾に「/amp/」をつけた、
「https://www.webtoolnavi.com/theme-check/amp/」がAMP対応ページのURLになります。

URLの設定がページ番号になっている場合は、「https://www.webtoolnavi.com/?p=6433&amp=1」のように、末尾に「&amp=1」をつけます。

AMPのURLにアクセスしてみると、それっぽく見えます。

cap15

しかし、Structured Data Testing Toolで確認してみると少しエラーが出ています。

cap14

また、このプラグインは見た目の調整や、Google Analyticsタグなどアクセス解析タグの挿入、Google Adsense広告の表示ができません。

エラーを解消して、細かいカスタマイズを可能にするのがプラグイン「Facebook Instant Articles & Google AMP Pages by PageFrog」です。

プラグイン「Facebook Instant Articles & Google AMP Pages by PageFrog」をインストール

プラグイン「Facebook Instant Articles & Google AMP Pages by PageFrog」は、プラグイン「AMP」と組み合わせて使うプラグインです。

cap21

プラグイン「AMP」のエラーを解消して、ページのデザインの調整、Google Analyticsタグなどアクセス解析タグの挿入、Google Adsense広告の表示ができます。

インストールして有効化すると、「Mobile Formats」のメニューが追加されます。

cap22

あらかじめプラグイン「AMP」をインストールしておくと、「Google AMP HTML」の表示が「Ready」になります。

cap24

「Mobile Formats > Settings」メニューに進みます。

cap25

「GOOGLE AMP HTML」の「投稿」にチェックを入れて、「Enable AMP」を押すと、これまでに投稿した記事がAMPに対応した状態になります。固定ページも対応する場合は、「固定ページ」にチェックを入れます。

「417 of 417 enabled」と表示されたので、過去に投稿した417記事がAMP対応ページなりました。

cap28

「Default setting for new posts」では、今後投稿する記事をAMP対応するかどうか設定できます。

記事をAMP対応するには、投稿を「Enabled」にします。固定ページも対応する場合は、こちらも「Enabled」にします。

設定が完了したら、「Save All Settings」を押して、保存します。

cap31

これで、AMP対応は完了です。

AMP対応ページにアクセスしてみると、「AMP」プラグイン単独のときとは見た目も変わっています。

cap32

Structured Data Testing Toolで確認しても、エラーは出ていません。

cap33

AMPの見た目をカスタマイズする

「Mobile Formats > Styling」から、AMP対応ページの見た目のカスタマイズができます。

cap34

左側のエリアで、ロゴの変更や、文字色の変更ができます。残念ながら、背景色などの設定はできません。

変更が完了したら、「変更を保存」ボタンを押します。

cap35

AMPページの見た目のカスタマイズに関する記事

AMPにGoogle Analyticsを設定する(他の解析ツールもOK)

「Facebook Instant Articles & Google AMP Pages by PageFrog」では、AMP対応ページにGoogle Alnalyticsのタグを挿入することができます。他のアクセス解析タグも設定できます。

「Mobile Formats > Analytics」に進みます。

cap37

対応しているアクセス解析ツールが一覧表示されるので、「GOOGLE ANALYTICS」を選択します。他のアクセス解析タグを挿入する場合は「OTHER ANALYTICS」を選択します。

cap38

「Sign in with Google」を押して、Google Analyticsの認証画面に進みます。

cap40

Googleにログインして、「許可」ボタンを押します。

cap40

Analyticsのサイトが一覧表示されるので、「Choose Site」を押して、連携するサイトを選択します。

cap42

最後に、「Enable Integration」を押して有効化すると、AMP対応ページにGoogle Analyticsタグが挿入されます。

cap43

ソースを見ると、Analyticsタグが挿入されていました。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-xxxxxx-xx"
      },
      "triggers": {
        "trackPageview" : {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

Google Analyticsで確認すると、きちんとアクセスが取得できていました。

cap45

AMPにGoogle Adsenseを設定する

「Facebook Instant Articles & Google AMP Pages by PageFrog」では、AMP対応ページにGoogle Adsense広告を表示することができます。

「Mobile Formats > Ads」に進みます。

cap46

「Sign in with Google」を押して、Adsenseアカウントと連携します。

cap47

Adsenseアカウントにログインして、「許可」ボタンを押します。

cap48

Adsenseアカウントが一覧表示されるので、「Choose」ボタンで選択します。

cap51

AMP対応ページに表示する広告ユニットを選択します。

広告ユニットは、分析のために、AMP対応ページ専用のものを用意しておきましょう。

表示される広告サイズは、「300 x 250」、「336 x 280」の2種類のようです。大きなサイズの広告は、自動的に「336 x 280」で表示されるようです。

cap53

「Enable Google AdSense for AMP HTML Pages」にチェックを入れて有効化し、「Save All Settings」を押して保存します。

cap54

残念ながら、広告の表示位置はあまり細かく調整することはできません。

「Ad Placement」の、「Show an ad every 250 words」というのは、250語ごとに広告を表示するというものです。

記事の本文、250語ごとに、最大3つ広告を自動で挿入します。

ただし、これは英語の単語ベースの考え方で、日本語は文章が連続しているためどの程度で表示されるか、調整する必要があります。記事の一番下にのみ表示したい場合、999など大きな数字にしておくと、最後にのみ表示されます。

cap55

ソースを見ると、Adsenseタグが挿入されていました。

<div class="ad-container"><amp-ad width="336" height="280" type="adsense" data-ad-client="ca-pub-1347456784606259" data-ad-slot="6227850758"></amp-ad></div>

AMP対応ページにAdsense広告が表示されました。

cap56

まとめ

プラグインの「AMP」はWordPressを簡単にAMP対応できますが、細かな設定ができません。プラグイン「Facebook Instant Articles & Google AMP Pages by PageFrog」を追加でインストールすることで、見た目の調整(ロゴや文字色)、Google Analyticsタグの挿入(他のアクセス解析タグもOK)、Google Adsenseタグの挿入ができるようになります。

関連記事

人気の記事

目的別おすすめのWordPressテーマ(無料・有料)【2018年版】
目的別おすすめのWordPressテーマ(無料・有料)【2018年版】
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ10選
アドセンス運用に最適なWordPressテーマ10選

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Posted on
  • Updated on
  • Views 4,470