• 2016.5.11
  • Vol.44
  • WEB
  • Vol.44
  • WEB
  • 2016.5.11

モバイルページ高速化 AMP HTMLを作成してみよう

PCと同等のWeb環境が見られるスマホが普及し、年々Webコンテンツは肥大化しています。モバイルファースト※1※1モバイルファーストとは、モバイルサイトから先に開発する手法のことをさす。の概念が一般的に定着してつつある中、Googleが提供を始めた、スマートフォンで静的なページを高速表示させる「AMP」というフレームワークについてご紹介します。

※1 モバイルファーストとは、モバイルサイトから先に開発する手法のことをさす。

DEVELOPER

Y.M.

AMPとは

AMPとは

Accelerated Mobile Pagesのことで、Google主導のもと、モバイルページの速度向上のために発足したオープンソースプロジェクトです。
Google Developers Japan

AMP HTMLという新しいフレームワークの規則に沿って、コーディングを進めていきます。
従来HTMLそのままの形だと、画像やインタラクションなど、流用できない部分が多々あり、新たにデザイン、コーディングが必要になるものが多いです。
ただ、タグに関してはほとんどHTMLのマークアップ規則のもとで記述できるので、コツさえおさえれば間違いのないものになります。
プロジェクトが発足してすでにページに組み込まれているAMPですが、現在も開発が進んでおり、今後AMP専用の新しいカスタムタグが増えるそうです。

基本的なサンプルは以下のサイトで書かれていますので、これらを実際にコーディングをしてポイントをおさえていきます。
GitHub(英語)

AMPのよい所

・表示速度が早い
単純な高速化だけではなくAMP HTMLでマークアップすることで検索エンジン側のサーバーにキャッシュされる仕組みとなっています。

・AMPコンテンツとして画像付きでわかりやすい一覧が表示される
検索トップに画像付き一覧で表示されるため、他コンテンツと比較し目立ちます。

AMPの注意点

・AMP HTMLフレームワークの規則に沿ってコーディングをするため、従来のHTMLを変えなくてはならない
記述そのものに制約や独自のきまりがあり、外部から自分で記述したcssやjsも読み込めません。

・タグの使用に制限がある(img、iframe、form、inputなど)
高速化、コンテンツ最適化のためにいくつかのタグは使用することを制限、もしくは禁止されています。
imgやiframe等はそれぞれamp-img、amp-iframeなどのカスタムタグを使うように決められています。
formやinput等は仕様が禁止されています。
h1などの見出しタグ、div、p、ul、li、tableタグなど基本的なタグは使用可能です。

・JSが使えない
Javascriptは原則使えません。
AMPページを検索結果に表示する時に必要な「application/ld+json」のみ記述できます。

AMPでコーディング

コーディングを進めていくためのポイントを解説していきます。

まとめ

以上がAMPのためのコーディングのポイントになります。
現状、AMPが検索エンジンに適用されているサイトがあまりなく、確実に確認できるのがGoogleがAMPプロジェクトのパートナーとして認めているメディアサイトでしょうか。
(産経新聞やマイナビニュースなどをGoogle検索すると確認できます。)

検索方法も確立しておらず、どうすればAMPが表示されるかはしばらく試行錯誤が必要なのではないでしょうか。
今回TIPSで作ったHTMLを設置し、サイトをAMPとして表示させるために色々と模索していきたいと思っています。

TAGS

RECENT POSTS

TRENDING

INDEX

MORE FOR YOU

今日もあなたに気づきと発見がありますように

画面を回転してください | 株式会社BOEL

画面を回転してください