AMP（Accelerated Mobile Pages）とは？どうやって構築すれば良い？

AMPとは

GoogleとTwitterが共同開発した、モバイル端末でWebページを高速表示するためのコンポーネントフレームワークです。

フレームワークですので、実際にWebサイトをAMP化させるのに必要な知識は、「AMPガイドラインに準拠」するだけと、Javascriptなどの複雑なプログラミングを必要とせず、軽量で高速なWebサイト（もしくはWebサイトのデータ）を構築できます。

AMPの仕組みと検索エンジンでの使われ方

AMP化されたサイト・ページとは

AMPサイト・ページとは、「AMP Open Source Project」が策定したガイドラインに沿ってコーディングされているWebサイトのことを指します。

ただし、Webサイト・ページが完全にAMPガイドラインに準拠している必要があるかというとそういうわけでもなく、既存のページとは別に「AMP化されたページ」を用意すれば、検索エンジンが適宜判定して、AMP向けのキャッシュを取得してくれます。

つまり、AMP化されたページ・サイトとは、

• サイト・ページがAMPガイドラインに準拠していること
• ただし、オリジナル記事がAMP化されていなくても、AMP化されたAMP向けページがあれば良い

この2点に合致していればOKということです。

検索エンジンでの使われ方

AMP化するメリットは、検索エンジンがAMPページをキャシュすることで、SEO効果の向上や検索エンジンからの導線が強くなることでしょう。ある意味、これがAMP化の最大にして唯一のメリットと言っても過言ではありません。

AMPガイドラインに沿ったサイト・ページは、検索エンジンがクローリングするに際に、検索エンジン側の判断で（キャッシュするかしないかは検索エンジン次第）AMPページのデータをキャッシュします。キャッシュするかは検索エンジンが判断するため、Webサイト製作者側で制御することはできません。

キャッシュされたAMPページは、一般ユーザーが閲覧する検索結果からページがリンクされる際に、オリジナルサイトのデータから呼び出すのでなく、検索エンジンがキャッシュしたAMPキャッシュを呼び出します。

検索結果からシームレスに表示させることで、非常に高速な表示が可能になります。

どうすればWebサイトをAMP化出来るのか？

AMP化は、ガイドラインに沿っていればOKということですが、ガイドラインをざっくりと説明すると、

1. AMP HTML形式でHTMLドキュメントをコーディングしていること
2. 外部ファイルは読み込まないこと
3. JavaScriptを実行しないこと（例外あり）

この点を守ればOKです。

シンプルではありますが、(2)と(3)の制限が非常に重く、既存のサイト・ページをAMP化させる時の最大の障壁になります。

フレームワークとしてのAMP

AMP自体は、HTML、CSS、JavaScriptを利用した軽量なフレームワークです。枠組みとはしては、Twitterが開発しているCSSフレームワークである「Bootstrap」と同じようなものです。

AMPが提供しているコンポーネントを組み合わせるだけで、AMP化された、軽量で高速なモダンなサイトを構築できるというメリットもあります。

ですので、「AMP化する」というよりも、「既存ページのフレームワークをAMPにする」というAMP化の

コンポーネントは随時更新されたり、追加されたりしていくので、サイト内容によっては、初めからAMPをベースにサイトを構築するのもありです。

The AMP Component Catalogue