【東証プライム企業も多数利用!】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは?

【PR】楽天市場

Googleのモバイルファーストインデックスの考え方により推奨されてきたAMP。当初はAMPを導入していることにより検索画面で目立ちやすくなるなどの優遇措置がありました。

ところが、現在はそのAMPへの優遇措置がなくなり、AMPの対応を続けるべきかやめるべきか、悩んでいる方も多いことと思います。

そこで、この記事では、AMPの優遇措置の終了による影響や、今後のAMPに関する対応について解説します。

1.AMP(Accelerated Mobile Pages)とは?

AMP(Accelerated Mobile Pages)とは、ひとことで言うならば「モバイルページを高速に表示させるための手法」のことです。

2015年10月にAMPプロジェクトは、モバイルユーザーのユーザー体験向上を目的としてGoogleとTwitterが協同し、オープンソースプロジェクトとして立ち上がりました。

「AMP」という言葉は当初、プロジェクト名として発表されましたが、団体が発表した「AMP HTML」というフレームワークを指す場合もあります。

むしろ、「AMP」といえばこちらのフレームワークを指している場合が多いかもしれません。

当初はトップニュースの枠内にだけ表示されていたAMP対応ページですが、2016年10月にはトップニュースの枠内だけでなく、通常の検索結果にも表示されるようになりました。

2018年現在ではAMPに対応したメディアが増え、検索キーワードによってはAMPページが上位10ページのほとんどを占めているなんていう状況も珍しくなくなってきました。

1-1 なぜAMPページは高速に表示されるのか?

AMPページは、

AMP HTML

AMP JS

AMP Cache

と、大きく分けて3つの要素から構成されています。

参考:AMPとは

AMPページの仕様はかなり限定的で、非同期のJava Scriptのみを許容していたり、全てのコンテンツのリソースサイズを静的に規定するなど「読み込みに時間がかかることはさせない」という方針で仕様が策定されています。

これによって読み込みや描画の負荷を減らし、コンテンツを一瞬で表示させることを実現しています。

表示の高速化を実現しているのはこれらの仕様だけではありません。

AMPの仕様に従って作成されたページはAMP CacheというAMPページを配信するためのコンテンツ配信ネットワーク(CDN)によってキャッシュされます。

ユーザーが検索画面やSNSにシェアされたURLからAMPページのリンクをタップすると、AMP Cacheに保存されているキャッシュからコンテンツを返します。

つまり、本来のページがあるウェブサイトへのアクセスが発生せず、いちいちサイトを読み込まなくても済むようになっているため、コンテンツを高速で表示することが可能になっているのです。

1-2 AMPに表示されるコンテンツ、AMPに向いているコンテンツ

2018年4月に大幅な内容のアップデートを行いました。

AMPページは2016年のリリース当初には「記事ページ(article)」のみをサポートする規格として登場しました。

当時はAMPの仕様が限定されていたこともあり、ECサイトやポータルサイトなどの複雑な機能を持つサイトは対応が難しく、キュレーションメディアやニュースメディアなどのサイトが試験的に導入を進めていました。

しかし、当初よりECサイトなどの表示速度による離脱率などがサイトの成果に大きく影響するサイトではAMPのニーズが高く、世界的に先駆けてeBayがAMPを導入した事が話題となる動きが見られていました。

2017年には徐々にAMPの仕様が拡大され、ECサイトやポータルサイトにも応用できる要素が次々と追加されていきました。

2018年4月現在では、キュレーションメディアやニュースメディアの他に、食べログやマイナビなどの情報サイトでも導入が進んでいます。

カルーセル部分の導線にもAMPページが適用されており、右上にAMPの⚡マークが表示されています。

日本国内のECサイトでAMPを導入している事例はまだ見られませんが、ECサイトにおいてAMPを応用するためのノウハウはAMP StartというAMPのテンプレートを配布しているサイトで得ることができます。

