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

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

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

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

そして現在、ついに、2021年3月から全てのWEBサイトがモバイルファーストインデックス(MFI)に完全移行されるため、もはやSEO対策においてモバイルページの最適化は避けて通ることができない重要な対策項目となっています。

そんな中、特に注目を集めているのがAMP(アンプ、Accelerated Mobile Pages)です。AMPはモバイルユーザー向けのページ表示速度を高速化することができるので、SEO対策としても非常に効果的です。今回は、このAMPの仕組みやSEOへの効果から、AMPのメリット・デメリット、さらにAMP対策の具体的な実施方法までお伝えしていきます。

SEOにおいて、今後ますますモバイルユーザーに対する重要性が高まってくるので、ぜひSEO対策の1つの選択肢としてAMP対応を検討してみましょう。

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

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

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

AMPの仕組み

AMP用のページは、通常より高速でページ情報を表示することが可能です。AMP対応ページを表示するときは、GoogleやTwitterなどがあらかじめ取得したコンテンツ情報のキャッシュが使われるので、WEBページを高速で表示することができます。これがAMPの仕組みです。

通常、私たちがGoogleなどの検索エンジンを使ってWEBページを見るとき、私たちがWEBサイトへのリンクをクリックしてから、Googleはそのページに含まれるHTMLや画像、動画データを読み込んでコンテンツを表示しています。そのため、WEBページをクリックしてからコンテンツが表示されるまでには時間がかかるわけです。

ページ内のHTMLが複雑で、画像などが多いコンテンツほど情報の読み込みに多くの時間を要するので、ユーザービリティを阻害してしまうことになります。SEO的にもGoogleからのサイト評価を下げることになるので良くありません。

もしAMP対応をしていれば、WEBページのHTMLなどコンテンツの内容をGoogleやTwitterなどが取得したキャッシュを利用できるので、WEBページの読み込み時間を大幅に削減することができます。要するに、AMP用のページでは、通常のものより高速で表示することが可能ということです。

AMPのSEO効果と検索順位への影響力

前述したように、AMPに対応することでWEBページの高速表示が可能なので、直接的なSEO効果が見込めます。Googleは「ページの読み込み速度をモバイル検索のランキング要素に使用する(2018年1月)」と明言しているので、AMPを導入してページスピードを向上することができれば、その分Googleから高く評価されて検索順位の上昇に繋がります。

逆に、ページを表示する速度が遅いサイトはGoogleから低評価を受けるので、SEOにおいても悪影響を及ぼすことになります。例えばGoogle Chromeのデータによると、モバイルWEBサイトでブラウザのページ読み込み時間が3秒以上になると、53%のユーザーがサイトへの訪問を途中で断念するとのこと。

また、ページの表示速度が1秒でも遅くなると、以下のようなマーケティング面での悪影響が生じると言われています。

  • 直帰率が8.3%悪化する
  • コンバージョン率が3.5%低下する
  • ECサイトのカートに入る金額が2.1%減少する
  • ページビューが9.4%減少する

そのため、もしAMPを実装しないとしても、ページ速度がGoogleのランキング要素となっている以上、読み込み速度の改善はSEOで必須です。AMP以外の方法でも構わないのでページ速度の改善に努めましょう。

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

 
すでにAMP対応・導入済みのWEBサイトの中には、モバイルサイトのページ表示速度改善により、大きな成果を生み出しているところがあります。Googleも成功事例と紹介している2社の実装事例は以下のページをご参考ください。

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

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

AMPを導入したWEBサイトは、Googleからモバイルフレンドリーな内容と評価されるためSEO施策としても有効な対策となります。

しかし、どんなに有効なSEO施策にもメリットがあればデメリットもあるものです。そこで、ここからは、SEOでAMPを実施することによるメリット・デメリットについて解説していきます。

AMP導入のメリット

SEO対策においてAMPを導入するメリットには、主に次の3つがあります。

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

AMP対応のページの最大のメリットは、モバイルからアクセスしたときに一瞬で内容が表示されること。待ち時間はほとんどないのでストレスフリーな快適なブラウジングが可能です。ページ全体が軽くスクロール速度も高くなるため、スマホユーザーにとっての利便性が増し、滞在時間や回遊率の向上に役立ちます。

また、AMPに対応しているページは、検索結果で「雷マーク(⚡)」が表示されるため、ユーザーはそのページがAMP対応ページかどうかを一瞬で判断できます。

AMPのユーザービリティの高さが一般的に認知が高まれば、ユーザーは自然と検索結果の中からAMPページを選ぶことになるでしょう。つまり、AMPに対応するだけで、WEBサイトのクリック率(CTR)や滞在時間、回遊率(エンゲージメント)の向上が期待できるのです。

AMP導入のデメリット

一方、SEO対策において、AMP導入によるデメリットとしては次の2つが考えられます。

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

AMPページはGoogleなどが自動生成してくれるわけではないので、サイト運営者がAMP専用ページを作成する工数が発生します。GoogleはモバイルフレンドリーのWEBサイトを優遇する発表を行っていますが、現状、まだAMPへの対応方法が完璧に整っているわけではありません。

特に、元のページに様々なデザインを加えている場合は、安易にAMP対応すると大きくユーザビリティを損ねてSEOでも悪影響を及ぼす危険があるので注意しましょう。AMPは画像やHTMLデザインなどをできるだけ簡素にして読み込み速度を高めようとするため、サイトの見た目などがガラッと変化する可能性があります。

そのため、AMPページを作成した後は、必ずGoogleサーチコンソール(Search Console)の「AMPテスト」でチェックするようにしてください。作成したAMPページが実際に画面に表示されたときのデザインや見た目を確認することができるので、エラーや崩れがないかチェックしましょう。

