Googleのモバイル検索結果にAMP対応ページの表示が
先日開始されました。まだまだ初期段階と言えそうなAMPですが、注目度は日々高まっているのではないでしょうか。今回のセッションはAMPを扱ったセッションであり、Googleのデイブ・ベスブリス氏を招いています。AMPの全体像から実装方法までを扱ったセッションですが、Q&Aでも多くの質問が挙がっていました。Googleが最も注力している分野の1つであるため、多くの関心を寄せた内容と言えそうです。– SEO Japan
AMP:より速いコンテンツとオープンな配信
Moderator：Danny Sullivan（Founding Editor, Search Engine Land, @dannysullivan）
Speakers：Dave Besbris（Vice President of Engineering, Google）
ダニーがスピーカーにはドレスコードがあると言ったんだ。だから、今日はお気に入りのパーカーを着てきたよ。（笑）
Googleのモバイル検索がAMPページに対応
検索の利用は様々。答えを見つけたい時もあれば、ただコンテンツを読みたい時もある。AMP対応のページが、カルーセルで表示されるようになったことを、お気づきの方は多いだろう。
AMP HTMLを用いたリーディング体験
AMP対応の記事はキャッシュされ、即時にロードされる。パブリッシャーはビジュアルデザインとビジネスモデルのコントロールが可能だ。また、既存の広告フォーマットもサポートしている。そして、関連性のある記事に対し、深いエンゲージメントを提供する。
既存のWebページとの比較
既存のWebページとAMPページは大きく違う。既存のページには、多くの広告やソーシャルボタンがあり、そのため、コードをたくさん送らなければならない。それらのコードが整理されていないことが課題と言え、余分なコードが沢山ある。特に、分析と広告のコードに多く発生している。ブラウザがそれらを理解することはできないが、AMPはこのブラウザの理解を手助けするものだ。
AMPとは？
通常のWeb技術を用いてAMPは作成することができる。具体的には、以下の4つの要素から成る。
1.HTML5(AMP HTML)
2.JavaScript(AMP JS)
3.CSS3（Custom Styling）
4.Global Proxy Cache（AMP Cache）
AMPの配信の仕組み
通常のWebページに、AMPに向かうリンクを設置する。GoogleやTwitterはそのリンクを見て、AMPページを発見する。サーバーの調整などは必要ない。
AMPキャッシュ
AMP対応のページは、それぞれの地域にキャッシュがある、という状態になる。Googleは、非常に多くのデータポイントを設置している。その結果、リクエストの後、すぐにドキュメントの提供が可能となる。AMPの場合、ユーザーから近い距離のデータポイントからコンテンツを配信しているのだ。また、キャッシュの更新も非常に早く、常にフレッシュな状態にしている。おそらく、今日のパブリッシャーは多くのお金をCDNに使っているだろう。
AMPの仕組み
通常、対となる別々のファイルが、オリジナルのページ内に設定されたリンクを経由して参照される。AMPはオープンソースのフレームワークであり、JavaScriptに置き換わるブロックを形成する。広告を含む、全てのコンテンツはHTTPSでホストされる。
AMPの特徴
要素の事前フェッチ（プリフェッチ）、再レイアウトなし、非同期読み込みなどの、スマートなコンテンツの優先順位がある。また、レスポンシブデザインで、常にスクリーンに対して最適なサイズを提供する。さらに、amp-iframe以外のカスタムJavaScriptの非許可、スクロール要素なし、50KBを上限としたインライン・スタイルシートなど、デザインに制限を持たせている。
AMPの設定方法
まずは、ドキュメントを参照しよう。技術的なドキュメント、GitHub、StackOverflow、などで情報を得ることができる。次に、AMPファイルを実装し、バリデーションを行う。最後にローンチ。既存の記事からAMPファイルへのリンクを設置し、クロールが可能な状態にする。
AMP対応は今すぐに！実装についての具体的なアドバイス。
Speakers：Paul Shapiro：（Organic Search Director, Catalyst, @fighto）
AMPコンポーネント
多くのHTMLコンポーネントはAMPで使用することはできない。ビルトイン、もしくは、拡張コンポーネントを使用することになる。コンポーネントのリストは下記のとおり。
- Images → amp-imag（ビルトイン）
- Animated GIFs → amp-anim（拡張）
- YouTube embeds → amp-youtube（拡張）
- Social embeds → amp-facebook,-instagram-pinterest,-twitter,-vine（拡張）
- TOC/Anchor Jumps → amp-accordion（拡張）
- Analytics codes → amp-analytics（拡張）
- Slideshow pages → amp-carousel（拡張）
アナリティクスの設定方法
通常のレシピサイトの例。複数のトラッキングコードのために、非常に時間がかかる。AMPは2つのタグを使用する。標準のAMPコンポーネントである<amp-pixel>と、拡張コンポーネントでより複雑な設定が可能な<amp-analytics>だ。
広告の設定方法
既存のニュースサイトの読み込み速度の比較表を見てみるとよくわかるが、広告の読み込みにかかる時間の割合が非常に多い。AMPにはすでに20を超えるパートナーが協力している。多くが、<amp-ads>を用いた実装が可能だ。
AMPのバリデーション
それぞれのステップを説明する。
1.AMPページヘナビゲートする。
2.クロームでデベロッパーツール（Ctrl+Shift+I）を起動し、
3.デベロッパーツール内のコンソールタブを選択する。
4.URLに下記の”#develoment=1″ような文字列を加え、ページをリロードする。
5.コンソールでバリデーションがうまくいったか、エラーが表示されているかを確認する。
6.Googleのリッチスニペットテストツールを使用し、スキーマのマークアップを確認する。
サーチコンソールでの確認
サーチコンソール（”検索での見え方”内）で確認することができるが、まだデータ反映が遅いため、ここのデータを完全に信用するべきでないだろう。
AMPのバリデーションツール
沢山ページが有る場合に便利なツールはこちら。
WordPressでの設定方法
公式のプラグインをダウンロードする。しかし、スキーマの実装についてはエラーの可能性があるため、注意が必要。また、Googleアナリティクスの実装は、PageFrogのプラグインを追加しよう。
amp-iframeについて
amp-iframeはAMPではサポートされていない機能の救世主と言える存在。非サポートの広告フォーマットや埋め込み型のコメントシステムなど。
amp-iframeのルール
amp-iframeは拡張コンポーネントであり、追加のJSライブラリを<head>内に含める必要がある。ロードされるリソースは他のドメインやサブドメインから、HTTPS対応でなければならない。また、トップから600pxかファーストビューの75%は少なくとも離れている必要がある。
まとめ
- AMPページのセットアップのために、多少の変更が必要だろう。（ビルトイン、もしくは拡張コンポーネントを使用。）
- トラッキングピクセルにはamp-pixelを使用する。アナリティクスには、amp-analyticsを使用する。
- AMPは多くの広告をサポートしており、amp-adコンポーネントを使用し、簡単に実装できる。
- amp-htmlとSchemaのバリデートは必須。確認と修正を繰り返そう。
- WordPressはAMP対応において、非常に楽な方法だ。簡単に設定が可能なプラグインを公開しており、マイナーチェンジを繰り返している。
- AMPに対応していない機能があれば、amp-iframeを使用する。
Q&A
AMP対応は拡大する？
今のところ検索のみ。また、記事の表示部分にアイコンを設置。AMPはニュースパブリッシャーだけに限っているわけではない。ブログも表示されている。将来的にはGoogle検索の他の部分でも、AMPページが表示されるようになるだろう。
カルーセルのサポート。Eコマースなどはいつ対応が始まる？
AMPは始まったばかり。でもユーザーのためになるようにしたい。具体的なタイムラインはない。
SEOについて。AMPページのメリットは？
新しい体験をユーザーに提供できる点。カルーセルでの表示やスワイプでも即時に表示する。他の方法では実現できない新しい体験をAMPで構築する。実装できるならした方がいい。
AMPはランキングブーストか？
AMP対応自体がランキングブーストであるわけではない。しかし、”AMPは非常にモバイルフレンドリー”だ。非常に速いサイトを作りたいのであれば、AMPはとてもよい方法だ。オープンなエコシステム。だれでもドキュメントを参照できる。Googleも色々共有する姿勢がある。
A/Bテストは？
A/BテストをAMPページで実装することに非常に興味がある。
サイトマップにAMP対応ページのURLを含めるべきか？
通常は既存のページのリンクからAMP対応のページを発見しているが、サイトマップにAMP対応のURLを含めても良い。
カルーセルに含まれるのはAMPページのみ？
カルーセルはAMPページのみ。AMP対応でなければカルーセル内に含まれない。
カノニカルについて
きちんと実装されていれば、GoogleはAMPをカノニカルだと認識する。その結果、オリジナルの記事がAMP対応のURLで共有され、バズッた場合、AMP対応のURLが上位表示されることを防ぐ。
他のドメインやサブドメイン
他のドメインやサブドメインでAMPページを作ることもできる。オリジナルのサイトの構造に縛られることはない。
タグマネージャーの対応
AMPはGoogleタグマネージャーをまだサポートしていない。
クロールバジェットについて。
AMPページもクロールバジェットを使用（消費）する。
GoogleはいつまでAMPをサポートするの？（笑）
AMPはちょっとしたプロジェクトなどではない。他のパートナーとも共同しているプロジェクト。Web自体ををより良くするための取り組みだ。
サイト全体をAMP対応
基本的にはWebページを作成し、タグを設定して、こっちにAMPバージョンがあるよ、と伝えるイメージ。しかし、サイト全体をAMPにすることも可能。その結果、非常にモバイル対応なサイトのできあがり。
CDNからAMPにリプレイスできるか？
使用しているCDNの種類による。
AMPアナリティクスと普通のアナリティクスの違いは？
特にない。
レスポンシブでAMPの良い例は？
Search Engine LandはAMP対応なので参考になるかも。
現時点でAMP対応が必要なサイトは限られているでしょうが、今後のGoogleの対応によっては、その範囲は広がる可能性があります。既存のHTMLの技術をベースとしているため、実装方法は難しくないという発言もありましたが、ほぼ全てのドキュメントが英語で書かれているため、我々としてはとっつきにくい理由の1つでもあるでしょう。（内容の修正や変更もあるため、いきなりのローカライズは難しいかと思いますが。。。）記事中でも触れていましたが、全てのページをAMPで構成するサイトは非常に興味深いと思いました。これから多くの事例（成功も失敗も含めて）が出てくることも予想されるため、その辺りの情報もキャッチしていきたいと思います。– SEO Japan
から高い
まで、3段階で示しています。
自分が買い物をするときもそう思います。「会員登録をすればお得な情報を受け取れます」ってのが定番ですが、「お店にとってお得な情報」にしか見えないことがほとんど。ユーザーの選択肢が豊富にあるから囲い込むのではなく、選択肢の中から選んでもらうことが大切ですね（→資料ダウンロード）。