1. ホーム > 
  2. Webサイト集客 > 
  3. SEO(検索エンジン最適化) > 
  4. SEO内部対策 > 
  5. AMP(Accelerated Mobile Pages)についておさらい

AMP(Accelerated Mobile Pages)についておさらい

AMPとは、モバイルでのページ表示速度を爆速にする仕組み。対応範囲は広がっていますので、AMPの仕組みやAMPページを作成する方法をおさらい。

  • 2016/5/23
  • 2016/5/24

AMP(Accelerated Mobile Pages)とは?

AMPとは、2015年10月にGoogleがTwitterなどと共同で立ち上げた、モバイルページを爆速にするためのプロジェクト。

日本国内では、朝日新聞デジタルや産経デジタル、毎日新聞などが早々に対応し、LINE@やLINE公式アカウントのページでも対応するなど、爆速で広がりを見せている注目のプロジェクトです。

従来のWeb技術のサブセットで構築されていて、AMPフレームワーク向けのAMP HTMLの仕様も、一部のタグが違う、使用できないタグがあるなどの細かな違いこそあるものの、従来のHTMLとほとんど変わりません。

AMP HTMLでサポートされていないタグも、frameなどの積極的に使うことがないタグが中心です。

AMP HTMLの技術仕様
https://www.ampproject.org/docs/reference/spec.html

AMPに対応するとどうなる?

2016年4月現在、AMPはニュースとブログに最適化された仕様になっていますが、よく目にするのはニュース系の記事でしょう。

下の図は5月23日に「笑点」と検索した時に表示された、ニュース記事のカルーセルです。

笑点で検索した時のカルーセル

稲妻のマークが付いている記事がAMP対応のページ。タップしてページを表示すると分かりますが、ほぼ瞬間的にページが表示されます。「爆速」です。

ここでブラウザのアドレス欄を見ると分かりますが、ページを遷移したはずなのに、アドレスが、google.co.jpになっています。

AMPページを表示した時のアドレスバー

ここがAMPのキモになる部分です。

AMPの仕組み

AMP対応ページは、クロールしたタイミングでGoogleがキャッシュしてくれていて、そのキャッシュをユーザーに表示することで、爆速と呼べる表示速度を実現しています。

Google Developers Japanのブログに分かりやすい図がありますので引用します。

AMPの仕組みの図
引用:Google モバイル検索が Accelerated Mobile Pages に対応しました
http://googledevjp.blogspot.jp/2016/02/google-accelerated-mobile-pages.html

 

スマホからはそのページが本来保存されているWebサーバーではなく、GoogleのAMPキャッシュからデータを読み込むような仕組みになっています。

WebページのAMP対応をする方法

AMP対応をする一番簡単な方法は、AMP専用のページをPCページ、スマホページとは別に作成することです。

なぜ従来のスマホ用ページをAMPページに対応する方法ではいけないのか?それは、AMP用ページでは制限がいろいろとあるからです。

AMP用ページの制限

冒頭で技術的な仕様は、従来のHTMLとはそれほど変わらないと書きましたが、従来のHTMLで作成されているWebページをAMPに対応させるには、幾つかの制限があります。

  • JavaScriptが使えない
    AMP HTMLでは<script>タグが使えません。そのため、何らかの広告配信に使用しているJavaScriptのタグは、そのまま使うことができません。
  • 外部ファイルのCSSを読み込めない
    CSSはすべてAMPページ内に記述する必要があります。

特に、JavaScriptが使えないと言うのは厄介です。

Google Adsenseの広告配信はAMPに対応をしているようですが、それ以外の広告配信やトラッキング系のコードも、そのまま使うことはできません。

いろいろと面倒な制限をどう制御するか?などを考えるよりも、シンプルにAMP専用のページを出力するように変更する方が、逆に開発工数などもかからないはずです。

AMP対応の大まかな流れ

webページをAMP対応にして、Google検索に表示させるようにするには、大きく以下のような3段階の流れで作業を行います。

  1. WebページをAMP HTMLでマークアップする
  2. AMPページをGoogleが検出できるようにする
  3. Webページのコンテンツを構造化データでマークアップする

WebページをAMP HTMLでマークアップする

まずはWebページをAMP HTMLでマークアップします。使用できるタグの種類や、置き換えが必要なタグについては、技術資料に詳しく書かれています。

AMP HTML Specification
https://www.ampproject.org/docs/reference/spec.html

サンプルのソースコードも書かれていますので、参考にしながらマークアップしましょう。

AMPページをGoogleが検出できるようにする

AMPページは単に作成して公開するだけでは、GoogleがAMPページとして検出できない可能性があります。

そこで、モバイルページのアノテーション設定などと同じ要領で、PCページなどのAMPページ以外のページで、AMPページがあることを伝えるためのタグを、<head>~</head>内に設置しておきます。


<link rel="amphtml" href="AMPページのURL" />

AMPページは、PCページなどのAMPに対応していないページに正規化します。


<link rel="canonical" href="PCページのURL" />

Webページのコンテンツを構造化データでマークアップする

最後に、Webページのコンテンツを、構造化データでマークアップします。構造化マークアップをすることで、冒頭でご紹介したカルーセルにAMPページを表示させることができるようになります。(もちろん検索クエリに最適だと判断されればの話です)

構造化マークアップの情報タイプは、NewsArticleか、BlogPostingを使います。

構造化マークアップに使用するシンタックスは、JSON-LDでも、microdataでも大丈夫です。

どのサイトもAMPに対応した方がいいのか?

2016年5月のGoogle I/O 2016で、今後AMPがレシピページにも対応していく事が発表されました。

一瞬だったようですが、ZOZO TOWNの商品ページもAMPカルーセルに表示されたようです。
【2016.5.18】ZOZOの販売ページがAMPで検索結果に表示 – バカ毛

これはバグではないか?という話ですが、今後商品まで広がっていく可能性は十分にありそうです。

すぐに対応すべきだとは思いませんが、今後対応範囲が拡張していく事を踏まえて、開発工数の確認や見積もりなどの準備だけは進めておいてもいいのではないかと思います。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします