どうも、がみたかです。
Googleのモバイルページに対する取り組みとして、「AMP（アンプ）」と呼ばれるものが出てきました。
この「AMP（アンプ）」は特に今すぐ対策しないといけないものではありませんが、Wordpressを使っているとプラグインで簡単にできるものの、安易に手を出して色々と不具合が出たので、簡単にできる対策について残しておこうと思います。
この記事の目次
AMP（アンプ）とは何か？
そもそも「AMP（アンプ）」とは何かというと、「Accelerated Mobile Pages（アクセラレイテッド モバイル ページ）」の略で、余計なプログラムを極限まで削り、モバイルページの高速表示するための仕組みです。
詳しくはわかりやすく書かれているこちらのブログを読んでみてください＾＾
→ブログのAMP対策の為に最低押さえておきたい4つのポイント！｜ブログマーケッターJUNICHI
WordPressはプラグインで簡単に実装できる
AMP（アンプ）は元々のページとはまた別の扱いになるので、実装するにはテンプレートに依存するのですが、そこはWordpress…
プラグインで簡単に実装することができます＾＾
こちらのプラグインをインストールして有効にするだけでAMPが実装されます。
AMPプラグインのインストール＆「有効化」
プラグインの新規追加画面で「AMP」と検索すると出てくるそのまんまの名前のプラグインで、それをインストール→有効化してください。
有効化をしたら、スマホからブログ記事のURLの末尾に「 /amp/ 」と付け加えるとAMPでのページが表示されます。
AMPの表示
実は、Wordpressではプラグインで簡単にAMPを実装できるのですが、まだまだ不完全な状態で、色々と不具合が表示されます。
プラグインでAMP（アンプ）をプラグインで実装した時に生じた不具合
これらの不具合は大きく分けて以下の通りになります。
- Google Analyticsでアクセスがカウントされない。
- デザインがダサい。
- ウィジェットが表示されない。
- SNSのシェアボタンが無い。
その原因として、ページの高速化を優先し、JavaScript（ジャバスクリプト）を読み込まないため、これらの不具合が出てしまいます。
また、アフィリエイトリンクも機能しないため、専用のコードを貼らないと、報酬が発生しない可能性があります。
他にもサーチコンソールでのエラー表示が出てしまうという声も聞いています。
ですが、そこはWordpress…
プラグインで ”ある程度” 解決できてしまうことがわかりました！
そんなAMPの拡張プラグインについて解説していこうと思います＾＾
AMP（アンプ）の拡張プラグイン「AMP for WP – Accelerated Mobile Pages」
AMPに関するプラグインは他にもたくさんあるので、どれが良いのかは正直わかりませんが、上記でインストールしたプラグイン「AMP」の設定を拡張する「AMP for WP – Accelerated Mobile Pages」というプラグインを使っていきます。
プラグインのインストール
1.まずはインストール＆有効化
AMP拡張プラグインのインストール＆有効化
新規追加ページから直接検索もしくは「AMP」で検索していただき、下にスクロールしていくと「AMP for WP – Accelerated Mobile Pages」があるので、インストール＆有効化してください。
AMP拡張プラグインの設定
1.メニューバーの「AMP」から設定をしていきます。
AMP拡張プラグインの設定１
2.「General」でGoogle Analyticsの設定をします。
AMP用Google Analyticsの設定
Analytics Typeを「Google Analytics」に合わせて、「UA-XXXXX-Y」のコードを入力します。
ここでは、通常ページと同じコードを入力すればいいでしょう。
Google Analyticsのリアルタイムで確認
スマホの4G回線でアクセスして、AMPのページがGoogle Analyticsに反映されているのを確認できました＾＾
※自宅の回線だとアクセスを除外する設定をしている場合があるため
3.「Design」でテンプレートの変更やCSSの編集ができます。
AMPページのデザイン設定
ちなみに「Design One」は拡張無しの表示。
AMP「 Design One」の表示
テキストが明朝体になり、「とりあえずAMPにしました感」で正直ダサいですw
また「Design Two」はこんな感じになります。
AMP「Design Two」の表示
フォントが変更され、少し読みやすくなります。
しかし、これだけではまだ何となく読みにくいので、CSSを編集して見出しを装飾するだけでもかなり読みやすくなります。
統一感を持たせるために、通常ページと揃えておくと良いかもしれませんね＾＾
見出しH2の装飾
4.「Advertisement」でGoogleアドセンスを決まった位置に挿入することができます。
アドセンスの設置画面
- アドセンスの管理画面で、サイズを「レスポンシブ」で広告を作成し、コードを取得します。
- data-ad-client=”ca-pub-XXXXXXXXXXXXXX“←この「ca-pub-XX〜」部分を「Data AD Client」にコピペ。
- data-ad-slot=”XXXXXXXXXX“←この「X〜」の部分を「Data AD Slot」にコピペ。
そして、保存するとこのようにアドセンスが表示されます。
アドセンスの設置
また、この項目にはAD1〜AD4と4箇所のアドセンスを設置することができます。
- AD1＝ヘッダー（メニューの下）
- AD2＝フッター（ページの最下部）
- AD3＝アイキャッチ下
- AD4=記事下
コピペするだけで自動的にAMP対応のアドセンス広告を表示してくれるので、コードをあまり触りたくない人にはとても助かるプラグインですね＾＾
5.「Single」にある「Sticky Social Icons」で追尾SNSボタンを表示します。
追尾SNSボタンの設置
ONにすると、画面の下に追尾型のSNSボタンが表示されます。
6.「Social」で追尾SNSボタンに表示する項目を選びます。
SNSの設定
7.「Translation Panel」の項目で表示されるテキストの編集ができます。
表示テキストの編集
ひとまず、これら7つの項目を設定しておくと、ある程度AMPとしての表示はできるかと思います。
AMP（アンプ）を拡張するプラグインのまとめ
スマホの表示スピードが劇的に速くなる「AMP（アンプ）」ですが、その圧倒的な表示スピードのために様々なものを犠牲にしています。
特に「JavaScript」の読み込みを行わないのが一番大きな犠牲でしょう。
なぜなら、Wordpressの自由な表現を支える技術として「JavaScript」は欠かせないものであり、
- Google Analyticsの計測（拡張で対応可）
- アフィリエイトリンクの計測（専用リンクの発行で対応可）
- ウィジェットの表示（CTAやサイドバー）
- SNSボタンの表示（拡張で対応可）
これらからわかるように、ビジネスとしてWordpressを使うのに必要不可欠のものが一切使えません。
もちろん、ネットショップの機能も一切使えません。
アフィリエイトサイトならともかく、自分のビジネスを持っていて、CTA（コールトゥアクション）のウィジェットからサービスの申し込みやメルマガ登録につなげている人ですと、AMPを導入するには犠牲にするものが多すぎるため、もっと情報が出揃うまでは手を出すべきではないと思います。
また、アフィリエイトのASPでもまだまだAMPに対応していないASPもあります。
httpsですら未対応のASPがまだあるので、AMPの対応はまだまだ先になるでしょうね(^_^;)
試験的に導入しているサイトも「AMP」のプラグインを止め、各ASPの対応が充実するまで様子見をしようと思いますw
ちなみにこちらのページがAMP導入+拡張プラグインを試験的に行なっているページです。
→2年に1度、定期的にやってくる「車検」という名のイベント。さてどうする？|Sprotscarlife.net
では、今回はこの辺で！
アクセスバーズ®を詳しく知りたい？
アクセスバーズ®を、わかりやすく解説したメルマガ講座やってます。
登録していただいた特典として、
アクセスバーズ®のセッションを特別価格で受けていただけます＾＾
アクセスバーズ®を受けてみませんか？
バーズ®ファシリテーターになって、ますますパワーアップ！？
アクセスバーズ®セッションのお申し込みはこちらまで＾＾
アクセスバーズ®を習ってみませんか？
習ったその日からアクセスバーズ®が使えるようになる！
アクセスバーズ®1日講座を随時開催しています＾＾
