AMP (Accelerated Mobile Pages) HTML 導入前に確認しておくこと ｜ SiTest (サイテスト) ブログ

AMP (Accelerated Mobile Pages) HTML とはGoogleが昨年2015年に発表したスマートフォンでページを高速表示させるためのフォーマットです。
またGoogle検索だけでなくTwitterやPinterestなどでも導入が決定しています。

2016年2月24日よりGoogleの検索エンジンで対応しておりますので、すでに見かけた方もいらっしゃるかと思います。
スマホで話題のニュースなどを検索していただくと見つかります。

このようにAMPの文字が表示されたカルーセルがページ上部に表示されます。
ページの最後にデモページのリンクを掲載していますので、中々見つからないという方はお試しください。

AMPのデモページ経由で「ニュース」と検索した所メインビューではありませんがページの上部にニュースコンテンツがカルーセルで表示されます。
※2016年3月時点ではAMPデモの方が検索結果に反映しやすいようで、通常のGoogle検索で「ニュース」と検索してもAMPのコンテンツは表示されませんでした。

ページを選択し読みこんでいただくとすぐにページが表示されます。
その他にもページ内で左右にフリックするとサイトを跨いで次の記事を読み込むこともできます。
この時の表示速度もとにかく早く、実際には読み込みが終わっていて通信が発生していませんでした。

さらにスマホでページを閲覧する際画像が読み込まれるにつれページが勝手にスクロールしてしまい記事を読むために再度元の位置にスクロールしなければならないという経験があるかと思います。
その勝手にスクロールする現象がAMP HTMLページでは一切発生しません。
これはAMP HTMLの仕様によるもので、後程触れさせていただきます。

簡単な仕様をまとめておきますと、
– JavaScriptを排除(視覚効果等は現状カスタムエレメントを使用します)
– HTML、CSSを一つのリクエストで取得
– 画像やiframeなどの領域だけ確保しておき遅延読み込みで対応
などとにかくページの動作を軽くさせることに重点を置いているのが分かります。

全ての記述が1ファイルに収まっているのでページを表示するまでに必要なリクエストが1回で済み、画像やiframeはページの表示が終わった後読み込めたものから順次表示していきます。

画像やiframeの入る箇所はコンテンツが読み込まれる前では、あらかじめ設定された高さや幅の分だけ空きスペースがあり、そのため画像やiframeが読み込まれてもサイト全体の高さは変わらずスクロールが発生しないようです。

これまでのコーディングと違い注意しておきたいのが、構造化データです。

AMP HTMLのページではJSON-LDが必須で記述がない場合エラーが出る点もこれまでのサイトのコーディングと大きく異なっています。
JSON-LDとはサイトの構造化データを検索エンジンに通知するフォーマットの一つです。
JSON-LDの他microdata、RDFaなどのフォーマットがあります。

構造化データとはその文字コンテンツが何を意味するのかを定義するためのものです。
例えば会社概要ページで「社名: 株式会社グラッドキューブ」と書かれていても人の目からは社名を指すと理解できますが、検索エンジンはただの文字とか理解できません。
そこで検索エンジンにも文書の意味を理解してもらうため構造化データを定義します。

JSON-LDで記述してみると

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Corporation",
"name": "株式会社グラッドキューブ",
"review": [
...
]
}
</script>

となり会社名が「株式会社グラッドキューブ」であると検索エンジンにも理解できるようになります。

そんなJSON-LDですが、他のフォーマットとは違い<script type=”application/ld+json”></script>タグで囲まれた箇所にまとめて記述できます。
既存ページの構造化データをJSON-LDで記述しているサイトなどはそのまま流用できるのでAMP HTMLの導入もスムーズかと思います。

HTML要素も一部専用のものを使用します。

img要素, video要素, audio要素, iframe要素などは先頭に「amp-」をつけ、幅と高さを設定する必要があります。

form要素はAMP HTMLに未対応ですが、近いうちに対応予定です。

a要素は対応していますが、href内で「javascript:」から書き始めることは禁止されています。
このように同じタグでも使用方法が違うものもあります。

先に触れたようにすべてインライン(1ファイル内)に記述する必要があるなど通常のコーディングとの違いは数多くあるので、次回にもう少し細かな仕様をまとめて、実際にコーディングしてみたいと思います。

AMP HTML のプロジェクトはまだ開発が進んでいる段階ですので、向いていないページもありますがWebView経由でスマホのネイティブアアプリに対応させるなど、その使用目的は単なるウェブサイトの高速表示だけにとどまらないようです。
より優れたUX (ユーザーエクスペリエンス)を実現するためにもプロジェクトの更新は見ていきたいと思います。

https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.html
こちらのページの中程に動画があります。
https://g.co/ampdemo
こちらのリンクからデモ検索ページにアクセスできます。
スマホでアクセスして任意のキーワードで検索してみてください。

関連記事：　「AMP(Accelerated Mobile Pages)-HTMLを実際に書いてみた」