Accelerated Mobile Page (AMP)はGoogleが主導する、モバイルサイトを構築するフレームワークです。123ishでは、導入後に検索経由でのユーザー数を有意に増やすことが出来ました。
AMPページと普通のモバイルページでは、コア指標であるLargest Contentful Paint (LCP)で圧倒的に差が出ます。
グーグルサーチコンソールの「拡張」欄に⚡マークのAMPもあります。
この「拡張」は英語だとEnhancementsで、強化、増強、向上の意味で使われていると思います。サイトSEOの強化、増強、向上に繋がる主要素だということですね。
でも、AMP導入は簡単ではありません。カスタムのjavascirptsが使えないしCSSは75kbまでと色々と制約があります。
123ishでは最初にrails_ampジャムを試しましたが、全く使えませんでした（このジャムは2017年から開発が止まっていますね・・・）。
ワードプレスでもプラグインを入れるだけではAMPページを上手く作れないあたり事情は似てると思います。
今回は、Railsの既存のモバイルページを、ジャムなど使わずにルールに従ってAMP化した方法を紹介します。
カスタムの MIMEタイプの指定
たった一行のコードですが、config/initializers/mime_types.rbにカスタムMIMEタイプを指定します。
ampをtext/htmlに対するカスタムフォーマットとして登録しています。これにより、ampの拡張子がつくページをコントローラで扱うことが出来るようになります。
コントローラーをampフォーマットに対応できるようにする
AMP化したいページのコントローラーが対応できるようにします。123ishのサイトだと記事の表示を行うページのコントローラーです。
- format.amp はユーザーが.ampのページに訪れた時に作成するページを定義します。
- render amp/samples/show.amp で app/views/amp/samples/show.amp.erb をレンダリングすることを指示します。
- layout: 'amp/layouts/application' でAMPページはapp/views/amp/layouts/application.amp.erbのレイアウトを使うことを指示します。
AMPビューページの作成
コントローラーによって指示されたAMPビューページです。
ここに色々とコンテンツを詰め込みます。
レイアウトページの作成
application.amp.erbで利用できるJavascirpt とカスタムCSSを指定します。ここで、CSSは75kb以下のサイズと決められています。
例では
- amp-form AMP ドキュメントの入力フィールドを送信するためのフォーム（<form>）を作成。
- amp-carousel スライダーもしくはカローセルが必要であればこれを使います。
- amp-iframe iframeを使うため。ですが、ドキュメントの上部付近には表示できないという制約があります。
- amp-youtube、amp-instagram、amp-twitterそれぞれ、YouTube、インスタグラム、ツイッターのコンテンツをページに貼り込むのに使います。
- amp-analytics グーグルアナリティクスをAMPページでも使えるようにします。
- amp-ad AMP対応の広告を表示するコンテナに必要です。
最後に
ここで示したのは一般的なステップです。gemを使ってバクを直しているより、よっぽど近道になると思います。
一つ注意点ですが、AMPではCSSのサイズに制約があるので、123ishではAMPページ用に必要最低限のCSSファイルを用意しました。ですが、AMPページで使っているフォーマットはモバイルページと同じものです。
AMPページが正しく作られているかどうかもチェッすることが出来るので、公開する前に確認することをお勧めします。
123ishでは、AMPページと非AMPページのモバイルでの検索経由ユーザー流入を比べると、AMPページの方が3倍から6倍くらい多いです。
