AMPとは?SEO効果とメリットを徹底解説【導入マニュアル】

Pocket

AMPとは?SEO効果とメリットを徹底解説【導入マニュアル】

スマホなどモバイルからのネット利用が、とうとうPC利用者を追い抜かした。このニュースは2016年のものです。

当時、検索市場の全トラフィックに占めるモバイルユーザーが51.2%と過半を占め、同時にGoogleも2018年3月より正式にモバイルファースト(モバイルユーザー優先)の発表を行いました。

そんな中、最近特に注目を集めているのがAMPです。SEO対策としても効果的で、モバイルユーザー向けのページ表示速度を高速化することができます。

今回は、このAMPの仕組みからメリット・デメリット、さらに具体的な実施方法までお伝えしていきます。SEOにおいては、今後ますますモバイルユーザーに対する重要性が高まってくるはずなので、今のうちにAMPに対応しておくことをおすすめします。

*引用元:TechCrunch、2016/11/2、モバイルからのインターネット利用がついにデスクトップを追い越す― StatCounter調べ

AMPとは?SEOへの効果と検索順位への影響力を検証

AMP(Accelerated Mobile Pages)とは、スマホ等のモバイル端末におけるブラウザのページ高速表示化のシステムです。GoogleがTwitterと共に開発した仕組みで、SEOにおいても非常に重要な要素となります。

たとえば、Googleで特定の言葉を用いて検索を行ったとしましょう。すると1~10位までの検索結果が1ページ目に表示されます。

通常、この表示されたコンテンツをクリックすると、HTMLや画像、動画データを読み込むために時間がかかってしまいます。コンテンツページ内のHTMLが複雑で、画像などが多いと、それだけ読み込みに多くの時間を要しユーザービリティを阻害してしまうのです。

そこで、WebページのHTMLなどをGoogleもしくはTwitterがキャッシュしておくことで、読み込み時間を削減することができます。これがAMPの仕組みです。要するに、AMP用のページでは、通常のものより高速で表示することが可能ということです。

AMP対応のページを作成できるのはモバイルのみとなり、特にスマホユーザー向けの施策といえるでしょう。スマホを利用した検索ユーザーが増えるなか、GoogleはますますモバイルフレンドリーなWebサイト(スマホユーザーなどを優遇するWebサイト)の検索結果を上位に引き上げる予定です。

SEOでAMPを実施するメリット・デメリット

AMPを導入したWebサイトは、Googleよりモバイルフレンドリーな内容とみなされSEO施策としても有利になります。ここでは、SEOでAMPを実施することによるメリット・デメリットを紹介しています。

AMP導入のメリット

SEO対策によるAMP導入のメリットは次の通りです。

  • ページ読み込み時間のストレスなく滞在時間や回遊率向上に役立つ
  • モバイルユーザーを重視したSEO対策として検索上位に上がりやすい
  • AMPの認知が広がればCTR(クリック率)にも好影響

AMP対応のページは、モバイルからアクセスしたときに一瞬で内容が表示されます。待ち時間はほとんどありません。また、ページ全体が軽くスクロール速度も高くなるため、スマホユーザーなどの利便性が増します。

AMPに対応するページは、検索結果に「雷マーク(⚡)」がつくため、ユーザーはAMP ページかを一瞬で判断できます。

もし、上記のようなAMPのユーザービリティの高さが一般的に認知が高まれば、それだけでCTR(クリック率)の上昇から、滞在時間、回遊率(エンゲージメント)向上につながっていくということです。

AMP導入のデメリット

SEO対策によるAMP導入のデメリットは次の通りです。

  • AMPと元のページとのデザインが異なる可能性がある
  • AMP専用のページを別に用意する必要があり手間がかかる

GoogleはモバイルフレンドリーのWebサイトを優遇する発表を行っていますが、サイト運営者の施策方法として、まだ完璧に環境が整ったわけではありません。AMPも元々のページから自動生成されるわけではなく、運営者が専用ページを作成する必要があります。

特に、元のページに様々なデザインを加えている場合は注意しましょう。AMPは画像やHTMLデザインなどをできるだけ簡素にして読み込み速度を高めようとするため、サイトの見た目などがガラッと変化する可能性があります。

AMPページを作成した後は、必ずGoogleサーチコンソール(SearchConsole)で「AMPテスト」を行っておくようにしてください。ここでは、作成したAMPページを実際の画面を見ながらデザインや見た目を確認することができます。

SEO対策に効果的なAMP対応方法