このサイトはAMPプロジェクトのサイトから派生した、AMPのテンプレート配布に特化しているサイトで、テンプレートは用途別に4種類(E-COMMERCE、NEWS + BLOG、ART & DESIGN、FOOD & DRINK)用意されています。

さらに、それぞれのテンプレートにはデモサイトも用意されており、導入のチュートリアルも合わせて読むと非常に分かりやすくなっています。

導入の簡単なチュートリアルも用意されている他、実際の挙動がどうなるのかをブラウザ上で確認することも可能です。

全てのページが英語で書かれてはいるものの、直感的に理解できる構成になっているため、エンジニアでない筆者が読んでも非常に分かりやすいと感じました。

まずはサイトを訪れてみて下さい。

1-3 モバイルフレンドリーアップデートとは何が違うの?

ややこしいのですが、AMPとモバイルフレンドリーアップデートは全く別の考え方であり、異なるプロジェクトです。

AMP対応がモバイルフレンドリー化の一部になるとは言えますが、例えば今後、「AMP対応していなかったために検索順位が落ちる」ということはありません。

注意しなければならないのは、AMP対応の有無は検索順位に影響しませんが、モバイル対応の有無は検索順位に影響するということです。

モバイルフレンドリーアップデートにより、モバイルに最適化されているサイトが検索結果において優位に評価されるようになりました。

AMP対応していなくても順位は落ちませんが、モバイル化は必須であり、モバイル最適化がされていないと順位が落ちてしまう危険性があるので注意が必要です!

2.AMP導入のメリット

AMP導入のメリットは、検索流入が増えることです。

AMP対応によってモバイルページ(モバイルサイト)の読み込み速度が向上して、上位化すれば、その分検索から自サイトへ流入するユーザーを増やすことができます。

こうして、AMPを導入すれば、AMP専用の検索機能に表示されたり、検索結果に表示されるAMPマークによってレスポンスが上がりクリック率の向上が見込めます。

こういった点も合わせて、検索流入の増加が期待できます。

  • 検索順位が上昇する
  • 新たな検索流入が増える
  • クリック率が上がる

2-1.検索順位が上昇する

AMPを導入して、サイトの表示速度が早まることで、検索順位を上昇させることができます。

例えば、AMP HTMLに準拠してマークアップし、かつ検索クエリとの関連性を考慮した良質なAMPページを作成して、そのAMPページをサーバー上に公開します。

そうして公開したAMPページがインデックスされれば、読み込み速度の早いページとしてGoogleに評価されるので、順位上昇の恩恵を受けることができます。

こうして、上位化の可能性が高まる点が、AMPを導入することのメリットの1つです。

ちなみに、サイトの表示速度は軽微なランキングシグナルです。

なので、最重要となるコンテンツの中身を中心に最適化しながら、SEO対策を進めるようにしましょう。

2-2.新たな検索流入が増える

特定の検索機能向けに構造化マークアップしたAMPページを公開することで、新たな検索流入が増えます。

例えば、カルーセルやリッチリザルトといった検索機能に表示するための構造化データをマークアップして作成したAMPページを公開します。

そうすることで、これらの検索機能に作成したAMPページが表示されるので、そこから目新しい検索流入を獲得することができます。

こうして、検索流入の経路を拡大して、アクセス増大まで見込める点が、AMPを導入することのメリットの1つです。

2-3.クリック率が上がる

検索結果にAMPマーク(⚡)が表示されて、検索ユーザーのレスポンスが上がることで、クリック率が向上します。

もう少し言うと、AMPページがインデックスされれば、検索結果にAMPマーク(⚡)が表示されます。(現在はモバイル検索のみ表示)

このAMPマークにより、読み込み速度の早いページが目に見えてわかるので、高速表示を求めてる検索ユーザーのレスポンスが上がって、クリック率の向上が期待できるというわけです。

こうして、検索ユーザーにクリックされやすくなる点が、AMPを導入することのメリットの1つと言えます。

