AMPのプラグインで「ソーシャルボタン」と「アナリティクス」を取り戻し「アドセンス」も「CSSカスタマイズ」もできるようになる方法

どうも、がみたかです。

Googleのモバイルページに対する取り組みとして、「AMP（アンプ）」と呼ばれるものが出てきました。

この「AMP（アンプ）」は特に今すぐ対策しないといけないというものではありませんが、Wordpressを使っているとプラグインで簡単にできるものの、そのままでは色々と不具合が出ます。

その不具合も拡張プラグインで対策できるので、そのあたりについて書いていこうと思います。

プラグインまかせだなw

ただし、このような記事を書いていますが個人的にはAMP化はまだしなくても良いと思っています。

それらを踏まえてこの記事を読んでいってもらえたらと思います。

この記事の目次

AMP（アンプ）とは何か？
- WordPressはプラグインで簡単に実装できる
- プラグインでAMP（アンプ）をプラグインで実装した時に生じた不具合
AMP（アンプ）の拡張プラグイン「AMP for WP – Accelerated Mobile Pages」
- プラグインのインストール
- AMP拡張プラグインの設定
AMP（アンプ）を拡張するプラグインのまとめ

AMP（アンプ）とは何か？

そもそも「AMP（アンプ）」とは何かというと、「Accelerated Mobile Pages（アクセラレイテッド　モバイル　ページ）」の略で、余計なプログラムを極限まで削り、モバイルページの高速表示するための仕組みです。

詳しくはわかりやすく書かれているこちらのブログを読んでみてください＾＾

→ブログのAMP対策の為に最低押さえておきたい4つのポイント！｜ブログマーケッターJUNICHI

WordPressはプラグインで簡単に実装できる

AMP（アンプ）は元々のページとはまた別の扱いになるので、実装するにはテンプレートに依存するのですが、そこはWordpress…

プラグインで簡単に実装することができます＾＾

こちらのプラグインをインストールして有効にするだけでAMPが実装されます。

1_amp%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab

AMPプラグインのインストール＆「有効化」

プラグインの新規追加画面で「AMP」と検索すると出てくるそのまんまの名前のプラグインで、それをインストール→有効化してください。

有効化をしたら、スマホからブログ記事のURLの末尾に「 /amp/ 」と付け加えるとAMPでのページが表示されます。

AMPの表示

シンプル・イズ・ベスト！

実は、Wordpressではプラグインで簡単にAMPを実装できるのですが、まだまだ不完全な状態で、色々と不具合が表示されます。

プラグインでAMP（アンプ）をプラグインで実装した時に生じた不具合

これらの不具合は大きく分けて以下の通りになります。

Google Analyticsでアクセスがカウントされない。
デザインがダサい。
アドセンスが表示されない（上記画像は設定後の画像です）
ウィジェットが表示されない。
SNSのシェアボタンが無い。

その原因として、ページの高速化を優先し、JavaScript（ジャバスクリプト）を読み込まないため、これらの不具合が出てしまいます。

CSSすら読み込まないので、かなりシンプルな表示になります

また、アフィリエイトリンクも機能しないため、専用のコードを貼らないと、報酬が発生しない可能性があります。

他にもサーチコンソールでのエラー表示が出てしまうという声も聞いています。

ですが、そこはWordpress…

プラグインで ”ある程度” 解決できてしまうんです！

そんな「AMPの拡張プラグイン」について解説していこうと思います＾＾

その代わり、余分なものを読み込むことになるので、気持ち程度遅くなります(^_^;)

AMP（アンプ）の拡張プラグイン「AMP for WP – Accelerated Mobile Pages」

AMPに関するプラグインは他にもたくさんあるので、どれが良いのかは正直わかりませんが、上記でインストールしたプラグイン「AMP」の設定を拡張する「AMP for WP – Accelerated Mobile Pages」というプラグインを使っていきます。

プラグインのインストール

1.まずはインストール＆有効化

2_amp%e6%8b%a1%e5%bc%b5%e3%83%95%e3%82%9a%e3%83%a9%e3%82%af%e3%82%99%e3%82%a4%e3%83%b3

AMP拡張プラグインのインストール＆有効化

新規追加ページから直接検索もしくは「AMP」で検索していただき、下にスクロールしていくと「AMP for WP – Accelerated Mobile Pages」があるので、インストール＆有効化してください。

2017.7.16追記：

この記事を書いた当初より、設定項目やエクステンション（追加機能：有料）がかなり増えています。

AMP拡張プラグインの設定

1.メニューバーの「AMP」から設定をしていきます。

3_amp%e6%8b%a1%e5%bc%b5%e3%83%95%e3%82%9a%e3%83%a9%e3%82%af%e3%82%99%e3%82%a4%e3%83%b3%e3%81%9d%e3%81%ae2

AMP拡張プラグインの設定１

2.「General」でGoogle Analyticsの設定をします。

4_amp%e6%8b%a1%e5%bc%b5%e3%83%95%e3%82%9a%e3%83%a9%e3%82%af%e3%82%99%e3%82%a4%e3%83%b3%e3%81%9d%e3%81%ae3

AMP用Google Analyticsの設定

Analytics Typeを「Google Analytics」に合わせて、「UA-XXXXX-Y」のコードを入力します。

ここでは、通常ページと同じコードを入力すればいいでしょう。

%e3%82%b5%e3%83%9e%e3%83%aa%e3%83%bc_-_%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b9

Google Analyticsのリアルタイムで確認

スマホの4G回線でアクセスして、AMPのページがGoogle Analyticsに反映されているのを確認できました＾＾

※自宅の回線だとアクセスを除外する設定をしている場合があるため

3.「Design」の項目では、テンプレートの変更やCSSの編集ができます。

5_amp%e6%8b%a1%e5%bc%b5%e3%83%95%e3%82%9a%e3%83%a9%e3%82%af%e3%82%99%e3%82%a4%e3%83%b3%e3%81%9d%e3%81%ae4

AMPページのデザイン設定

ちなみに「Design One」は拡張無しの表示。

AMP「 Design One」の表示

テキストが明朝体になり、「とりあえずAMPにしました感」で正直ダサいですw

また「Design　Two」はこんな感じになります。

AMP「Design Two」の表示

フォントがゴシック体に変更され、少し読みやすくなります。

しかし、これだけではまだ何となく読みにくいので、CSSを編集して見出しを装飾するだけでもかなり読みやすくなります。

統一感を持たせるために、通常ページと揃えておくと良いかもしれませんね＾＾

見出しH2の装飾

2017.7.16追記：

「Design　Three」が追加されていましたが、「Design　One」でいくつかカラー変更できる程度で明朝体でした(^_^;)

見やすさを求めるなら「Design　Two」をオススメします。

他に追加になったのが、

電話をかけるボタン
サイト内検索フォーム

ONにするとここに表示されます。

どうせなら追従ヘッダーにしたらいいのに(^_^;)

4.「Advertisement」でGoogleアドセンスを決まった位置に挿入することができます。

アドセンスの設置画面

アドセンスの管理画面で、サイズを「レスポンシブ」で広告を作成し、コードを取得します。
data-ad-client=”ca-pub-XXXXXXXXXXXXXX“←この「ca-pub-XX〜」部分を「Data AD Client」にコピペ。
data-ad-slot=”XXXXXXXXXX“←この「X〜」の部分を「Data AD Slot」にコピペ。

そして、保存するとこのようにアドセンスが表示されます。