この記事では、モバイルサイトの表示を高速化出来るAMPについて解説しているとん
ブログサイトを運営する際は、サーバーを借りて、ワードプレスを設置して、テーマを設定してというように構築していきます。
そして更にSEOを学んでいく上で、サイトの表示時間が気になるようになってくると思います。
サイトの表示時間を改善する方法はたくさんあるのですが、その中でAMP対応という言葉を目にすることがあるでしょう。
あまり聴き馴染みのない言葉だと思いますが、サイトの表示時間を短縮する上で画期的な技術ですので、ぜひこの機会に本記事でAMPについて学んでみてください。
ちなみに、サイトの表示時間を短縮する方法については、こちらの記事で解説しています。
AMPとは？
AMPってどんな意味だぷう？
AMPとはAccelerated Mobile Pagesの略で、モバイルサイトの高速表示をするための手法です。
AMPは2015年10月にGoogle社やTwitter社など、業界の各社が協力しあって作り上げたプロジェクトで、モバイルファーストの時代に適応した高速表示ができる技術として、今注目されています。
既存のHTMLサイトにAMP HTMLの形式にそったソースコードを別途用意することで対応が可能です。
プログラムを知らない方にとっては難しいと思いますが、プログラミングができる人にとってはそこまで高度な内容ではないので、割と簡単に対応できる範囲ではあります。
スマホの普及によってモバイルサイトの表示時間短縮への流れが起きている今。
AMPはとても重要な技術になりますので、本記事で概要を押さえて今後対応を検討してみましょう。
AMPってどんな仕組み？
まずは、AMPがどんな仕組みでモバイルサイトを高速表示しているのかについて解説します。
通常のウェブサイトを初めて開く際は、そのページに置いてあるソースコードやテキスト、画像などを１から全て読み込むため、ある程度時間がかかります。
ただ、２回目以降に同ページに訪れる場合、すでにキャッシュというデータがブラウザに一時保存されているため、１回目よりも早く読み込むことが可能です。
これが通常のウェブサイトを開く際の仕組みになります。
ではAMPはどうなるのかというと、ユーザーが初めて訪れたページでも、通常の仕組みで２回目に訪れた時と同じスピードで表示が可能になるのです。
本来は自分が使用しているブラウザがキャッシュというページを読み込んだデータを蓄積するのですが、AMPの場合はブラウザではなくGoogleのクローラーがキャッシュをします。
そのため、ユーザーがページの開いた際、すでにGoogleがキャッシュをしてくれているので、すぐにページを読み込むことができるというわけです。
初めてのサイトでも２回目みたいにサクサク表示されるのは嬉しいとん♪
AMP対応を行うメリット
続いて、AMP対応を行うことでどのようなメリットがあるのかについて紹介したいと思います。
AMP化には主に以下のような４つのメリットがあります。
- サイト表示時間が早くなる
- 直帰率が下がる
- クリック率が上がる
- 検索順位が上昇する
サイト表示時間が早くなる
まずAMP対応の最大のメリットは、モバイルサイトの表示時間が早くなるという点でしょう。
すでにご自身のサイトで表示スピードを計測したことがある方ならわかると思いますが、PCよりもスマホサイトの方が表示時間が遅くなります。
スマホサイトの表示時間が遅くて悩んでいるブログ運営者は多く、それを改善するための手立てとして、AMPは非常に有効になります。
特に今はスマホファーストが主流になっており、スマホサイトでの表示時間を気にかける必要があります。
ユーザーにとっても利便性が上がるメリットですので、ぜひ取り入れたいですね。
直帰率が下がる
そしてサイトの表示時間が早くなることによって、直帰率が下がります。
開くのに時間のかかるサイトですと途中で嫌になってページを閉じてしまいますが、すぐに開けばユーザーはそのまま記事を読んでくれます。
軽いサイトほど好まれる傾向がありますので、ユーザーのためを思ったときこちらができる策としてかなり有効です。
有益なコンテンツ、そしてサイトスピードの２つを提供すれば、ユーザーの満足度は爆上がりしますよ。
クリック率が上がる
実はサイトがAMPに対応しているのかどうかを、ユーザーは見分けることが出来ます。
この雷のマークが、検索結果一覧の該当ページに加えられるため、事前にユーザーが判断することが可能なのです。
まだAMPは普及していないため気にしているユーザーは少ないと思いますが、今後普及していくに連れてこのマークの重要性は増すと思います。
それによって検索結果からのクリック率も変わりますので、メリットとなるでしょう。
新たな検索流入が増える
そしてAMP対応することによって、新たな検索流入を得る機会が増えます。
AMPはGoogleが推奨している技術なので、何かとGoogleがひいきをしてくれます。
例えば、検索結果に表示されるカルーセルやリッチリザルトに優先表示をしてくれることもあるので、それによって検索流入が増える可能性が高まります。
また、後ほど解説する、モバイルファーストインデックスにも有利に働きますので覚えておきましょう。
リッチリザルトについてはこちらの記事をご覧ください。
検索順位が上昇する
そしてこれらのメリットが合わさり、最終的には検索順位が上昇するという結果にも繋がるでしょう。
ユーザーファーストであるSEOを意識する上で、ユーザーの満足度を左右するページスピードはとても重要です。
もちろん一番大切なのはコンテンツですが、ページスピードの改善は検索順位を左右する１つの要因という認識を持っておくと、今後の運営で役立つと思います。
AMP対応を行うデメリット
そしてAMP対応ですが、実はメリットだけではなく、デメリットもあるので、そちらも紹介しておきます。
デメリットは主に以下の４点です。
- サイト表示が崩れる場合がある
- デザインに制約がある
- 運用の手間が増える
- 対応していないASPがある
サイト表示が崩れる場合がある
AMPは通常のHTMLとは違うルールで記述するので、今までと全く同じ見た目のサイトにするのが困難な場合があります。
AMPは表示速度を優先した規格ですので、とにかく無駄を省いた設計になっいます。
AMP対応で出来上がるサイトはかなりシンプルなデザインになりますので、元が複雑なデザインのサイトほどトラブルが起きやすいです。
自分で対応を行なった場合は尚更トラブルになる確率が高いので、対応をする際はプロに依頼した方が良いでしょう。
またバックアップも必須となりますので忘れずに。
デザインに制約がある
AMPは極力無駄を省いたデザインになりますので、デザインや動きに制約があります。
「使っていいタグ」と「使ってはいけないタグ」が予め決められており、そのルールに沿ってコードを作る必要があります。
動くボタンやスライダー、アニメーションなどはAMPでは使えませんので、ある程度シンプルなデザインになってしまうことは先に覚悟しておきましょう。
運用の手間が増える
AMP対応をするためには、既存のHTMLファイルと、AMP HTMLファイルの２つをサーバーに設置する必要があります。
頻繁に更新しないサイトであれば問題ないですが、更新を行う際は２つのファイルを編集する必要があります。
ですので、運用管理の手間が増えてしまうというデメリットもあります。
単純に作業が２倍になりますので、ページ数が多ければ多いほどその分運用コストが増えてしまいます。
そういったデメリットがあるという点も覚えておきましょう。
対応していないASPがある
そして、収益化ブログを作るアフィリエイターにとって致命的な問題があります。
それがAMPサイトに対応していないASPがあるという点です。
普段ASPから取得している広告タグは、通常のHTMLサイトにしか貼ることが出来ません。
AMPサイトに貼る場合は、ASPが用意したAMP専用タグを使用する必要があるのです。
ちなみに国内最大手のA8ネットではAMPのアフィリエイトリンクを取得可能です。
ASPによっては対応していないこともありますので、必ず事前に確認するようにしましょう。
AMPのSEO効果について
AMPってSEOにどんな影響があるんだぷう？
ブログを運用する上で最も重要なSEOにおいて、AMP対応を行うとどのような恩恵があるのかについて、Googleが公式に回答しています。
読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。
https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
サイトの表示速度は、SEOに直接的な影響を与える要素ですので、対策をする上で優先順位は高めです。
Googleがここまでサイト表示速度にこだわるのには、次の章で解説するMFI（モバイルファーストインデックス）との関連が深いでしょう。
MFI（モバイルファーストインデックス）との違いは？
モバイルファーストインデックスってなんだぷう？
MFI（モバイルファーストインデックス）とは、現在のPCサイト基準の評価からスマホサイト基準の評価へ切り替えを意味する言葉になります。
これはGoogleが推進している施策であり、これによってスマホサイトの重要性がさらに上がっています。
AMPとの違いについては、AMPはあくまでスマホサイトを高速表示するための技術。
MFIはスマホサイトを基準に検索順位を決めるという方針です。
AMPはMFIに対応するための施策として覚えておくと良いでしょう。
MFIについての詳細はこちらをご覧ください。
サイトをAMP化する方法
サイトをAMP化する方法を教えて欲しいとん
AMPについて概要は理解出来たと思いますので、続いてサイトをAMPに対応する方法について解説します。
方法としては主に２つの選択肢があります。
- HTMLをいじる
- 対応のテーマやプラグインで
テーマやプラグインで対応する方法については後ほど紹介します。
ここではHTMLをいじってAMPに対応する方法について、概要を解説したいと思います。
ただ、HTMLの編集は初心者には非常に難しい作業になります。
基本的には外注してプロに任せることをオススメしますので、こんなことをしてるんだ〜くらいの気持ちでご覧いただければと思います。
AMP HTMLの宣言
<!doctype html>
<html amp lang="en">AMP HTMLでは、DOCTYPE宣言をして、html ampのlang属性を指定することが必須になります。
簡単にいうと、このページはampページであるということを認識させるための記述になります。
headタグとbodyタグを指定
<head>
</head>
<body>
</body>AMPサイトを作る際は、headタグとbodyタグは必須になります。
meta要素を指定
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">AMP HTMLでは、meta要素でUTF-8とviewportというものを指定することが必須になります。
viewportとは、ブラウザの表示領域を指定してレスポンシブ対応が可能になる設定です。
JSライブラリを読み込む
<script async src="https://cdn.ampproject.org/v0.js"></script>AMPでは、AMP JSライブラリを読み込むことが必須です。
ページの高速表示をするために必要な設定です。
canonicalタグの指定
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">続いて、canonicalタグの設定も必須になります。
このタグは、PC用とAMP用のサイトが重複コンテンツとして扱われるのを防ぐために設定します。
amp-boilerplate要素を指定
<style amp-boilerplate>body{-webkit-animation:-amp-start
8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start
8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start
8s steps(1,end) 0s 1 normal both;animation:-amp-start
8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style><noscript>
<style amp-boilerplate>body
{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style></noscript>続いて、AMPボイラープレートコードを指定することが必須です。
JSライブラリが読み込まれるまでの最初の間、コンテンツを非表示にする設定です。
AMPページが出来ているのか確認するには？
かなり簡易的な解説になりましたが、AMPページを作る上での最低限必要な項目について紹介しました。
HTMLを編集して出来たサイトがAMPに対応出来ているのか？
その確認作業は必須ですので、正常に対応が出来ているのかチェックする方法を紹介します。
それがAMPテストツールです。
こちらに設置したURLを入力して検索するだけで、正常に出来ているのかを確認出来ます。
対応を行なった場合は必ずチェックしましょう。
AMP対応ワードプレステーマ
うわ〜ん難しくてよくわからなかったブゥ〜〜
大丈夫！
AMP対応のテーマがあるブゥ！
収益化ブログの多くはワードプレスをベースに構築されていることが多いです。
上記で説明したやり方は難しいですが、ワードプレスのテーマがAMPに対応していれば簡単に設定可能です。
ここではAMP対応のテーマをいくつか紹介します。
Cocoon
シンプルデザインの無料テーマです。
更新頻度が高く、信用性もあるテーマですので、AMP対応テーマとして紹介しました。
ルクセリタス
このテーマは、非常に多機能で中級者以上向けのテーマです。
サイトの高速表示に拘ったテーマですので、当然AMPにも対応しています。
運営がかなり気を遣っていますので、スピード面で非常に信頼のおけるテーマになります。
AFFINGER5
インフォトップで人気NO1になっている人気の有料テーマです。
カスタマイズ性に加え、収益化ブログに特化した構造になっていますので、これから稼ぎたい方にもオススメです。
その他、オススメのテーマについてはこちらの記事でご確認ください。
AMPプラグイン
AMP対応にするプラグインを教えて欲しいぷう
続いて、ワードプレスで構築したブログをAMP対応にするプラグインについて紹介します。
こちらの公式プラグインを導入することによって、AMP化を行えます。
ただし、テーマによっては表示が大きく崩れることがありますので、利用する際はしっかりとテストを行なってからにしましょう。
ちなみに、ジャストサーバーブログで使用しているJINテーマは、AMPに非対応です。
AMPプラグインによる対応を推奨していませんので、そのようなテーマは公式が対応してくれるのを待つしかないですね。
AMPと合わせてサイト表示時間を速くする方法
最後にAMPの対応と合わせて、サイトの表示時間を速くする方法について紹介します。
サイトの表示時間は、細かく対応すれば徐々に速くなっていきます。
ただ、どんな対応よりも一番効果があるのがサーバーの乗り換えです。
ブログを設置するサーバーが遅いとAMP対応を行なっても効果がないため、しっかりとしたサーバーを選択することをオススメします。
その上で弊社が運営しているジャストサーバーをオススメします。
収益化ブログに特化したサーバーとして、安定性や高速性に優れたスペックを誇っていますし、サポートも丁寧にさせていただきます。
もしサイトの表示速度にお困りの際は、ジャストサーバーへの乗り換えもご検討ください。