3.AMP導入のデメリット

AMP導入のデメリットは、コンバージョンが減る可能性があることです。

例えば、一部の広告がAMP対応してないため、AMPページに広告が表示できず、その分その広告からのコンバージョンが減るといった具合です。

また、一部のサイトリンクが表示されなくなるので、そのリンクからの検索流入が減ったり、別途AMPページが増えるので、それに応じて運用の手間も増えます。

さらには、サイト状況によってエラーが出るなどして簡単にAMP化できないこともあるでしょう。

  • コンバージョンが減る
  • 運用の手間が増える
  • うまくAMP化できない場合がある
  • アクセスが減る

3-1.コンバージョンが減る

AMPを導入することで、コンバージョンが減る可能性があります。

例えば、アフィリエイトサイトを運用してる場合、AMP対応してないASP広告があれば、その広告がAMPページで表示されません。

そうなれば、その分の広告収益が発生しないのでコンバージョンが減ってしまいます。

このように、ASP広告ではAMP対応してる広告が限られてるので、その分コンバージョンが減ってしまう可能性がある点が、AMPを導入することのデメリットの1つとなります。

ちなみに、アドセンス広告はAMPに対応してます。

3-2.運用の手間が増える

AMPを導入することで、運用の手間が増えます。

もう少し言うと、基本的に、AMP HTMLでAMPページを作成するので、ページごとに、正規ページとAMPページの2ページを管理します。

そうなれば、ページ数に応じて管理するページが増えるので、その分運用の手間も増える形になります。

このように、管理するページが増えて運用の手間が増大してしまう点が、AMPを導入することのデメリットの1つとなります。

ちなみに、WordPressで構築したサイトであれば、AMPプラグインを導入して動的にAMPページが生成できるので、AMP HTMLを作成する手間が省けます。

さらに、ページごとにAMP化、非AMP化の切り替えが簡単にできるので、WordPressを導入してないサイトよりも運用の手間がだいぶ軽減できます。

3-3.うまくAMP化できない場合がある

AMPを導入しようと実装を試みても、うまくAMP化できないことがあります。

例えば、AMP HTMLの自らAMPページを作成したり、WordPressであればAMPプラグインを使ってAMPページを生成して、AMPの導入を試みます。

そして、作成したAMPページの状況を、「Chromeデベロッパーツールのコンソール機能」や「Chrome拡張アドオンのAMP Validator」、「AMPテストツール」、「サーチコンソールのAccelerated Mobile Pages機能」などで確認した際にエラーメッセージが表示されれば、うまくAMP化できてないことになります。

《AMP のエラー

レポートでは、標準的な AMP エラーに加え、以下の問題(エラーまたは警告)が明らかになることがあります。

Google 固有の AMP の問題

コンテンツの不一致: 埋め込み動画なし

推奨サイズより小さい画像を指定してください

AMP ページのドメイン不一致

URL が見つかりませんでした(404)

サーバーエラー(5xx)

robots.txt によりブロックされています

クロールエラー

参照している AMP URL は AMP ではありません

参照している AMP URL はスタンドアロン AMP です

URL に noindex が指定されています

このページの「unavailable_after」の日付が期限を過ぎています

正規 URL に指定した URL が無効です》

※引用元:AMP テスト – Search Console ヘルプ

また、「HTML タグの禁止された用法、無効な用法」もよくあるエラーの1つです。

こうしたエラーが出れば、Googleガイドラインに準拠できてないことになるので、結果的にうまくAMPが導入できません。

このように、サイトの構築状況によって簡単にAMP化できない点が、AMPを導入することのデメリットの1つとなります。

ちなみに、表示されたエラーをすべて修正してGoogle検索に対応したAMPページを公開することができれば、うまくAMP化できます。

3-4.アクセスが減る

AMPを導入することで、アクセスが減る可能性があります。

