TIPS

2016.05.12
vol.44
WEB

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

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

こんにちは。エンジニアの毛利です。
PCと同等のWeb環境が見られるスマホが普及し、年々Webコンテンツは肥大化しています。
Webページ表示の高速化は、限られた通信環境で快適な閲覧をするために必須となっています。

高速化のアプローチ方法は、Webプログラミングの最適化、画像の最適化、サーバー強化、チューニング、検索エンジンへの最適化など様々な方法があります。
Googleをはじめとして様々な検索エンジンはユーザーのニーズに応えるため、検索エンジンでの表示をモバイル最適化を優先、優遇しています。
「モバイルファースト」の概念が、一般的に定着してつつある中、
Googleはスマートフォンで静的なページを瞬時に表示できるようなフレームワークの提供を開始しました。
それが「AMP」。
今回はWebを高速表示させるための新しい枠組み「AMP」についてご紹介します。

AMPとは

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

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

基本的なサンプルは以下のサイトで書かれていますので、これらを実際にコーディングをしてポイントをおさえていきます。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md（英語）

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でコーディング

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

demo
!DOCTYPE宣言はhtml5と同様になります。
html「<html ⚡>」もしくは「<html amp>」と記述します。
link rel=”canonical”オリジナルページのURLを記述します。
meta name=”viewport”content=”width=device-width,minimum-scale=1,initial-scale=1″
<style amp-custom>オリジナルのCSSはここに記述します。外部CSSを読み込むことはできません。
<script type=”application/ld+json”>schemaの記述をします。必須項目と推奨項目があります。
amp-carousel-0.1.js必ず読み込みます。
<style amp-boilerplate>必ず記述します。内容の変更はできません。
img画像はamp-imgというカスタムタグで読み込みます。
width、heightが必須項目です。layoutというオプションが4種類あります。
amp-pixelanalyticsコードを入れます。
tid=アナリティクスID

画像のlayoutオプション一覧です。

fixedwidth、heightに従い、固定幅になります。
responsiveコンテンツ幅に応じて、画像が拡縮します。画像比率はwidth、heightに基づきます。
fixed-height縦幅のみ固定になります。widthは指定しない、もしくはautoにします。
fillブラウザの有効幅いっぱいに表示されます。画像比率は保持されません。

json Schemaの記述です。必須項目を抜粋しました。
Google Developerから情報が出てますので、推奨項目も含めた詳しい情報はMark Up Your Content Items  |  Google Developersを参照下さい。

headline 見出しを110 文字以内で書きます。
image記事の画像です。
image.url画像URLです。
image.height
image.width		画像の幅を設定します。
画像の横幅は696px以上です。
publisher記事の発行者を書くのに必要な項目です。
publisher.name発行者の名前です。
publisher.logoロゴの名前です。
publisher.logo.height
publisher.logo.width		ロゴの幅を設定します。
datePublished記事が公開された日時です。ISO形式で書きます。
author記事の著者情報の項目です。
author.name著者名です。

最後にオリジナルページに下記のタグを挿入します。

なお、公式のガイドラインは下記のページにのっていますので一度目を通してみてください。
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags（英語）

まとめ

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

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

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2018
May （）
April （）
January （）
2017
December （）
November （）
October （）
September （）
August （）
July （）
June （）
May （）
April （）
February （）
January （）
2016
November （）
September （）
August （）
July （）
June （）
May （）
April （）
March （）
January （）
2015
December （）
November （）
October （）
August （）
July （）
April （）
March （）
February （）
January （）
2014
December （）

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

お問い合わせをする

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。

見積もり依頼をする