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
このページは、外部サイト SEO Japan の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
Facebookいいね!の多い記事
Twitterで言及の多い記事
はてなブックマーク人気記事