もう少し言うと、AMP導入することで、検索スニペットに表示されてた一部のサイトリンク(「一行表示のサイトリンク」や「~に移動リンク」)が表示されません。

そうなれば、一部の検索流入経路を失うので、その分検索流入が減ってアクセス減少につながる可能性があります。

このように、ユーザーの流入経路の数が減ることによってアクセス減少につながる可能性がある点が、AMPを導入することのデメリットの1つとなります。

ちなみに、「一行表示のサイトリンク」や「~に移動リンク」は、Googleの検索仕様を満たした特定のサイトのみに表示されるリンクです。

なので、これらのサイトリンクが表示されてる数が少なければ、そこまで大きくアクセスが減少することはないでしょう。

4.今後のGoogleのAMP対応

Googleのモバイルの検索結果でのAMPに対する優遇措置は終了しましたが、AMPページが評価されなくなったというわけではありません。

今後のGoogleのAMP対応に関して、注目すべきポイントは以下の3点です。

  • モバイルには今後もAMPページが表示されてSEO効果は継続する
  • 通常のHTML内でAMP表示できるBento AMPの提供
  • 評価の新ガイドラインは「ページエクスペリエンス」

4-1.モバイルには今後もAMPページが表示されてSEO効果は継続する

AMPページが用意されているサイトは、モバイルにはAMPページが優先的に表示されることになります。

AMPページはGoogleのモバイルファーストインデックスの考えから作られているページなので、読み込みも早く、一定のSEO効果が見込めます。さらにページ内容が評価されていれば、十分に上位表示を狙うことができるでしょう。

4-2.通常のHTML内でAMP表示できるBento AMPの提供

先述のように、GoogleはAMPから完全に手を引いたわけではありません。現在は「Bento AMP」というコンポーネントツールが公開されています。

今まで、AMPページを作るには通常のHTMLページの他にAMP用のページを作る必要がありましたが、こちらではAMPのコードを書く必要はありません。Bento AMPでは、通常のHTMLページにコンポーネント化したAMPページを記載することで、通常のHTMLページでAMPも表示できるようになります。

このように、Googleではモバイルファーストインデックスについての取り組みは続いており、その表現方法には引き続きAMPが用いられることになっているのです。

4-3.評価の新ガイドラインは「ページエクスペリエンス」

今後のAMPページは、「ページエクスペリエンス」というガイドラインを使って評価されます。

【ページエクスペリエンスの意味】

《ページ エクスペリエンスとは、ユーザーがモバイルまたはデスクトップデバイスでウェブページの操作を行った際の、情報そのものの価値以外に関するエクスペリエンスの尺度となるシグナルのセットです。これには、ウェブに関する主な指標(ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する指標のセット)が含まれます。また、モバイル フレンドリー、HTTPS、煩わしいインタースティシャルに関するガイドラインといった既存の検索シグナルも、これに含まれます。》

※引用:Google検索セントラル

ちなみに、ページエクスペリエンスは、「LCP(読み込み時間)」「FID(インタラクティブ性)」「CLS(ページコンテンツの視覚的な安全性)」「モバイルフレンドリー」「HTTPS」「煩わしいインタースティシャル」の6つから評価されます。

この評価指標から考えれば、AMPページはAMPページであるということだけで「読み込み時間」「モバイルフレンドリー」が高評価になるため、十分なSEO対策になると考えていいでしょう。

5.AMPの対応方法

AMPの対応をするには、まず、AMP HTMLの宣言に基づいたうえで、AMP専用のHTMLタグでマークアップしながら、AMPページを作成します。

そして、作成したAMPページをツールなどで検証して、有効性に問題が無ければAMPの導入に至ることができます。

  • AMPページを作成する
  • AMPページの有効性を確認する

5-1.AMPページを作成する

AMPページを作成するには、AMP HTMLの宣言をしたうえで、専用のAMPタグでマークアップしたHTMLファイル(拡張子HTML)を作成します。

