AMPのプラグインを拡張して、下がったPVとSNSボタンを取り戻せ!

この記事を書いている人
がみたか(石上貴哉)

ブログには必須!画像の簡単加工勉強会(Macの人向け)ゲスト講師:石上さん_-_YouTube

WordpressをはじめとするWeb関係を得意分野とし、またアクセスバーズ®︎というヒーリングを伝えるセラピストとして活動している「癒せるWeb屋さん」 です。Web関係では丁寧で迅速なサポートが支持され、某ブログスクールでは「いつも心にがみたかさん」というキャッチコピーをいただいていますw

詳しいプロフィールはこちら
●Facebook ●Twitter ●Instagram 

 

どうも、「癒せるWeb屋さん」がみたかです。

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

この「AMP(アンプ)」は特に今すぐ対策しないといけないものではありませんが、Wordpressを使っているとプラグインで簡単にできるものの、安易に手を出して色々と不具合が出たので、簡単にできる対策について残しておこうと思います。

偉大な冒険家
完全にプラグインまかせやけどな!

 

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でのページが表示されます。

ampsp1

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」があるので、インストール&有効化してください。

 

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拡張プラグインの設定1

 

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」は拡張無しの表示。

ampsp1

AMP「 Design One」の表示

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

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

ampsp2-2

AMP「Design Two」の表示

フォントが変更され、少し読みやすくなります。

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

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

見出しH2の装飾

見出しH2の装飾

 

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

アドセンスの設定

アドセンスの設置画面

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

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

アドセンスの設置

アドセンスの設置

また、この項目にはAD1〜AD4と4箇所のアドセンスを設置することができます。

  • AD1=ヘッダー(メニューの下)
  • AD2=フッター(ページの最下部)
  • AD3=アイキャッチ下
  • AD4=記事下

コピペするだけで自動的にAMP対応のアドセンス広告を表示してくれるので、コードをあまり触りたくない人にはとても助かるプラグインですね^^

 

5.「Single」にある「Sticky Social Icons」で追尾SNSボタンを表示します。

追尾SNSボタンの設置

追尾SNSボタンの設置

 

ONにすると、画面の下に追尾型のSNSボタンが表示されます。

ampsp2

 

6.「Social」で追尾SNSボタンに表示する項目を選びます。

SNSの設定

SNSの設定

 

7.「Translation Panel」の項目で表示されるテキストの編集ができます。

表示テキストの編集

表示テキストの編集

 

ひとまず、これら7つの項目を設定しておくと、ある程度AMPとしての表示はできるかと思います。

 

2016.12.9追記:

この拡張プラグインでは、固定ページもAMP化することができますが、お問い合わせや申し込みのフォームが使えなくなります。

また、固定ページの一部(表が原因?)でサーチコンソールのエラーも確認されたので、もしこのプラグインでAMPを使う場合は、固定ページのAMP化はしない設定をおすすめします(^_^;)

サーチコンソールのエラー

サーチコンソールのエラー

しかし、拡張プラグインを入れない状態でよく耳にしていた投稿ページでのエラーは確認されていません^^

 

固定ページのAMP化に関する設定は「General」の一番下になります。

この項目をOFFにすると固定ページがAMP化されなくなります。

固定ページの非AMP設定

固定ページの非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度、定期的にやってくる「車検」という名のイベント。さてどうする?|Sportscarlife.net

 

では、今回はこの辺で!

 

アクセスバーズ®を詳しく知りたい?

アクセスバーズ®を、わかりやすく解説したメルマガ講座やってます。

登録していただいた特典として、

アクセスバーズ®のセッションを特別価格で受けていただけます^^

 

アクセスバーズ®を受けてみませんか?

バーズ®ファシリテーターになって、ますますパワーアップ!?

アクセスバーズ®セッションのお申し込みはこちらまで^^

Facebookアイキャッチテンプレ02

アクセスバーズ®を習ってみませんか?

習ったその日からアクセスバーズ®が使えるようになる!

アクセスバーズ®1日講座を随時開催しています^^

この講座は2017年5月20日で一旦休講しますので、

アクセスバーズ®を「がみたか」から習得したい人はお早めに!

開催日は下記リンクよりご確認ください!

開催リクエストもお待ちしています!

アクセスバーズ1日講座

 

 

この記事に共感していただけたら
いいね!をお願いします。

Twitter で

記事が気に入ったらシェアをお願いします^^

ABOUTこの記事をかいた人

がみたか

兵庫県加古川市在住の2児の父親です。 ・アクセスバーズ®ファシリテーター ・Webの引越し屋さん ・Web屋さん ・オルゴナイトのネットショップ店長 など、「お客さんの周りも笑顔にしたい」という思いで、あれこれやってます^^ 趣味は車(主にスポーツカー)にギター(主にHR/HM)にパソコン(WinもMacも使えます)です。 こんな僕ですが、宜しくお願いします^^ twitter(@gamitaka02)でブツブツつぶやいているので、良かったらフォロー&絡みお願いします(o ̄∀ ̄)ノ