YAMAGUCHI::weblog

海水パンツとゴーグルで、巨万の富を築きました。カリブの怪物、フリーアルバイター瞳です。

AMP対応 2016.02版

AMP

はじめに

こんにちは、Go界のエルゴノミクスキーボードです。今日Googleがモバイル検索で Accelerated Mobile Pages に対応したというアナウンスがありました。

また中の人が仕組みや導入手順を書いてくれたようです。やさしい！！

しかしながら、私も今回のGoogleのAMP対応に関して、なぜかいろいろと知見が溜まったような気もするので、忘れないうちにこの場に書いておこうと思います。これはあくまでも私個人の意見であって、ここのコメントになにか書かれても一切お答えしないことを先に書いておきます。なお2016.02版としているのは、これからもいろいろと追加されたり変更されたりする可能性があるので、とりあえず現時点のものだという意思表示です。

まずAMPで何が出来るのか

よく聞かれることですが、まず大前提としてAMPは「一切」技術的に新しいことはありません。それどころか、現在ブラウザ上でウェブアプリケーションが実現できることが100だとすると、10くらい、あるいはもっと少ないことしかできません。しかしながら、出来ることを絞っているからこそ高速に表示ができるという、ごくごく当たり前のものです。当たり前でしょう、ということがQiitaの記事で書いてあったのでここにリンクしておきます。

しかしできないことが少ないながらも、収益化や分析や最低限のエンターテイメント性のためにはカスタムタグを作って、極力出来ること残しているという形です。

なにを目的としているのか

プロジェクトの公式サイトにも書いてありますが、私の理解では「静的なページをユーザが求める速度で素早く表示する」というところが主目的だと考えています。ですので、多くのユーザーインタラクションが必要なページはAMP化を考えるよりもProgressive Web Applicationのような形で実現するほうが筋が良いように思います。

「静的なページ」が何を指すのかといえば、ニュース記事、ブログポスト、店舗ページ、商品ページなど、内容の変化が無いあるいは少ないページを想定しています。いくつかは実際にサンプルにも載っています。

どうすればAMP対応になるのか

先のGoogle Developers Japan Blogのポストに手順が紹介されていますが、どこからか得た知見を元にもう少し詳細に書いておこうと思います。特にこれはGoogleのクローラーがインデックスするための内容です。

1. URL構造の決定

そもそもAMP化するという場合、既存のモバイル向けページを置き換えるというイメージを持たれる方がいますが、そうではなく、そのページは残したままAMP HTMLの仕様に従ったページを追加で作成するという形になります。*1 そして、元のページ（canonicalページ）とAMPページをお互いに <link> タグで指し合う必要があります。例示すると

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Lorem Ipsum</title>
  <link rel="amphtml" href="https://example.ampproject.org/amp/article-metadata.html" />
  ...
</head>
<body>
  ...
</body>
</html>
  • AMPページ
<!doctype html>
<html AMP lang="ja">
<head>
  <meta charset="utf-8">
  <title>Lorem Ipsum</title>
  <link rel="canonical" href="https://example.ampproject.org/article-metadata.html" />
  ...
</head>
<body>
  ...
</body>
</html>

そのため、CMS等で自動生成する場合には元ページに対してAMPページをどのようにするか決めておく必要があります。たとえば

AMPページをGoogleのクローラーが見られるようにする

キャッシュ出来るようにするためにはGoogleのクローラーが見に行けないと意味ないのでrobots.txtやメタタグにnofollowなどがないようにします。 たとえばこういうタグがあったらアウトです。

<meta name="robots" content="nofollow,noarchive">

AMPページを作成する

AMP HTMLの必須事項にしたがってAMPページを作成します。特にAMP HTMLの仕様とGoogleインデックスの仕様で異なる部分はschema.orgの仕様にしたがったメタデータの付与が必須である点です。

またAMPが発表された直後のブログポストではboilerplateのタグが次のような形になっていましたが、これは古いので（一応validになりますが）変えたほうがいいでしょう。*2

<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

いまのコードはこちらです。

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

validatorを使って検証する

現在、開発者が使えるvalidatorは次の2種類があります。

  1. URLにフラグメント #development=1 をつけてGoogle Chromeなどのデベロッパーコンソールで確認できるもの
  2. node.jsで書かれたコマンドラインで動かせるもの