もう少し言うと、必須のAMPタグでマークアップして、AMPコンテンツとしてGoogleに認識させるためのWebページを作成します。

ちなみに、WordPressを使ったサイトなら、AMPプラグインを導入するだけで、AMPページが簡単に作成できます

<!doctype html>

<html amp lang=”en”>

  <head>

    <meta charset=”utf-8″>

    <script async src=”https://cdn.ampproject.org/v0.js”></script>

    <title>Hello, AMPs</title>

    <link rel=”canonical” href=”http://example.ampproject.org/article-metadata.html”>

    <meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

    <script type=”application/ld+json”>

      {

        “@context”: “http://schema.org”,

        “@type”: “NewsArticle”,

        “headline”: “Open-source framework for publishing content”,

        “datePublished”: “2015-10-07T12:02:41Z”,

        “image”: [

          “logo.jpg”

        ]

      }

    </script>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

  </head>

  <body>

    <h1>Welcome to the mobile web</h1>

  </body>

</html>

※引用元:AMP HTML ページを作成する – AMP

上記のAMP HTMLコードは、AMPページを作成するための基本的なテンプレートです。

テンプレートに記載されてる構造化データ(JSON-LD + schema.org)のマークアップは必須ではありません。

ですが、構造化データをマークアップすれば、カルーセルやリッチリザルトといったAMP専用のGoogle検索機能に優先的に表示されます。

そうなれば、新たに検索流入の経路が増えて、サイトのアクセス増加につながり、サイトパフォーマンスの向上が見込めるようになります。

また、AMPページをHTTPS化(SSL化)する、広告や画像、SNSコンテンツなどをAMP専用のタグでマークアップする、CSSをインラインで記述してデザインを維持する、AMPページをレスポンシブデザインにするなどしてサイトパフォーマンスを高めることも可能です。

こうして、パフォーマンスを最大限引き出すためには、まず基本的なAMPページを作成する必要があります。

そのためには、まず必須となるソースコードをマークアップしたAMP HTMLを作成しましょう。

ちなみに、既存のHTMLファイルがある場合は、そのHTMLファイルに記述されてるコードをコピーして、そのコードをコピペしたページを元にAMPページ(index-amp.html)を作成するとよいでしょう。

5-2.AMPページの有効性を確認する

作成したAMPページが、Google検索で有効なページか否か?を確認するために、AMPテストツールを活用します。

AMPテストツールのページにアクセスして、AMPページのURLを入力したら、「URLをテスト」ボタンをクリックします。

URLではなく、ソースコードでもAMPページの有効性がチェックできます。

https://search.google.com/test/amp?hl=ja

②「有効なAMPページです」と表示されれば、Google検索結果でAMPページが採用される対象となるので、結果的にAMPを導入したことになります。

一方、「有効なAMPページではありません」と表示された場合は、表示される問題箇所を修正したうえで、再度AMPテストを行いましょう。

また、AMPテストツールと合わせて、「Chromeデベロッパーツールのコンソール機能」や「Chrome拡張アドオンのAMP Validator」、「サーチコンソールのAccelerated Mobile Pages機能」を活用して、AMPページの有効性を検証することをおすすめします。

ちなみに、AMP専用の検索機能に表示するための構造化データをマークアップしてる場合は、「構造化データテストツール」を利用して、マークアップ内容に問題がないか?も検証しましょう。

6.まとめ

この記事では、GoogleのAMPの優遇が終了したことによる影響や、今後の取り扱いについて解説してきました。

Googleの検索結果に表示されるAMPの優遇措置は終了しましたが、「カルーセル」については別の評価基準で評価されて同じように表示が残ることが予想されます。

また、AMPページは異なる形で表現されても、もともとの「回線環境の悪いモバイルでも見やすいページ」という概念は残るので、AMPページを作ることはSEO対策として十分役に立つと言えるでしょう。

【東証プライム企業も多数利用!】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは?

【PR】楽天市場