SEO対策に効果的な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に必要な記述式だけは最低限覚えておきましょう。詳しくは以下でお伝えしています。

AMP対応に最低限必要な記述
  • HTMLを使ったAMP対応方法
    • AMP HTML宣言
    • meta(メタ)のAMP記述
    • 構造化マークアップ
    • AMP用の定型句(boilerplate)
    • AMP用のJSライブラリ記述
    • AMPのカノニカル(canonical)設定
    • AMPのアノテーション設定

HTMLを使ったAMP対応方法

HTMLを利用してAMP記述式を書いていくには、最低限、以下で紹介するHTML宣言やmeta(メタ)要素などを覚えておいてください。

AMP HTML宣言

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

HTMLの最上部には宣言を記載しますが、そこでAMPに対応する文言も入れておきます。

上記の「amp」という部分は、「⚡」で置き換えても表現可能です。

meta(メタ)要素のAMP記述

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

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

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

構造化マークアップ

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>

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

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

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-boilerplate要素)が必須です。

AMP用のJSライブラリ記述

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

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

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

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

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

AMPページは、元々1つの情報コンテンツをモバイルユーザー向けに高速化した別ページとして複製して作成します。そのため、カノニカル設定がないAMPページは重複コンテンツとしてGoogleからペナルティを受ける危険性があるのです。必ず上記のようなカノニカル設定をHTML内に記述しておきましょう。

AMPのアノテーション設定

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

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

CMSのAMPプラグインやAMP対応テーマを使った対応方法

WEBサイトを作るときに使用するCMS(コンテンツ管理システム、英:Content Management System)でもAMPページを作成することが可能。AMP対応できる有名なCMSには、「WordPress(ワードプレス)」や「はてなブログ」などがあります。

大規模なWEBサイトや動的コンテンツの多いECサイトの場合は、AMP対応のためのシステム開発に一定の期間や費用が必要です。

しかし、WordPressで運用中のブログサイトや静的コンテンツが中心のWEBサイトなら、無料のAMP対応テーマやAMP化プラグインを利用して簡単にAMPページを実装する方法もあります。

AMPに対応したWordPressテーマ(無料・有料)は徐々に増えてきているので、そうしたAMP対応テーマにテンプレートを変更することで簡単にAMP対応ができます。また、無料のWordPressプラグイン「AMP」などを使っても簡単にAMPの実装が可能です。

なお、AMPプラグインでの対応は簡単な一方で、既にインストールしている他のプラグインと競合して不具合を起こしたり、サイトデザインが大きく崩れたりする可能性もあるため、SEO上も基本的には、AMP対応テーマを使用してAMPページを実装することをおすすめします

WordPressサイトのAMP対応 対応しやすさ 考慮すべきリスク
AMP対応テーマ AMP化する前提で作られているため、基本的にはWordPressにコンテンツを追加するだけでAMPを実装可能。WEBサイトを立ち上げたばかりでテーマ変更が可能ならAMP対応テーマへの変更がおすすめ。 大きくカスタマイズしたWordPressサイトでテーマをAMP対応テーマに変更するのはリスクがある。有料テーマが多いので費用がかかる。
AMPプラグイン WordPressサイトなら、どんなテーマを使っていてもプラグイン1つで簡単にAMPを導入することができる。 既にインストールしている他のプラグインと競合して不具合を起こしたり、サイトデザインが大きく崩れたりする可能性がある。

ちなみに、はてなブログは有料プランの「はてなブログPro」に加入しないとAMPの配信設定はできません。

AMP対応後のチェック手順

いずれの実装方法でも、AMP対応する際は記述ルールに沿った正しいAMP HTMLが生成しているかの確認・チェックが必要です。

以下の手順に従って、エラーが発生していないか必ず確認しましょう。

AMP対応後のチェック手順
  1. Google検索でのAMPに関するガイドラインに準拠しているか確認する
  2. Google検索エンジンがAMPバージョンページと非AMPバージョンページを正しく認識できるように<link>でページをリンク(正規化)できているか確認する
  3. AMPページと非AMPページが可能な限り同じユーザー体験(コンテンツや操作)を提供しているか確認する
  4. AMPテストツールで作成したAMPページがGoogle検索の要件を満たしているか確認する
  5. AMPページと非AMPページとで同じ構造化データマークアップをしているか確認する
  6. robots.txtでAMPページをブロックしていないか確認する

まとめ

AMPのSEO効果

AMPに対応するとモバイルユーザー向けに、ページコンテンツを高速表示できるのでSEO効果が見込めます。Googleはページの読み込み速度をランキング要素だと明言しているので、AMPを実施してページスピードを向上させることは、サイトの評価に大きく影響するSEO効果の高い施策だと言えるでしょう。

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

Googleは「AMP対応でなくても、モバイルのページ表示速度が上がれば良い」とも話しているので、まずはAMP以外の方法でもいいので、とにかくページの表示速度を改善することが重要です。余裕ができたタイミングでコンバージョンページなど必要な部分からAMPを導入してモバイルファーストを実施してみてください。

ページスピードの改善方法をはじめとした、SEOに効果的な施策を以下のページでまとめて紹介しているので、サイトのSEO対策にお役立てください。

 
また、当社のSEOノウハウを初心者にもわかりやすくまとめた、SEO初心者向けeBook「SEOスターターガイド」も公開しております。

  • 「オウンドメディアを始めたけど、ノウハウがあまりなくて進め方がわからない」
  • 「これからオウンドメディアを始めるから、SEOの事前に知識が欲しい」

このように考えている方には非常におすすめです。SEOスターターガイドは完全無料なので、ぜひダウンロードしてSEO対策にお役立てください!

SEOスターターガイドのアイキャッチ