Googleが推進するAMP、導入のメリットとSEO効果は?

SEO

Googleはユーザービリティを向上するためにさまざまな施策に取り組んでおり、そのひとつとして最近話題になっているのがAMPです。

Googleが推進しているということでSEO効果を期待する声もありますが実際のところはどうなのでしょうか。導入のメリットや手順などとあわせてご紹介します。

モバイルページを高速表示するAMP

AMPとは「Accelerated Mobile Pages」の略で、モバイル端末でウェブページを高速表示させるためのフレームワークのこと。2015年10月にGoogleがTwitterとの共同でプロジェクトを立ち上げ、開発を進めてきました。2016年10月には日本でも導入されたことで広く知られ、注目を集めています。

モバイル端末で検索すると、下記画像のように雷のようなマークがURLの前に表示されることがありますが、これがAMPに対応しているサイトの目印。2018年4月現在、GoogleはもちろんYahoo!やgoo、はてなブックマークなど複数のプラットフォームで対応しています。

amp01.PNG 

AMPを導入することの最大のメリットは、ページが高速表示されることでユーザビリティが大きく向上することにあります。具体的な表示速度はページの作りにもよるため一概には言えませんが、AMPに対応したサイトは一般的なWebサイトと比べるとデータ量は約1/10、また表示速度は4倍程度にもなるとされており、その効果の高さがうかがえます。
特にモバイルの通信速度は一般的な企業や家庭のネットワークと比べると遅い傾向にあるので、ページを高速表示できるメリットは大きいといえるでしょう。また、ページの読み込み時間を短縮することでユーザーの離脱を防ぐことができるため、サイト運営側にとっても大きなメリットがあります。

AMPがモバイルページを高速表示する仕組みとは?

Webページの表示速度はサイトの使い勝手やユーザーのストレス度合いにも大きな影響を与えるため、HTTPファイルや画像の最適化など、ウェブサイトを軽くするさまざまな工夫が編み出されてきました。AMPはいったいどのようにして、ページの高速表示を実現しているのでしょうか。

amp02.png

 

一般的に、Webサイトにアクセスする際はリンクをクリック(もしくはURLを入力)し、ブラウザが要求されたサイトを読み込んで表示します。ページデータの読み込みはユーザーがページを要求した段階で行われるため、どうしてもページが表示されるまでにタイムラグが生じていました。

しかし、AMPに対応したサイトの場合、Googleなど検索サイト側であらかじめページデータをキャッシュとして保存し、ユーザーがリンクをクリックするとキャッシュからコンテンツを返すという仕組みになっています。つまり、検索サイト側でページデータをあらかじめ読み込んでおくため、表示にかかる時間を大幅に短縮することができるのです。

加えて、WebサイトをAMPに対応させるためには規定があり、使用できるHTMLタグも限定されています。これによりHTMLとCSSがシンプルになり、通常のページデータに比べてサイズを抑えることができるようになっています。

AMP導入の具体的な手順

AMPを導入するためには通常のHTMLではなく、AMP HTMLという専用の書式に沿ったページを作成する必要があります。その具体的な手順を、いくつかのステップにまとめて紹介しましょう。

【ステップ1】AMP HTMLの宣言をする

まずは通常のHTML文書と同じように、AMP HTML文書の宣言を行います。記述方法は以下を参考にしてください。


【ステップ2】meta要素を指定する

AMPに対応している文字コードはUTF-8だけなので、あらかじめ指定しておく必要があります。またビューポートの設定も必要となります。どちらか一方でも欠けるとエラーになるので、必ず両方とも設定するようにしましょう。


【ステップ3】canonical/amphtmlでページを指定

AMP専用ページがあることをGoogleなど検索エンジンのクローラーが認識できるよう、元ページとAMPページの両方にcanonicalで指定しておきます。スマートフォン対応ページを作成した時にPC用ページからcanonicalで指定するのと同じと考えると分かりやすいでしょう。

【AMP用ページの記述】

【元ページの記述】

【ステップ4】amp-boilerplateを記述する

AMPが高速化するために欠かせないboilerplateの記述を行います。

【ステップ4】AMP JSライブラリの記述

AMPを稼働するために必要なJSライブラリを読み込むための記述を行います。

【ステップ5】JSON-LDの指定

ページ内の記事がどのような構造で、どういった内容が含まれているのかをクローラーに伝えるためJSON-LDの指定を行います。

ここでは一般的なHTMLファイルにAMPを導入する際の手順を記載していますが、WordPressなどのCMSを使用している場合は、以下のような専用のプラグインをインストールして導入することも可能です。

AMP for WordPress

AMP導入において、注意するべきポイントは?

