この記事では、プラグイン『AMP for WP – Accelerated Mobile Pages』を使ってAMPのページにGoogle AdSense、Google Analyticsを対応させる方法について紹介していきます。
多くの記事でプラグイン『AMP』『Glue for Yoast SEO & AMP』『Facebook Instant Articles & Google AMP Pages by PageFrog』について紹介されていますが、これらのプラグインは更新頻度が低い（対応が遅い）ためお勧めできません。
本記事で対象になるのは、WordpressでWebサイトを運営されている方で、安定的に簡単にAMP化しAdSense導入や自由度高くデザインを変えたい方。なお、エックスサーバーなど、どのサーバーを利用しているか、テーマを利用しているかは関係なく同じ手順で導入できます。
本記事で紹介する『AMP for WP – Accelerated Mobile Pages』を使うことで以下のメリットがあります。
- 『function.php』や『テーマの編集』コードやタグをいじる必要がない（初心者に優しい）
- Google アドセンスや アナリティクスに対応しており掲載場所の設定等自由度が高い
- AMPページのデザインを容易にカスタマイズできる
- プラグイン『Yoast SEO』『Contact Form 7』と連動している
- 記事ページだけでなくトップページのAMP化、更にメニューやデザインの調整を細かく設定できる
- Twitter, Facebook, Line, InstagramのSNSシェアボタンに対応している
- 海外では一番広く使われているプラグインで更新頻度が高い
デメリットとしては、プラグイン自体が『英語』ということが挙げられますが、本記事では訳しながら解説していきたいと思います。
コンテンツ
プラグイン『AMP for WP – Accelerated Mobile Pages』をインストール＆有効化
プラグインをインストール＆有効化する
「プラグインを追加」からキーワード「amp」で検索し、最初に表示される「AMP for WP – Accelerated Mobile Pages」を使用します。右側の「AMP」プラグインではないので注意してください。
プラグインのインストール画面上記のプラグインの「今すぐインストール」をクリックし完了したら、次に「有効化」をクリックします。
『AMP for WP – Accelerated Mobile Pages』の設定方法
『AMP for WP – Accelerated Mobile Pages』を有効化するとダッシュボードに以下のように『AMP』の項目が追加されます。
AMP内にいくつかのメニューが出てきますが、実際に使うのは「Getting Started」のみです。
ロゴの設定
「Getting Started＞General」に進みます。
【Logo】
AMPページのヘッダーにつく、ロゴを設定します。推奨サイズは190×36のようですが、あまり気にしなくて良いです。特に指定しない場合は不要。
【Custom Logo Size】
上で指定したロゴ画像のサイズを指定することができます。ロゴ画像を指定していなければ特に不要。
一番下にある『Save Changes』をクリックして完了です。
ホームページ（トップページ）の設定
「Getting Started＞Homepage」に進みます。
ここではホームページ（トップページ）に関する設定をおこなうことができます。
【Homepage Support】
ホームページ（トップページ）をAMP化するかしないかの設定です。私はオンにしておきました。
【Front Page】
ホームページ（トップページ）に作成した固定ページが表示されるように設定することができます。私はオフにしました。
【Non-AMP HomePage link in Header and Logo】
ヘッダーに表示されるロゴをクリックした際に、AMP化されたページにとばすか非AMPページとばすか設定することができます。非AMPページにとばしたい場合はオンにします。
一番下にある『Save Changes』をクリックして完了です。
ページビルダー（プラグイン独自機能）の設定
「Getting Started＞Page Builder」に進みます。
【Page Builder】
ページビルダーとは、このプラグインを提供している「AMPforWP」という組織が独自に持たせた機能です。
オンにした場合、「外観＞ウィジェット」のメニューにAMP用のモジュールが表示されるようになり、通常のウィジェットと同じようにAMPウィジェットを設定することができます。
私は特に必要がないのでオフにしています。
アドセンス用の広告コードはこのAMPウィジェットに貼るべきかどうか。ここにアドセンス用の広告コードを貼ることもできますが、専用の機能があるのでここでは広告用のウィジェットとして使用しません。
一番下にある『Save Changes』をクリックして完了です。
デザインの設定
「Getting Started＞Design」に進みます。
ここではヘッダーや文字の色を設定することができます。
【Design Selector】
[Design one][Design two][Design three]から好きなデザインを選択することができます。
[Design three]を選択するとカレーパラットが表示されるので自分の好みの色に設定することができます。
AMP化すると基本的に質素なデザインになってしまうので、ここで好みのデザインに設定しておくとよいです。
【Make Header UnSticky】
ヘッダーを固定表示にするかどうかの設定です。オンにすると固定表示から外れます。お好みでどうぞ。
【Featured Slider】
オンにするとホームページ（トップページ）にフューチャーしたい記事のスライドショーをつけることができます。
一番下にある『Save Changes』をクリックして完了です。
記事ページの設定
「Getting Started＞Single」に進みます。
ここでは記事ページに表示させたい項目を設定することができます。
【Sticky Social Icons】
オンにするとソーシャルアイコンが画面下に固定表示されるようになります。
【Next-Previous Links】
記事のコンテンツの下に「次の記事」「前の記事」のテキストリンクをつけることができます。
【Show Related Post from】
（関連記事に表示するための）記事に関連するタグ、カテゴリーを選択することができます。
【Number of Related Post】
関連記事に表示する「記事数」を指定することができます。
一番下にある『Save Changes』をクリックして完了です。
Google Adsenseの設定
「Getting Started＞Advertisement」に進みます。
ここではGoogle AdSenseの広告表示に関する設定をおこなうことができます。
下の箇所に最大6つまで広告を掲載することができます。私は「AD #3」と「AD #4」にのみ設定しました。
- AD #1 （ヘッダー下）
- AD #2 （フッター下）
- AD #3 （記事コンテンツの上）
- AD #4 （記事コンテンツの下）
- AD #5 （記事タイトルの下）
- AD #6 （関連記事の上）
設定したい箇所をクリックすると、新しい項目が展開されます。
【AD Size】
変更せずに「336×280」のままで良いでしょう。
【Data AD Client】【Data AD Slot】
Google Adsenseで広告コードを取得する必要があります。
Google Adsenseにアクセスし「広告設定＞広告ユニット」へ進み、挿入したい広告の「コードの取得」をクリックします。
・「モバイル用のレスポンシブ」のタイプで広告ユニットを作成することをおすすめします。
・AMPページに貼った広告へのアクセス数を管理するために、AMP用の広告ユニットを新しく作ることをおすすめします。
「コードの取得」をクリックすると、以下のようなコードが表示されるのでコード内の青字の部分を【Data AD Client】に、緑字の部分を【Data AD Slot】にコピペします。
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– テスト –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXXX”
data-ad-format=”auto”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
一番下にある『Save Changes』をクリックして完了です。
メニューの設定
「Getting Started＞Menu」に進みます。
【Auto Add AMP in Menu URL】
メニューのURLの末尾に自動的に「/amp」を付けるかどうかの設定です。特段の目的となければ、オンとします。
一番下にある『Save Changes』をクリックして完了です。
SNS連携の設定
「Getting Started＞Social」に進みます。
ここでは、SNSシェアボタン、自分のSNSアカウントの設定をおこなうことができます。
【Social】
表示したいSNSシェアボタン、それぞれについてオン/オフを選んでいきます。
Twitterを選択した場合は、ハンドル名を入力してください。
【Social Media Profiles (Design #3)】
ここでは自分のSNSアカウントを登録します。
該当のSNSをオンにし、それぞれ自分のアカウントのURLを入力します。
一番下にある『Save Changes』をクリックして完了です。
SEOの設定
「Getting Started＞SEO」に進みます。
ここではSEOに関するメタディスクリプションやプラグイン「Yoast SEO」との連動設定ができます。
Yoast SEOを使用してメタタグを設定している方は、「Meta Tags from Yoast」をオンにします。
【Advanced Index & No Index Options】
No indexとするページのタイプを設定することができます。
私はカテゴリーのみオンとしました。
一番下にある『Save Changes』をクリックして完了です。
Analytics（アクセス解析）の設定
「Getting Started＞SEO」に進みます。
ここではGoogle Analyticsをはじめとするアクセス解析ツールの設定をおこなうことができます。
【Analytics Type】
Google Analyticsを使用しているのであれば変更せず「Google Analytics」のままにします。
【Google Analytics】
Google Analyticsの、以下の形式のトラッキングIDを取得し入力します。
UA-XXXXX-Y
AMPページへのアクセス数を管理するために、AMP用のプロパティを新しく作ることをお勧めします。
一番下にある『Save Changes』をクリックして完了です。
表示の文字の置き換え設定
「Getting Started＞Translation Panel」に進みます。
ここでは、初期で設定されている英字テキストを指定する文字に置き換えることができます。
たとえば、初期状態では「Next Airticle」となっているテキストを、「次の記事へ」などのテキストに置き換えることができます。
例として、私は以下のように設定しましたが、各自好きなように設定してください。
| Show more Posts | 次のページへ |
| Show previous Posts | 前のページへ |
| Top | Top |
| View Non-AMP Version | 非AMPページはコチラ |
| Related Post | 関連記事 |
| Navigate | メニュー |
| On | 更新日: |
| Next | 次へ |
| Previous | 前へ |
| Footer | |
| Categories | カテゴリー |
| Tags | タグ |
| By | |
| Published by | 書いた人: |
| in | カテゴリー: |
| View Comments | コメントｗ見る |
| Leave a Comment | コメントを書く |
| at | |
| says | says |
| Edit | 編集 |
| ago | 前 |
| This post was last modified on | This post was last modefied on |
| Category (archive title) | Categori |
| Tag (archive title) | Tag: |
| View More Posts (Widget Button) | View More Post |
| Next Read | 次の記事: |
Contact Formの設定
※プラグイン「Contact Form 7」でお問い合わせフォーム使っている方向けです。
「Getting Started＞Contact Form」に進みます。
【Contact Form 7 Support】
通常のページで使用しているContact Form 7をAMPにしたい場合は、これをオンにします。
以上で必要な設定は完了です。
ご覧いただきありがとうございました。
