2015年10月にGoogle公式で発表された、モバイルWEB高速化の新しい技術、The Accelerated Mobile Pages（AMP）について色々と調べてみました。
モバイルからのアクセスに対して、予めキャッシュしておいたページデータをプロキシサーバーから応答させることで、まるで読み込み時間がゼロであるかのようにWEBページが閲覧できる、という感じの技術です。
今回はそのAMP HTMLを実際に使ってみた感じをレポートします。
概要については、こちらの記事 モバイルウェブが爆速に！ GoogleがAMP (Accelerated Mobile Pages) を立ち上げ | 海外SEO情報ブログ がわかりやすく書いてくださってました。
GoogleとTwitterが協同でプロジェクトを立ち上げていて、Google検索やTwitterからのブラウジングの際に、AMPに対応したページがあるWEBページは【即座】にページを閲覧できるようになるみたいです。
まだ発展途上の技術なので、JavaScriptが使用できないなどデザインについての制約もあり、既存のページをまるごとポンとAMP対応するのは難しそうですが、今後のSEOにも影響がありそうなので知識はもっておきたいところです。
AMP HTMLの技術的概要
では実際にAMPに対応したページを作るには何をしたらいいのでしょうか？
AMP対応してみた感じのまとめをざっくりあげておきます。
- AMP HTMLはhtml5を拡張するフレームワーク
- キャッシュをプロキシサーバーに保存して表示させるので、静的サイトのみ利用可能
- <html>タグに⚡（雷マーク）か、「amp」をつける
- <head>タグの中身を規約に沿ってマークアップする
- AMP HTML専用のJavaScriptを読み込ませる
- JavaScriptが使用不可（2016年1月時点）
- 外部CSSが使用不可、インラインスタイルと埋め込みスタイルシート1つだけ
- 一部のhtml5タグを置き換える、AMP HTML専用タグを利用する（例 : <img>→<amp-img>）
- 通常html版ページとAMP HTML対応ページを別々に用意することも可能
- 画像はwidth、hight必須（※その代わりレスポンシブ対応パラメータあり）
AMPのプロジェクトサイト Accelerated Mobile Pages Project（公式サイト） にまとめられているので全ての詳細はこちらをご覧ください。
AMPをエミュレートする
AMPはまだ開発が進んでいる途中なので、対応したからといってすぐに効果を感じることができません。
そのうちGoogle検索にAMPページの表示機能に対応されていくんでしょうが、作ったページをスマートフォンから見たところで表示のされかたも普通のページと同じように読み込みもあるので、今のところは「表示が速い！爆速だ！」という実感はなく、けっきょくAMPって何なんだって感じです。（まぁ、AMP対応ページもただのhtmlなので当然といえば当然か。）
現段階では、Google Chromeの拡張に、デスクトップでAMPをエミュレートできる「⚡️ Desktop AMP（Chrome Web Store）」というのがあるのでそれを入れてAMPページを見るとPCからでも動作確認ができます。
AMP HTML サンプルページ
ざざっとAMPに触れたところで、実際にページを作ってみたのでデモページを貼っておきます。
「通常html版ページ」、「AMP HTML版ページ」の二つのhtmlがあり、それぞれは相互にリンク設定をしています。
Chromeの⚡️ Desktop AMP を有効にしてエミュレートした状態で「通常html版ページ」を見ると、自動的に「AMP HTML版ページ」が表示されます。
エミュレートなしだとそれぞれ独立したhtmlみたいに扱われるのでなんのこっちゃって感じになりますが、エミュレートしない場合は「AMP HTML版ページ」の方を見ていただけたらいいかなと思います。
AMP HTMLの細かい設定などもデモページに記載しているので、どうぞ〜。
JavaScriptは使えないし、外部CSSファイルの読み込みも許可されていないし、あまりデザイン的に凝ったページは作れない感じですね。ニュースサイト・ブログサイトは親和性が高そうです。文字と画像だけのシンプルなサイトはすぐにでも対応できそうですね。
WordPressも対応を初めているみたいなので、リリースされたら対応が必要かもしれません。
今後JavaScriptも少し使えるようにしていくみたいなので様子見かな〜。
コメントを残す