amp-html
AMP HTMLを考えて見る

はじめに

AMP HTMLのことを調べ始めて、気が変わったというか、最初に対応するかどうかをあまり考えていなかったのだけれども、AMPHTMLのみで構成されたサイトは検索などでどんな動きをするのか知りたくなったので、このサイト全体をネイティブAMPサイトとして構築することにした。

但し、Adsenseの審査には普通のHTML内のhead内に指定したスクリプトを記述する必要があるため、審査が終わるまではcanonical で指定したページを複製してhead内にスクリプトを足すことにした。この件は「AMP HTMLでAdsenseを申し込む」に詳しく書くことにする。(2018/10/30現在)

AMP HTMLとは

Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである -- Wikipediaより

HTMLの亜種というか一種で、特定のHTMLタグやCSS、自前ジャバスクリプトが使えない（使う方法もあるが）、AMP HTML、AMP JSを使用して記述する。

Google検索などの結果で⚡️付きの検索結果が表示され、タップすると最適化が施されたGoogleのキャッシュページ（AMP Cache）が表示される。そのために通常よりも4倍近い高速でページ表示させることが可能になる。

細かい話は長くなるので、別に書くとして、ざっくりとした対応方法を次に記す。

対応方法

情報が変わることがあるので、基本的なことは公式サイトで確認するのが良い。

■AMP HTML ページを作成する

その上で、ざっくりとした対応方法を記述する。

既存のページからAMP対応ページを作る

この場合は、割りと面倒くさい。使用しているCMSによってはプラグインで自動書き出しを行ってくれるそうだが、どこまで完璧にこなしてくれるのかはわからない。

ポイント

  • amp用のhtml宣言を行い、amp用のjsを読む込む必要がある
  • 自前のJSが使えない
  • 画像や動画のタグは amp-img,amp-video タグに書き換えなければならない。必ずwidthとheight指定をしなければならない
  • CSSは head の style amp-custom タグ内にまとめて書かないといけない、インラインスタイルもダメ。また特定のCSS使用できない

head内の編集は多くの場合一つのテンプレートで行っていると思うので、たいしたカロリーではなかったが、自前のJSが使えないので、jqueryなどを使ったサイトデザインなどの場合は多くの修正が求められるだろう。

自前のJSを使えない代わりに、アコーディオンメニューやスライドメニューなどを実現できるamp用コンポーネントを公開しているのでそう言ったものと変えていく必要がある。
なお、このサイトではコンポーネントの一つである、amp-slidebar を使用してスライドメニューを出している。

また、一応インラインフレームを使うコンポーネントを使うことで自前のJSを使うことはできる。公式ではGoogleマップなどをこのコンポーネントを使って表示する方法を紹介している。

CSSの対応だが、普通のCSSで書かれているファイルに複数のCSSファイルをインポートしている場合は、ちと面倒くさい。外部ファイルを参照することはできないので、一つのCSSにすべてまとめて、それを style amp-custom の間に貼り付ける必要がある。

SASSの場合は、メインのSASSに参照させたいSASSをimportさせて、compressed 設定で書き出したCSSファイルの中身を style amp-custom の間に貼り付ける。
なお、公式サイトでは、SASSで書き出したファイルをGrowと言われるpython module？を使用して静的ページを書き出しているらしい。

何にせよ、CSSファイルを読み込ことができないので、静的ファイルに書き出す時にプログラムでCSSファイルの中身を抜き取って style amp-custom 内に入れるのがいいと思う。

ちょっとお試ししたいと思っているなら、 playground が用意されているので、試してみるのもあり。

■AMP playground

また、チェックに関しては公式サイトやGoogle Search Consoleでバリデータを公開しているので使用するといい。

■AMPバリデータ

canonical と amphtml

AMP HTML は現在mobile向けのページにしか対応していないので、PC向け（とAMPに対応していない検索エンジン）とmobile向けにページを用意するのが一般的だそうだ。その場合は、

PC向け（とAMPに対応していない検索エンジン）のhead内に、link rel="amphtml" href="amp用URL"

AMP用ページ内に link rel="canonical " href="canonical 用URL"

必ず両方忘れないように記述する必要がある。

AMPだけのネイティブサイトを作りたい場合は、AMP用ページ内に link rel="canonical " href="自分のURL" を記述しなければならない。

メリット

  • ページ表示が早くなる（Googleの調査では、ページ表示に時間がかかるとそれだけで離脱率が高くなるそうだ）
  • 構造化データを付随させることで画像付き検索結果が行えるようになる
  • 限られたルールの中で作成するのでシンプルな構造で作られる（人によるか）

デメリット

  • 作成するのに新たに知識が必要。既存のページを対応させるにはそれなりの工数を必要とする
  • AMPネイティブで作成しない場合は、PC対応した二つのページを作成しなければならない
  • ページを更新してもキャッシュが更新されないと検索結果からは古い状態で表示される
  • 独自JSが使えないので、jqueryなどを使用している場合は大きく書き換えなければならない
  • 将来性がまだ不透明。やっぱやーめた or 別の作るわ　とGoogleに言われると二度手間になる

最後に

情報、と言う点で考えると、短い文章で素早く知り得たい事が分かる　事が重要であり、複雑である必要はない。

シンプルで見やすいページを作成するのは難しい（このページの文章が読みやすいのかすら怪しい）

AMPである必要はないが、AMPを使うことで少しでもそこに近づけるのなら、研究して使うことには意義があるのかなと思う。

最終更新：2018年11月12日