こんにちは、ミスターフュージョン メディア事業部の山田祐輔です。

今回は、当サイトがAMP(アンプ)化する際に行った全手法をまるっとご紹介します!

弊社、「WEB制作」内製化.comも11月17日よりAMP化しました!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-12-34-21

当サイトはワードプレスで構成されているのですが、AMP化用のプラグインも公開されています。

ただし、プラグインを有効にするだけでAMP化できるほど単純ではないので、弊社が実際にAMP化するために導入したプラグインや各種設定、Googleサーチコンソールの設定などをご紹介していきます!

AMP(アンプ)化ってなに?

shutterstock_165781631

はじめにAMPをご存知ない方のために簡単にご説明いたします。

AMPとは、「Accelerated Mobile Pages(アクセルレイテッドモバイルページ)」の頭文字をとってAMP(通称:アンプ)と呼ばれています。

と言ってもピンとこないと思いますので、解説するために公式サイトから引用してきました。

Accelerated Mobile Pages は、読み込みを高速化しさらに快適なユーザー 体験を追求するため、さまざまな技術的手法を活用してコンテンツをほぼ瞬時に読み込めるようにした HTML ページです。

引用元:Googleウェブマスター向け公式ブログ

つまり、サイトの読み込みにかかっていた時間が短縮され、スマホで見たときでもすぐにページが表示される設定の事ですね。

Google検索ではすでに2016年2月24日からAMPで作成されたページが検索結果画面に表示されています。

また現在、検索の主流はPCからスマホに移行してきました。実際に、スマホの検索数がPCを上回ったのも最近の話ではないですし、2016年の11月に正式にGoogleが「モバイルファーストインデックス(MFI)」の導入を発表しました。

shutterstock_284051513

2015年4月21日に発表された「モバイルフレンドリーアルゴリズム」の中の「モバイルフレンドリー」という言葉が大流行し、これからはスマホ対応もしないといけない時代ですね、なんて話していましたが、2016年の11月に発表されたのは「モバイルファースト」ですからね。

つまり、PCよりもスマホの方が優先しますよ、とGoogleが公式に発表しています。

→ モバイルファーストインデックス(MFI)の詳細記事はこちら

今後もスマホ優先の流れはどんどん強まっていくと見られていますし、AMPなどモバイルファーストの施策はこれからも増えていく事でしょう。

では、AMP化することでどのようなメリットがあるのか、AMP化することで得られるメリットをまとめてみました!

AMP化することで得られるメリット

1、表示が高速化され離脱率が下がる

shutterstock_367741853

まず、はじめにAMP化する事でサイトの読み込みが格段に早くなります。

実際に公式のデータによると、モバイルページの表示速度が約4倍、データ量が約1/10になると言われています。

こちらもGoogleウェブマスター向け公式ブログから引用します。

ユーザーは待つのが嫌いです。コンテンツがすばやく読み込まれることを望んでいます。AMP 形式を使用してモバイル端末にコンテンツをすばやく読み込むことで、サイトやページの魅力をさらに高めることができます。ある研究によると、コンテンツの読み込みに 3 秒以上かかると、40% のユーザーが他のページに移動することがわかっています。The Washington Post では、AMP の採用により記事の読み込み時間を 88% 短縮した結果、モバイル検索からのリピーターが 23% 増えました。

AMP 形式は、あらゆるタイプの静的なウェブ コンテンツ(ニュース、レシピ、映画情報、製品ページ、レビュー、動画、ブログなど)で大きな効果を発揮します。

少し日本語が変になっていますが、サイトの表示を高速化する事で、モバイル検索からのリピーターが23%増えたというデータがあるそうです。

実際、サイトの表示が遅いと離脱率が上がるというのは以前からも言われている話ではありますので、サイトの表示が早いには越したことがないですよね。

2、AMP化特集ページに表示される可能性がある

shutterstock_411209338

2016年11月現在、AMP化したサイトが特集ページに表示されるケースがあるようです。

こちらは「PPAP」という検索ワードでスマホで検索した時の表示です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-13-30-56

これは1ページ目の上部に表示されているので、うまくいけばビッグワードでも上記の画像のようにカルーセル形式でAMP枠に表示される可能性があります。

3、今後、AMP枠など優遇される可能性がある(高い)

shutterstock_306289862

2のところでもあったトップページの上部に表示される「AMP枠」は現在もありますが、今後はもっとAMP枠が拡大したり、 AMPしたサイト自体を上位表示する(これはおそらくないと思いますが)事もあるかもしれません。

ここに関しては未知数ですが、モバイルファーストの流れを考えると、AMPを何かしら優遇していく方向で進んでいくのではないかと考えます。

では、実際にAMP化していく手法について、これから解説していきます。

当サイトがAMP化した全手法

1、AMP用のプラグインをインストールしよう

shutterstock_378151573

まずはじめに、AMP用の公式プラグインが存在します。

→ AMP用の公式プラグインはこちら

こちらをインストールして、サイトにアップロードします。(解凍せずにそのままアップロードしてください)

また、そのままワードプレスで探す場合は、以下のような行程でインストールできます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-13-52-42 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-13-53-02

