こんな方に読んで欲しい！
- サイトのアクセス数をもっと上げたい
- Google Analyticsからサイトの離脱率が高いと言われたので改善したい
- スマホサイトの表示速度が遅いので改善したい
スマホで検索した際、検索結果の記事タイトルの横にカミナリのようなマークがあることはご存じでしょうか？そのカミナリマークは、スマホやタブレットでの表示を高速にするAMPという技術が使われていることを表しています。
今は、サイトを閲覧するのにパソコンを使うという人のほうが減っているくらいなので、スマホやタブレットでの表示速度を高速化することは大切です。
今回は、あなたのサイトをスマホで高速表示するためのWordPressプラグイン「AMP」について徹底解説します！
ここに注意！
AMPはかなり奥深いものです。様々なルールがあり、やるべきことがあり、この記事だけで全てを解説し理解いただくのは難しいです。そのため、今回の記事は特に効果と変化が見えやすい点に絞って解説します。
また、みなさん１人１人が全てを理解する必要はないとも考えています。よくわからないこと、難しいことは、わかっている人が作ったツールやプラグインに任せればよいわけですね。
[blogcard url=”https://iblab.net/lazy-load/”]
1. AMPとは？
ここがポイント！
AMPとは、「Accelerated Mobile Pages」の頭文字をとった、Googleが推進する「スマホやタブレットなどに、安全かつ高速にウェブページを表示させる技術」のことです。これは、GoogleとTwitterが共同で立ち上げたオープンソースプロジェクトです。
Googleは、2016年からサイトのAMP化を強力に推進していて、今では多くのサイトがAMPを取り入れています。
AMPの技術情報は下記のようにウェブで公開されているので、その気になれば誰でも自分のサイトをAMP化できます。
AMP Websites Guides & Tutorials
ここに注意！
同じ名前がまぎらわしいので、この記事では、技術のことはAMP、プラグインのことはプラグイン「AMP」と表すことにします。
1-1. AMPの仕組み
通常、webサイトを表示するには、HTMLやCSS、JavaScript、画像などを読み込む必要があります。それらの読み込みには一定の時間がかかり、きれいに見せるために容量の大きい画像や複雑な装飾を使うと、さらに多くの時間がかかります。
そんなwebサイトを素早く表示させるため、大きく分けて以下の２つの仕組みがあります。
1-1-1. 独自の規約（ルール）によるHTMLやCSS、JavaScript使用の制限
AMP化されたwebページは、読み込みに時間のかかる要素を省く（読み込まない）ので、データ量は通常の10分の１程度になります。
1-1-2. キャッシュ（webページのデータを一時的に保存すること。もしくは保存されたデータ）
AMPを利用しているページが検索されると、GoogleやTwitterのサーバーにキャッシュ（webページのデータを一時的に保存すること）されます。その次に検索された時は、キャッシュされたwebページのデータを基に表示することで、通常の約4倍の速さで表示することができます。
ここがポイント！
AMP化されたページは、通常のページとは異なる軽量化されたデータが、GoogleやTwitterが用意した高性能なサーバーにキャッシュされるということです。それにより、スマホからアクセスした場合、高性能なサーバーからのキャッシュデータを読み込ませるので高速表示が可能になるということです。
1-2. AMPのメリット
あなたがwebサイトを見ようとした時、読み込みが遅くて別のwebサイトを見に行った経験があると思います。同じように他の多くのユーザーも、読み込みが遅いと見ることを諦め、別のwebサイトへ流れてしまいます。
モバイルユーザーを対象にした調査では、「2～3秒で読み込まない場合、イライラし始める」という調査結果もあり、そのくらいシビアな世界なのです。
そこで、AMPを導入することによって、処理能力が低いサーバーを使っているウェブサイトもスマホやタブレットでの高速表示が可能になります。
スマホやタブレットを使っているユーザーが快適にサイトを閲覧できるようになり、サイトの管理人にとってはサイトの離脱率を抑える効果を期待できます。
AMPを利用することによって期待できる効果を下記にまとめてみました。
- ユーザービリティが向上することにより、離脱を減らすことができる
- アクセス数が上がることで、Googleの検索順位も上がる
- ユーザービリティの向上、AMPの専用検索表示に対応させることで、新たな検索流入が得られる可能性がある
1-3. AMPのデメリット
AMPの規約（ルール）として、安全な接続を確保することが推奨されています。そのためwebサイトのSSL化（httpsから始まるURL）が必要になるなど、新たなコストがかかることもあります。
AMPはキャッシュを使うため、ご自身のwebサイトを更新しても、キャッシュが更新されないと表示される内容は古いままです。そのため、頻繁に更新されるようなwebサイトのトップページ（例えば、新着情報を表示しているようなトップページ）はAMP化しない方が良いでしょう。そのwebページの特性に合わせて使い分ける必要があります。
また、AMP化されたwebページを表示する場合、GoogleやTwitterのサーバーに保存されたキャッシュを基に表示します。つまり、あなたのサーバに保存されたwebページの情報（大元の情報）は、見られていないわけです。
ということは、通常の方法では閲覧数の集計ができないことになります。AMP化して閲覧数が極端に減ったという話しを聞くことがありますが、こうした事情があります。
ここがポイント！
アナリティクスの設定ではGoogle IDと関連づいたコードを登録することで、AMPページへのアクセスをGoogle Analyticsで追跡・集計が可能になります。
あと、AMP化されたwebページは高速表示をするのに余分な要素を読み込まないので、通常のページに比べると簡素なイメージがあります。
2. プラグイン「AMP」のメリットとデメリット
本来ウェブサイトをAMP化するにはHTMLやCSS、JavaScriptなどの専門知識が必要ですが、このプラグインを使えば簡単にブログをAMP化できます。
AMPはGoogleとTwitterが共同で立ち上げたオープンソースプロジェクトで、プラグイン「AMP」は、このプロジェクトがWordPressのために作った公式プラグインです。
本家本元（ほんけほんもと）が作ったプラグイン！WordPressのアップデートに合わせて更新も頻繁に行われるでしょう。これは安心して導入できます。
プラグインを導入するにあたって考えうるメリットとデメリットをまとめてみました。
2-1. プラグイン「AMP」のメリット
プラグイン「AMP」のメリットは下記のとおりです。
- HTMLやCSSの知識がなくてもブログをAMP化できる
- 既存の記事をAMP対応に再マークアップを完全自動化できる
- AMPプロジェクト公式プラグインなので、Googleのサービスと連携しやすい
- 更新が頻繁なので安心して使える
- プラグインがほぼ日本語化されているので、わかりやすい
- Google AnalyticsにAMPページのトラフィックも追加できる
2-2. プラグイン「AMP」のデメリット
プラグインのデメリットというわけではありませんが、AMPは検索されて初めて専用のサーバーへキャッシュされるので、ブログオーナーがAMPの効果をすぐに実感することは難しいです。
- プラグインの解説に専門用語が多く、理解するのが難しい
- 一部のJavaScriptやCSSが無効化されるので、デザインが変わる
- 内部的な変更がほとんどなので、実感がわかない（デメリットではなく、わかりにくいという意味です）
3. プラグイン「AMP」の導入方法
プラグイン「AMP」はWordPress公式プラグインなので、WordPress管理画面>プラグイン>新規追加 から簡単にインストールできます。
3-1. プラグイン「AMP」のインストール方法
右側のキーワード検索テキストボックスで「AMP」と検索すると1番目にヒットしますので、「今すぐインストール」をクリックし、有効化します。
インストール済みプラグイン一覧にプラグイン「AMP」が表示されていればインストール完了です。
3-2. プラグイン「AMP」導入の注意点
SEOに力をいれている有料テーマではwebサイトをAMP化する機能をすでに搭載している場合がありますので、重複した機能がある場合はこのプラグインの導入を中止するか、テーマのAMP機能を無効にする必要があります。
ここに注意！
テーマによってはプラグインがエラーになる場合もあります。当サイトが利用している「AFFINGER5」もその一つで、テーマのAMP機能をオフにしてもプラグイン「AMP」は機能しませんでした。
3-3. プラグイン「AMP」導入後の確認方法
プラグイン導入後は、通常ページの他に、AMP化されたページがプラグインによって生成されます。
通常のURLの末尾に「?AMP」もしくは「?AMP=1」をつけることで確認が可能です。プラグインで指定するAMPのテンプレートモードによっては、AMPページを投稿画面からプレビューさせることもできます。
4. プラグイン「AMP」の使い方
プラグイン「AMP」は初期設定さえしてしまえば、ほぼすべての機能が自動で行われます。
プラグイン「AMP」の設定はWordPress管理画面>AMP>一般から行います。プラグイン「AMP」の設定は「標準」「トランジショナル」「リーダー」の3つのテンプレートモードから、テンプレート選ぶだけです。
下記で詳しく説明しますが、当サイトがおすすめするテンプレートモードは「トランジショナル」です。
4-1. 標準
AMPプロジェクトは、最終的にPCからのアクセスも含めたウェブサイトのAMP化を目指していますので、標準を選ぶとすべてのページがAMPの仕様に書き換えられます。
AMPはCSSやJavaScriptの使用が大幅に制限されます。標準を選ぶと使っているプラグインやCSSが使えない可能性があるので注意が必要です。
現段階のプラグイン「AMP」の仕様では、「標準」テンプレートモードを選ぶのは避けたほうが良いと考えています。
4-2. トランジショナル
トランジショナルを選択すると、通常のページに加えてAMPの仕様に合わせたページをプラグインが生成して、Googleクローラーからのキャッシュに備えます。
パソコンからのアクセスでは通常のページが表示されますので、CSSやプラグインはそのままです。
現在採用されているほとんどのAMPは、このように通常とは別にAMP専用のページを用意しています。
4-3. リーダー
「トランジショナル」と同様に通常ページの他にAMP専用ページを作る方式ですが、他の二つよりも徹底した装飾の排除が行われるので、サイトの雰囲気を考慮に入れない簡素なAMPページが表示されます。
リーダーを選ぶ場合には「投稿ページ」「固定ページ」「メディア」の中からAMP化させるページを選択できます。
5. まとめ
AMPは「Accelerated Mobile Pages」の略で、GoogleやTwitterが作った「スマホやタブレットなどに、安全かつ高速にウェブページを表示させる技術」を指します。これは、GoogleとTwitterが共同で立ち上げたオープンソースプロジェクトで、プラグイン「AMP」は、このプロジェクトがWordPressのために作った公式プラグインです。
ここがポイント！
Google AnalyticsやSearch ConsoleなどのGoogleのサービスとの連携もバッチリです。
プラグイン「AMP」は導入が簡単です。しかも無料で使えますので、スマホやタブレットからのアクセス数が少ないとお考えなら、WordPress公式プラグイン「AMP」を使ってみてはいかがでしょうか？