AMPはSEOにも効果が高く、Googleがますますモバイルユーザーを重要視していく傾向から、今後はスマホなどに対応したWebサイトの権威性が高まっていくことでしょう。

ただし、デメリット面で紹介したようにAMPは対応に時間を要します。

ここからはAMPの具体的な対応・施策方法をお伝えしていきますが、モバイルユーザー専用の担当者をつけて実施するなど、できるだけ作業を分担させて効率化することをおすすめします。

AMPの基本デザインとテンプレート

AMPを実施する場合、必ずHTML上に必要なタグや機能の記述が必要です。ただ、基本的な記述式には統一性があるため、以下のテンプレートが便利に利用できます。

【AMPページのHTMLテンプレート】

<!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="https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup">
    <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>


*引用元:https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup?referrer=ampproject.org

基本的に上記HTMLコードをそのままコピーできますが、AMPに必要な記述式だけは最低限覚えておきましょう。詳しくは以下でお伝えしています。

HTMLを使ったAMP対応方法

HTMLを利用してAMP記述式を書いていくには、HTML宣言やmeta(メタ)要素などを覚えておいてください。

AMP HTML宣言

HTMLの最上部には宣言を記載しますが、そこでAMPに対する文言も入れておきます。以下をご覧ください。

【AMP HTML宣言】

<!doctype html>
<html amp lang="ja">

上記の「amp」という部分は、「⚡」でも表現できます。

meta(メタ)のAMP記述

meta要素にAMP内容を記述する場合、次のように指定をします。

【AMP meta要素】

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

AMPはUTF-8にのみ対応ということもあり、文字コードとして「utf-8」という指定は必須です。また、「viewport」指定も必要なので、両者を忘れずに記述しておきましょう。

構造化マークアップ

構造化マークアップとは、記事タイトルや概要などに意味をつけ足して、GoogleのクローラーがHTMLを瞬時に判断できる施策のことです。

SEO対策としては大きな効果がないものの、商品評価(星5つで評価)やイベント日などの情報を検索結果上に表示することが可能で、ユーザーのCTRや利便性の向上などに大きく寄与します。

AMPにも構造化マークアップが必要で、記述がないとサーチコンソールでエラーが出てしまいます。次のようにマークアップ設定を行ってみてください。

【AMP用の構造化マークアップ】

<script type="application/ld+json">
   {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "headline": "Article headline",
     "image": [
       "thumbnail1.jpg"
     ],
     "datePublished": "2015-02-05T08:00:00+08:00"
   }
   </script></script>

AMP用の定型句

AMPでページを高速化するため、定型句と呼ばれる次のような記述が必須です。

【AMP用の定型句(boilerplate)】

<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>

AMP用のライブラリ記述

AMPが正確に表示するためにライブラリの読み込み情報をHTML上に記載しておきます。こちらの記述がないとAMPページが正しく反映されないため、必須の情報といえるでしょう。

【AMPライブラリ】

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

AMPのカノニカル(canonical)設定

カノニカル設定とは、同じドメイン内の重複したコンテンツを一つに統合して検索エンジンに伝える方法です。

AMPはもともと一つの情報コンテンツを複製し、モバイルユーザー向けに高速化した別ページを作成します。

そのため、カノニカル設定がないAMPページは重複コンテンツとしてGoogleからペナルティを受ける危険性が残ります。必ず次のようなカノニカル設定をHTML内に記述しておきましょう。

【AMPのカノニカル記述】

<link rel="canonical" href="【オリジナルページのURL】">

AMPのアノテーション設定

カノニカル設定を行ったAMPページには、同時にアノテーション設定も行っておきます。こちらも重複した別々のコンテンツページを、Googleに誤認してもらわないように設定する方法です。

【AMPのアノテーション記述】

<link rel="amphtml" href="【対象のAMPページURL】">

まとめ

AMPはモバイルユーザー向けに、同一コンテンツを高速に表示できる施策です。2018年3月より、Googleは正式にモバイルファースト(モバイルユーザー優先)を公表し、特にスマホユーザー向けのWebサイトを検索上位表示させるよう体制を整えています。

つまり、AMPを実施することは、それだけSEOにも大きな影響を与えるということです。

今回はAMPの具体的な実施方法を紹介してきましたが、どうしても手間がかかってしまいます。一人でサイトを運営している方には大変な作業時間増となるでしょう。

すべてのページにAMPを対応させる必要はないので、コンバージョンページなど必要な部分だけモバイルファーストを実施してみることをおすすめします。

EmmaTools™logo

上位表示に必要な要素が全て揃った
SEOマーケティングツール

Pocket

Tags:
No Comments

Post a Comment