<p>モバイル端末からの検索が増えてきた現在、モバイル端末からのユーザーエクスペリエンスは重要です。<a href="https://www.searchlaboratory.com/seo/mobile-optimisation/" target="_blank">モバイル端末からの利用が増える</a>につれて、その表示速度や画面の機敏さへの期待が高まっています。データによると、見ようとしたページがすぐに表示されなかった場合、<a href="https://www.thinkwithgoogle.com/articles/speed-is-key-optimize-your-mob…。ユーザーにとって、表示速度が遅いスピードはよくないですが、同じように、コンテンツ製作者にとっても、よろしくありません。作ったページが実際には見られないということになるからです。</p>
<p>最近、Google のAccelerated Mobile Pages (AMP) について、それから検索やコンテンツマーケティングにとって何を意味するのか、ということが多く語られるようになりました。Google は、2015年10月に最初にAMP について発表を行いました。AMPを採用下コンテンツは、そうでないコンテンツよりも、コンテンツの表示が4倍速くなり、データ使用量が10分の1以下になるといっています。</p>
<p>AMP とは何なのか、コンテンツにどんな影響があるのか、見てみましょう。</p>
<h2>高速コンテンツ</h2>
<p>AMPは、モバイル向けウェブサイトを作成するためのフレームワークで、高速読み込みを可能とするものです。AMPは、モバイル端末におけるコンテンツの表示速度を簡単に改善して、結果としてユーザーエクスペリエンスを高めるようにデザインされています。</p>
<p>現在のところ、Google, Twitter およびその他数社がAMPを採用しています。Facebook がInstant Articles を、Apple が News サービスの提供を始めた直後にAMPが発表されています。AMPは、基本的には、新しいバージョンのHTML、高速版CSS、およびモバイルページ向けJavaScript フレームワークを使うことにより、表示時間を速くして、スムーズにコンテンツが読めるようにすることを目指しています。</p>
<h3>AMP HTML</h3>
<p>AMP HTML は、機能を限定した、新しいHTMLのバージョンです。新しいプロパティーのセットを持ち、これまで用いられてきたスタイルやタグを一部制限しています。HTMLに詳しい人なら、自社のページをAMP HTMLに書き換えることは簡単なことでしょう。<a href="https://www.ampproject.org/docs/get_started/create/basic_markup.html">御…、このサイトを参照されるとよいと思います。</p>
<h3>AMP .JS</h3>
<p>サードパーティによるJavaScript は、AMP では使えませんが、その代わり、モバイルページ向けのJavaScript フレームワークがAMP では用意されています。AMP .JS を使用すると、外部のリソースを非同期で読み込むことができ、ページ読み込みを阻害するような外部のスクリプトの実行を止めることができます。</p>
<h3>AMP CDN</h3>
<p>これはオプションのコンテンツ・デリバリー・ネットワークです。御社のAMPが実装されたページをキャッシュして、必要に応じて最適化し、モバイルフォンから即座にアクセスすることを可能とします。</p>
<p>画像は、ユーザーが画面をスクロールして見えるところにきてからamp-img 要素を使って読み込みを始めます。Google は、コンテンツをキャッシュ、ホストするので、自社サーバーからその都度読み込まれる必要はありません。現在のところ、AMPは、パブリシャー(記事配信サイト)だけが利用可能ですが、近い将来、コンテンツ・マーケターも利用できるようになるでしょう。御社のサイトとコンテンツへの変更を今のうちから準備しておくのがよいでしょう。</p>
<h2>利用例</h2>
<p>Google の検索結果で実際に使用されているAMPの例を見るには、パブリシャーの結果が表示されるような検索をモバイル端末からやってみるといいでしょう。たとえば、テニスプレーヤーのSharapova (シャラポワ)が最近、ドーピングのスキャンダルに巻き込まれましたが、この例を示します。</p>
<p class="rtecenter"><img alt="Google AMP News" class="aligncenter wp-image-10437" height="622" sizes="(max-width: 350px) 100vw, 350px" src="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-N…; srcset="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-N… 169w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-N… 768w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-N… 576w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-N… 300w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-N… 1080w" width="350" /></p>
<p>灰色の稲妻マークはAMPの検索結果であることを示しています。これをクリックすると、ブラウザーで結果が表示されます。上部の青い線をスワイプすると関連の記事でAMP フレームワークで作成された他の記事を表示することができます。</p>
<p class="rtecenter"><img alt="Google AMP BBC news" class="aligncenter wp-image-10436" height="622" sizes="(max-width: 350px) 100vw, 350px" src="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-B…; srcset="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-B… 169w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-B… 768w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-B… 576w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-B… 300w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-B… 1080w" width="350" /></p>
<h2>御社のウェブサイトを AMP 対応にするには</h2>
<p>最初にやらなければならないことは、御社のサイトのページをAMPページとして作成することです。これは、AMPの新しい仕様に準拠していないといけません。AMP では使用できない要素がいくつかあります。たとえば、フォームを使って案件を記載してもらったり、ページ上にコメントを記載してもらうということができません。したがって、新しい仕様にあわせるために、御社のサイトのテンプレートを完全に書き直す必要があるでしょう。</p>
<h3>コードの実装</h3>
<p>BBC は、早くも、すべてのニュース・コンテンツにAMP を導入しました。ページをどのように構成すればよいか、良いお手本になるでしょう。</p>
<p>上であげた例のコンテンツは、<a href="//www.bbc.co.uk/news/business-35751916">//www.bbc.co.uk/news/business-357…; および、<a href="//www.bbc.co.uk/news/amp/35751916">//www.bbc.co.uk/news/amp/35751916</a> です。デスクトップ検索用と AMP を比較することができます。</p>
<p>重要な構成要素として、各ページのソースコード内の<link> タグが同じ内容のページがあることをGoogle に伝えてます。</p>
<p><a href="//www.bbc.co.uk/news/business-35751916">//www.bbc.co.uk/news/business-357…、</p>
<p><a href="//www.bbc.co.uk/news/amp/35751916">//www.bbc.co.uk/news/amp/35751916</a>に… link タグをご参照ください。</p>
<p>これによって、検索ワードやデバイスによって正しいURLを検索結果として表示するようGoogle に伝えるとともに、2つのURLが重複として見られないようにすることができます。</p>
<p>このページのソースコードの最初の部分には、他にも重要な情報があります。下の図の最初の行は、amp コンテンツであることを示しています。4行目はタイトルタグです。これはいつでもSEO対策で重要なものです。それから、6行目は、このコンテンツの解像度のサイズを表示しています。</p>
<p class="rtecenter"><img alt="Google AMP Source Code" class="aligncenter size-large wp-image-10435" height="263" sizes="(max-width: 850px) 100vw, 850px" src="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S…; srcset="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S… 300w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S… 768w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S… 1024w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S… 1452w" width="850" /></p>
<p>ずっと下の方を見ると、以下の記載があります。</p>
<p>これは、JavaScriptコードで、何でも動くように指示しています。カスタムのAMP要素を読み込んだり、読み込みのためのリソースや優先度、画像は遅れて読み込むなど、が含まれます。ソースの構成上、このタグはヘッダータグの最後の要素としなければなりません。</p>
<h3><img alt="Google AMP Source Code 2" class="aligncenter size-full wp-image-10440" height="17" sizes="(max-width: 417px) 100vw, 417px" src="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S…; srcset="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S… 150w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S… 300w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S… 417w" width="417" /></h3>
<h3>スキーマ</h3>
<p>関連キーワードが検索されたときに御社のコンテンツを表示させるためには、スキーマ・マークアップを正しく挿入する必要があります。スキーマ・マークアップは、検索エンジンにコンテンツに関する追加情報を提供し、AMPの検索結果を正しく表示する手助けとなります。</p>
<p>BBC の記事では、JSON-LD 実装法を使って以下のスキーマが適用されています。</p>
<p class="rtecenter"><img alt="Google AMP Schema" class="aligncenter size-full wp-image-10434" height="380" sizes="(max-width: 691px) 100vw, 691px" src="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S…; srcset="https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S… 300w, https://www.brightedge.com/blog/wp-content/uploads/2016/03/Google-AMP-S… 691w" width="691" /></p>
<p>ここでは多くの情報が提供されていますが、それぞれ目的を持っています。スキーマとその実装に関する情報は、公式サイトをご参照ください。<a href="//schema.org/">//schema.org/</a></p>
<p>マルチメディアの観点から、他にもAMPタグが多数用意されています。たとえば、amp-video, amp-carousel または、amp-image-lightboxなどです。追加コンポーネントで、GIF (amp-anim) やYouTube (amp-youtube)を使用することも可能です。主だったソーシャルメディアネットワークは、それぞれ個別に追加コンポーネントを設定しています。</p>
<h3>プラグイン</h3>
<p>WordPress のユーザーにはありがたいことですが、公式のAMP プラグインが既に存在します。これをダウンロードすれば、今後の投稿はすべてAMP対応になります。ただし、プラグインでは、WordPress の「ページ」やアーカイブされた投稿はサポートされませんので、ご注意ください。</p>
<p>以下、御社のAMP によるウェブページをGoogle の検索結果で正しく表示させるためのGoogle によるガイドラインです。</p>
<p><strong>デザイン:</strong>AMP HTMLの仕様にしたがってウェブページを作成すること。</p>
<p><strong>発見:</strong>御社のAMPページをインデックスされたページからリンクを張るか、御社のサイトマップに掲載することによって、発見できるようにしておくこと。</p>
<p><strong>検証:</strong>御社のAMPページが<a href="https://www.ampproject.org/docs/guides/validate.html">要求を満たしていて、</a>Google およびユーザーに対して適切に設定されていることを確認すること。</p>
<p><strong>データの構造化:</strong>御社のコンテンツは、<a href="https://developers.google.com/structured-data/testing-tool">正しくデータマークアッ…。</p>
<p><strong>現状確認: </strong> <a href="https://support.google.com/webmasters/answer/6328309">AMP status report</a> を利用して、御社サイトのAMPページとして正しくインデックスされたページのリストと、見つかったエラーを確認します。</p>
<h2>AMP の利点</h2>
<p>御社サイトでAMPを利用することによる利点、以下のとおりです。</p>
<h3>ユーザーエクスペリエンス</h3>
<p>モバイル端末からウェブサイトの閲覧を行う場合、速度は、非常に重要なユーザーエクスペリエンスの要素です。ウェブページがすぐに表示されないと多くの利用者が興味を失ってしまいますし、<a href="https://www.soasta.com/blog/mobile-web-performance-monitoring-conversio…、表示が1秒速くるだけで、コンバージョン率が27%増える</a>という結果が出ています。</p>
<h3>速度</h3>
<p>ウェブページの表示速度は、SEOの観点からも影響があります。表示速度は、Google の多くのランキング要素のひとつです。もし、御社のページの表示速度が遅いと、検索結果での露出が減少するおそれがあります。</p>
<h3>エンゲージメントの増加</h3>
<p>表示速度が速いウェブページは、読まれやすいので、エンゲージメントも強まるといえます。ユーザーは、トピックをすばやく検索し、AMP検索結果をクリックし、即座にレスポンシブなコンテンツ、読みやすくて、共有しやすいコンテンツを見ることになります。</p>
<h3>パブリッシャー管理</h3>
<p>AMPを利用すると、パブリッシャーは、そのコンテンツに対して自社による管理を強め、コンテンツのリーチを広げ、より簡単に配信を行うことができます。また、モバイル向けのページで様々な広告フォーマット、広告ネットワーク、広告テクノロジーをサポートすることにより、効果的な広告を実施することが可能になります。</p>
<h2>AMPは、検索順位に影響を与えるか?</h2>
<p>簡単に言うと、影響はありません。Google 社の John Mueller 氏は、最近、<a href="//searchengineland.com/google-amp-not-yet-a-search-ranking-signal-243498">「AMPは、ランキングシグナルではない。今のところは。」</a>と言っています。</p>
<p><em>「今のところ、これはランキングシグナルではありません。</em></p>
<p><em>確かに、AMPは、モバイル・フレンドリーなページを作る1つの方法ではあります。私は、既にいくつかのウェブサイトが、サイト全体をAMPフォーマットに変更したのを知っています。もちろん、モバイル・フレンドリーな設定になっています。AMPにより、モバイルフレンドリーになるということはいえると思います。 </em></p>
<p><em>しかし、AMPそれ自体は、今のところ、ランキングシグナルとして設定されていません。」</em></p>
<p>Google がAMPに対して投資している金額を考えると、将来、ランキングシグナルになったとしても、不思議はありません。今のところ、と言っているところを見ると、どうも、そのようです。</p>
<p>Google は、明らかに、検索のインタフェースを通じて、AMPで記載された記事を広めようとしているようです。検索結果のニュース・カルーセルを見るとそう思えます。検索結果のこの部分で表示されるコンテンツの多くが、今では、AMPになっています。直接的なランキングシグナルではないとしても、AMPを導入することによって、検索結果でもっと目立つことが可能になります。将来的に、AMPは、現在のモバイルフレンドリー・アルゴリズムに組み込まれるかもしれません。あるいは、それ単独でランキングの要素になるかもしれません。</p>
<h2>結論</h2>
<p>モバイル端末からの検索が増えている状況で、AMPを導入することにより、パブリシャーやコンテンツ制作者は、投稿記事を広めるための柔軟なプラットフォームを得ることになるでしょう。AMPが正式に開始されたのは、2月末のことでした。現在のところ、Google の検索結果の上部で、主要ニュースのカルーセルとして表示されていますが、検索結果のほかの部分に広がる可能性はあります。Google の技術担当バイスプレジデントのDave Besbris氏は、SMX West のイベントで、「コンテンツが使用されるところではどこでも、AMPを重視する。」と発言しました。</p>
<p>今のところは、ニュースと記事コンテンツのみがカルーセルのAMPコンテンツとして表示されているだけですが、どのタイプのコンテンツが表示されるのかは、検索するたびに、あるいは、検索する日によって変わるかもしれません。自然検索による露出を増やそうと考えている企業や、常に変化する競合環境でトップのランキングを保ちたいと考えている企業は、迷うことなくAMPを検討するべきでしょう。競合サイトとくらべて、5倍も表示に時間がかかるコンテンツは、どんなにすばらしいコンテンツでも意味がありません。表示速度が速いということは、より良いユーザエクスペリエンスを提供し、結果的にSEOにとっても良い影響があります。AMPからは目を離せません。</p>
<p>Anna Francis氏は、ブライトエッジのエイジェンシー・パートナー、<a href="https://www.searchlaboratory.com/" target="_blank">Search Laboratory 社</a> (本社はイギリスのリース)のコンテンツ・マネジャーです。</p>
<p><a href="https://www.brightedge.com/jp/articles">ブライトエッジブログ記事一覧</a></p>










