SMX West 2016-AMPとGoogleについて、あなたが知っておくべきこと。

Googleのモバイル検索結果にAMP対応ページの表示が先日開始されました。まだまだ初期段階と言えそうなAMPですが、注目度は日々高まっているのではないでしょうか。今回のセッションはAMPを扱ったセッションであり、Googleのデイブ・ベスブリス氏を招いています。AMPの全体像から実装方法までを扱ったセッションですが、Q&Aでも多くの質問が挙がっていました。Googleが最も注力している分野の1つであるため、多くの関心を寄せた内容と言えそうです。– SEO Japan

OLYMPUS DIGITAL CAMERA

AMP:より速いコンテンツとオープンな配信

Moderator:Danny Sullivan(Founding Editor, Search Engine Land, @dannysullivan)
Speakers:Dave Besbris(Vice President of Engineering, Google)

OLYMPUS DIGITAL CAMERA

ダニーがスピーカーにはドレスコードがあると言ったんだ。だから、今日はお気に入りのパーカーを着てきたよ。(笑)

Googleのモバイル検索がAMPページに対応
検索の利用は様々。答えを見つけたい時もあれば、ただコンテンツを読みたい時もある。AMP対応のページが、カルーセルで表示されるようになったことを、お気づきの方は多いだろう。

AMP HTMLを用いたリーディング体験
AMP対応の記事はキャッシュされ、即時にロードされる。パブリッシャーはビジュアルデザインとビジネスモデルのコントロールが可能だ。また、既存の広告フォーマットもサポートしている。そして、関連性のある記事に対し、深いエンゲージメントを提供する。

既存のWebページとの比較
既存のWebページとAMPページは大きく違う。既存のページには、多くの広告やソーシャルボタンがあり、そのため、コードをたくさん送らなければならない。それらのコードが整理されていないことが課題と言え、余分なコードが沢山ある。特に、分析と広告のコードに多く発生している。ブラウザがそれらを理解することはできないが、AMPはこのブラウザの理解を手助けするものだ。

OLYMPUS DIGITAL CAMERA

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に使っているだろう。

OLYMPUS DIGITAL CAMERA

AMPの仕組み
通常、対となる別々のファイルが、オリジナルのページ内に設定されたリンクを経由して参照される。AMPはオープンソースのフレームワークであり、JavaScriptに置き換わるブロックを形成する。広告を含む、全てのコンテンツはHTTPSでホストされる。

AMPの特徴
要素の事前フェッチ(プリフェッチ)、再レイアウトなし、非同期読み込みなどの、スマートなコンテンツの優先順位がある。また、レスポンシブデザインで、常にスクリーンに対して最適なサイズを提供する。さらに、amp-iframe以外のカスタムJavaScriptの非許可、スクロール要素なし、50KBを上限としたインライン・スタイルシートなど、デザインに制限を持たせている。

AMPの設定方法
まずは、ドキュメントを参照しよう。技術的なドキュメントGitHubStackOverflow、などで情報を得ることができる。次に、AMPファイルを実装し、バリデーションを行う。最後にローンチ。既存の記事からAMPファイルへのリンクを設置し、クロールが可能な状態にする。

AMP対応は今すぐに!実装についての具体的なアドバイス。

Speakers:Paul Shapiro:(Organic Search Director, Catalyst, @fighto)

OLYMPUS DIGITAL CAMERA

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>を用いた実装が可能だ。

OLYMPUS DIGITAL CAMERA

AMPのバリデーション
それぞれのステップを説明する。

1.AMPページヘナビゲートする。

OLYMPUS DIGITAL CAMERA

2.クロームでデベロッパーツール(Ctrl+Shift+I)を起動し、
3.デベロッパーツール内のコンソールタブを選択する。

OLYMPUS DIGITAL CAMERA

4.URLに下記の”#develoment=1″ような文字列を加え、ページをリロードする。

OLYMPUS DIGITAL CAMERA

5.コンソールでバリデーションがうまくいったか、エラーが表示されているかを確認する。

OLYMPUS DIGITAL CAMERA

6.Googleのリッチスニペットテストツールを使用し、スキーマのマークアップを確認する。

OLYMPUS DIGITAL CAMERA

サーチコンソールでの確認
サーチコンソール(”検索での見え方”内)で確認することができるが、まだデータ反映が遅いため、ここのデータを完全に信用するべきでないだろう。

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

OLYMPUS DIGITAL CAMERA

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が上位表示されることを防ぐ。

OLYMPUS DIGITAL CAMERA

他のドメインやサブドメイン
他のドメインやサブドメインで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

002年開設、アイオイクスによる日本初のSEOポータル。SEOに関する最新情報記事を多数配信。SEOサービスはもちろん、高機能LPOツール&コンサルティング、次世代SEOに欠かせないインフォグラフィックを活用したコンテンツマーケティング等も提供。 SEOブログながら、ウェブマーケ全般。アドテク、ソーシャル、スタートアップ、インフォグラフィック等。