Webページを高速表示できるAMPには、ユーザービリティの向上やユーザーの離脱防止などさまざまなメリットがありますが、デメリットは無いのでしょうか? 導入前に知っておきたいいくつかの注意点をご紹介します。

効果があるのは静的なサイトのみ

ページを高速表示できるなら、Webサイト内のすべてのページに導入しておきたいところですが、AMPはどのようなページでも効果があるというわけではありません。これについて、Googleの「ウェブマスター向け公式ブログ( https://webmaster-ja.googleblog.com/2016/09/8-tips-to-amplify-your-clients.html )」では以下のような説明があります。

AMP は、あらゆるタイプの静的なウェブ コンテンツ(ニュース、レシピ、映画情報、製品ページ、レビュー、動画、ブログなど)で大きな効果を発揮します。一方、動的で双方向性を重視した単一ページのサービス(地図の経路案内、メール、ソーシャル ネットワークなど)にはあまり効果的ではありません。

【引用】顧客のサイトを AMP 化するための 8 つのヒント | ウェブマスター向け公式ブログ

つまり、上記にあるようなブログやニュースを主なコンテンツとするサイトやECサイトの商品ページなどでは効果があるものの、そうでない場合はAMPを導入しても効果は見込めません。導入の際には、自社サイトがどちらに当てはまるのかを十分に見極める必要があります。

amp03.png

デザインやコンテンツがうまく表示できない可能性がある

AMP HTMLは通常のHTMLに比べて使用できるタグを限定し、AMP JS以外のJavaScriptを許容しない仕様になっています。そうすることでデータ容量を減らし、表示にかかる負荷を軽減していますが、ページ内容によってはそれが制限となり、デザインが崩れたり、コンテンツがうまく表示できなくなってしまったりする可能性があります。

特にスタイルシートを多用して細密に作り込んでいるサイトや、2次コンテンツを利用しているサイトの場合は注意が必要です。AMP導入前には禁止されているタグを確認して、問題がなさそうかどうかを事前にチェックしておく必要があります。

AMP構築のための時間と手間がかかる

AMPの導入手順は前章で詳しく説明させていただきましたが、これらはあくまで基本的なもので実際はサイトの構造に合わせて随時調整・カスタマイズを加えていく必要があります。
また、WordPressなどのCMSを利用している場合はプラグインを活用してAMPを導入する手段もありますが、おそらくこの場合もただインストールするだけではなく、いくつかの細かいエラーに対応していく必要が出てくるでしょう。

つまり、AMPを導入するためにはただ機械的に専用ページを用意するだけでなく、手作業で一つひとつ変更していく必要があります。当然ながら、そのためには相応の知識と工数が必要になり、時間も手間もかかる作業であることを認識しておきましょう。

SEOにはどの程度の影響をもたらす?

多くのマーケターにとって気になるのはこの点ではないでしょうか。AMPはGoogleとTwitterにより共同開発されたフレームワークのため、一部ではSEO効果を期待する声があるのも事実。これについて、Googleの「ウェブマスター向け公式ブログ」では以下のような説明がされています。

有効で表示可能な AMP ページが含まれているかどうかは、検索結果ページでのサイトのランキングには一切影響しません。違いは、サイトに AMP 版が含まれていると、検索結果にアイコンが追加されることです。

【引用】顧客のサイトを AMP 化するための 8 つのヒント | ウェブマスター向け公式ブログ

将来的にランキングのアルゴリズムが変更になる可能性もゼロではありませんが、公式ブログで上記のように説明されている以上、現時点ではAMPを導入してもSEO効果は期待できなさそうです。

ただ、AMPを導入することでページの表示速度が上がりユーザービリティが向上するため、それが大きなメリットになるのは間違いないでしょう。
さらに、2016年10月に日本でAMPが導入された際には、Googleの公式ブログにも導入を待ちわびていたユーザーからの好意的なコメントが投稿されています。こうした状況を踏まえると、今後、検索結果の中から閲覧するサイトを選ぶ際にAMPに対応しているどうかを基準にするユーザーが増えても不思議ではありません。サイトの使い勝手を向上する意味でも、AMPの導入は大きな効果があるといえるのではないでしょうか。

現段階ではまだ導入サイトが少ないため、競合との差別化にもつながる

AMPのメリットはすでにさまざまなサイトで語られていますが、実際に手持ちのスマートフォンで検索してみると導入しているサイトはまだ少なく、ユーザーがその恩恵を感じられるのはごく限られた場面というのが現状です。そのため、できるだけ早い段階で導入できれば競合サイトとの差別化につながるともいえるでしょう。特に、モバイルユーザーをターゲットにしているサイトにとっては、注目しておきたい施策となるのではないでしょうか。

TOP