こちらの左側の「AMP」というプラグインです。(写真の右側のプラグインは公式のものではないのでご注意)

インストールして、有効化すればOKです!

・・・・実はこのプラグインを入れればOKではなく、この後にもう一つ「Facebook Instant Articles & Google AMP Pages by PageFrog」というプラグインを追加する必要があります。

先ほどと同じように「プラグイン」→「新規追加」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-13-52-42

右上の検索窓に、「Facebook Instant Articles & Google AMP Pages by PageFrog」を入力します。

おそらく1つしかプラグインが出てこないので、下記のプラグインをインストールし、有効化します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-15-25-22

次に、プラグインの設定に移っていきます。

左側のメニューバーに「Mobile Formats」という項目があるので、まずは「Set up」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-15-33-44

先ほどの「AMP」というプラグインを有効化できていればおそらく下記のようにGoogleの箇所が「Ready」という表示になっていると思います。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-15-31-58

次に、「Styling」の設定に入っていきます。項目の中から「Styling」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-15-36-01

ここで設定するのは「ロゴ画像」ぐらいかなと思います。

(当ブログの場合、ログを使っていないので設定していないです)

ロゴの設定はこちらになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-15-40-30

こちらの「Choose Logo」を選択すると、ワードプレス内、もしくはロゴ画像をアップロードすることができます。

次に、「アナリティクス」の設定に入っていきます。項目の中から「Analytics」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-15-42-26

こちらでは、アナリティクスの設定を行っていきます。

(多くの場合は、「Googleアナリティクス」を利用していると思いますので、Googleアナリティクスでご説明します。)

選択すると下記のような画面になります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-15-47-05

※今回は、事前に設定を完了していたので「Enabled」という表示になっていますが、通常設定していない場合は、「Disabled」という表記になっています。

「Googleアナリティクス」の項目を選択します。

→ Googleアナリティクスのアカウント作成方法はこちら

その後、ポップアップ項目が出てきてGoogleアカウントの認証を求められますので、Googleのアカウント(Googleアナリティクスに紐付けしたいアカウント)を設定します。

アクセスが混同するので、現在サイトで設定しているプロパティとは別にAMP用の新規プロパティを作成することをオススメします!

弊社のサイトではこんな感じでアクセスの流入を分けています。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-15-56-10

新規でプロパティを作成できたら、新規で作成した【AMP】用のプロパティをAMPの設定に反映させます。

下記のように【AMP】用のプロパティの横がグレーで「Site Chosen」になっていればOKです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-16-01-11

次に、「アドセンス」の設定を行います。

アドセンスの設定もAMP化する場合、AMP用に変更する必要があります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-16-06-14

こちらからアドセンスの変更を行うことができます。

選択すると、Googleアドセンスのアカウントを要求されますので、こちらでアカウントを設定していきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-16-11-00

弊社では特にGoogleアドセンスを使用していないので、この先は確認していませんが、Googleアナリティクスと同様に反映すれば問題ないようです。

最後に、「Setting」で実際にサイトにAMPを反映させていきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-16-13-43

こちらを選択すると、下記のような画面になります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-16-18-40

こちらにAMPに設定したい項目にチェックを入れて、下の「Enable AMP」をクリックして反映完了です。

また、下記のようにデフォルトでAMPに設定することができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-16-19-06

弊社の場合は、「投稿」にだけ「Enable」という設定にしています。

これでプラグインの設定は完了です。

最後に、ampも設定が正しく設定されているか表示の確認をしていきます。

AMP前(https://mr-fusion.net/mobile-first-index/

img_0181

AMP後https://mr-fusion.net/mobile-first-index/?amp=

img_0182

弊社のサイトの場合、このような表示の違いがあります。

AMP化はJavaScriptが使えなかったり極力シンプルな構造になるので、デザインは簡素になるケースがほとんどです。

次に、Googleサーチコンソールの設定に移っていきます。

2、Googleサーチコンソールを設定しよう

shutterstock_119233999

次に、AMPのデータをしっかり解析するために「Googleサーチコンソール」の設定を行っていきます。

→ Googleサーチコンソールはこちら

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-16-46-02

AMPを設定したサイトのサーチコンソールを選択します。

次に、左側のメニューから「検索の見え方」から「Accelerated Mobile Pages」をクリックします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-16-46-21

すると、設定ができていてインデックスされていればこのような表記になります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-12-34-21
インデックスされるには、半日〜2、3日かかるようです。

急ぎの場合は、下記の「Fetch as Google」からGoogleにインデックスの依頼をかけてください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-29-16-53-47

Googleサーチコンソール上でしっかりインデックスが確認できればAMP化は完了です。

まとめ

いかがでしたでしょうか?

今回は、弊社がAMP化した全手法を解説いたしました。

記事が長くなってしまいましたが、この通りに設定いただければAMP化できると思いますので、モバイルファーストを実践していきたい場合は、サイトのAMP化も検討してみてください!

【助成金を活用して持ち出し0円!?】制作・マーケティングが出来るWEB担当者を育成する「WEB担当者育成プログラム」

書籍でも紹介した事例や助成金を活用して持ち出し0円でスマホ化対策する方法やWEB内製化について代表石嶋が直接セミナーでお話します。

参考になったらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です