基本的には1でテストするのがお手軽ですし、開発中はこれが楽だと思います。ただCIなどに組み込む場合は2を使うのが良いと思います。当たり前ですが2のほうが実装としては新しいので、1で見つからないエラーが2で見つかることもよくあります。

メタデータが正しいか確認する

AMP HTMLの検証が通ると結構安心してデプロイしてしまうのですが、メタデータが正しくないとGoogleのクローラーはキャッシュしてくれないので、Structured Data Testing Tool で検証します。また schema.org よりも制限があるところでよく引っかかるのは次の2点です。

  1. logoのImageObjectのurlがPNG、JPEG、GIFになっていない
  2. imageの横幅が696px未満

特に1はエラーになるので注意です。詳細はこちらのページにあります。

Search ConsoleのAMPレポートツールで状況を確認する

実際にインデックスされたAMPページはここに表示されます。手元でAMPのvalidatorやStructured Data Testing Toolで何もエラーが出ていないのに、ここでエラーが出ている場合でよくあるのが、テスト段階でクローラーが見に行ける場所にAMPページを置いていて、一度invalidな状態でインデックスされてしまった場合です。その場合はSearch Consoleから再クロールのリクエストをしましょう。

よくある質問やはまりどころ

canonicalページはPC版とモバイル版どちらを指定したらいいでしょうか

すでにPC版とモバイル版それぞれにおいてページを作成している場合に、AMPページで指定するcanonicalページはどちらを指すべきか、ということですが、結論から言えばPC版とモバイル版だけを見た場合に、その2つでcanonicalになっている方を指すようにしてください。（たいていはPC版がcanonicalになっていると思います）

整理するとPC版がcanonicalで、各々次のようなURLになっている場合

このような関係になります

amp-adはどのアドネットワークに対応していますか

まずはここを見ることをおすすめします。type属性で対応しているアドネットワークであれば非常に簡単に設置できます。

また使用しているアドネットワークが対応していなかった場合には、ぜひそのアドネットワークの方にampprojectのレポジトリにpull requestしていただけるようリクエストされることをおすすめします。アドネットワークの方であれば、ぜひ率先してpull requestされることをおすすめします。以下公式ドキュメントより引用。

We welcome pull requests by all ad networks for inclusion into AMP.

amp-xxxxというタグはどう使ったらいいでしょうか

とりあえず以下のページを見てイメージを掴んでから公式のドキュメントを見るのがおすすめです

公式のドキュメントはGitHubレポジトリのMarkdownファイルを見るのが最新なのでおすすめです。

アナリティクスを使いたいですがどうしたら良いですか

まずGoogle AnalyticsとAdobe Analyticsは両方共対応しています。他にも多くのアナリティクスツールに対応しています。type属性を確認してください。詳しくは次のドキュメントを参照。

最も気になるところとして取得できるイベントとデータだと思いますが、現状日々増えているので常に次のドキュメントを確認することをおすすめします。

<amp-analytics> 要素を <head> 要素内に書きたい人もいますが、 <body> 要素内に入れてあげてください。またAMPプロジェクトが発表された直後の記事などに <amp-pixel> を使った例がありますが、こちらもあまりおすすめしません。

styleについて

AMPの制限で一番きついところの一つにstyleを <head> 要素内の <style amp-custom> 要素内で一発で決めないといけない、というのがあります。CMSなどの開発をされている中で、 <article> 要素の入稿である程度自由にタグを挿入できる機能がある場合は、まずあらゆるstyleを全部 <head> 要素内に押しやらないといけないですし、要素内の属性もかなり削ってやらないとinvalidになります。

AMP対応のブラウザはなんですか

まず、そもそも「Accelerated Mobile Pages」なので、デスクトップブラウザは（動かないわけではありませんが）無視してください。また最初に書いたとおり、AMP HTMLというのは、HTML5の仕様に制限をつけただけのものです。なのでHTML5を解釈するモダンなモバイルブラウザであれば基本的になんでも動きます。ただそれ由来で細かいところで差異が出てくることも承知しておいてください。（例: <amp-video> タグ）

おわりに

どこからか得られた知見でした。

*1:もちろん、AMP HTMLのページに置き換えることも可能です。その場合はそのページ自体をcanonicalページとします。

*2:ここにも古いって書いてあります