WEBマーケティングをもっと身近に。
SEO対策 2023/06/20

AMPとは?仕組みとSEO効果・優遇期間終了による廃止について

AMPとは?仕組みとSEO効果・優遇期間終了による廃止についてのサムネイル画像です

今回は、AMP(Accelerated Mobile Pages)について解説します。「AMPとはどのような手法なのか」「設定するとどのくらい高速化されるのか」「SEO的にAMPを設定する必要はあるのか」など気になっている方も多いのではないでしょうか?本記事では、AMPの概要から仕組み、SEO効果などについて解説します。

1

AMP(Accelerated Mobile Pages)とは?

AMPとは、WEBサイトの表示速度を高速化するための技術で、2015年にGoogleやTwitterなどのIT企業が共同で立ち上げたプロジェクト(Accelerated Mobile Pages Project)によって開発されたHTMLのフレームワークです。

Accelerated Mobile Pagesを略してAMPと呼ばれています。

【参考ページ】
Accelerated Mobile Pages Project – AMP


AMPはスマートフォンの普及によりモバイルデバイスからの閲覧が増えたため、モバイルユーザーの検索体験を向上させることを目的に開発されました。

AMP HTMLやAMPタグを使うことで、モバイル端末からページを読み込む際の速度を向上させることができます。

具体的には通常のモバイルページをAMP化することで、表示速度が約2倍~4倍程度早くなり、利用するデータ量も5分の1~10分の1程度に抑えることが可能になります。

2

AMPの仕組み

AMPは、読み込み速度が早い「Google AMP Cache」からデータを読み込み、記事の内容をブラウザに表示するまでの時間を短縮する仕組みです。

AMPを導入していないページの場合は、ユーザーがページのURLをクリックした瞬間にCSSや画像・動画ファイルのURL、広告のタグなどが記述されたHTMLファイルを読み込み、ブラウザページの内容を表示する仕組みです。

すべてのデータの読み込みが完了した後にページの内容が表示されるため、読み込みに時間がかかる画像・動画ファイルや広告、JavaScriptが多いと、レンダリングに時間がかかります。

それに比べ、AMPを導入しているページの場合は、通常のHTMLではなくシンプルで読み込み速度が速いAMP専用のソースコードで記述されたAMP HTMLを読み込む仕組みです。また、「Google AMP Cache」を利用してページを表示するため、データを読み込む時間が短縮されます。

3

AMP優遇措置の終了について

2021年6月以降はAMP実装していたページの特徴である、

  • 雷マークの廃止
  • トップニュースカルーセルでの優遇の廃止

がGoogleから発表されました。

詳しく解説します。

3-1

AMP対応マークの非表示

AMPに対応したページの場合は、Google検索結果に表示された際に、URLの横や画像、カルーセル(上記画像参照)に雷マーク(AMP対応マーク)が表示されていました。

URLの横 AMP対応マーク


画像に表示 AMP対応マーク


ただし、2021年6月の優遇措置終了とともに、検索結果やGoogleトップニュース枠に表示されていたAMP対応マークは表示されなくなっています。

AMPの優遇措置及び終了による影響については後述します。

3-2

トップニュースカルーセルの優遇廃止

2021年6月まではAMP設定していることが「トップニュース」枠に表示される条件でしたが、2021年6月にAMPの優遇措置が終了し、検索結果の上部に表示される「トップニュース」枠に優先的に表示されていたAMPページは、非AMPページと同様に表示されます。

また、検索結果にはAMP対応マークが表示されないように仕様が変更されました。

Google 検索のトップニュース カルーセル機能は、Google ニュースのポリシーを遵守している限り、すべてのニュース コンテンツを含むように更新されます。つまり、AMP 形式を使用する必要がなくなり、ウェブに関する主な指標のスコアやページ エクスペリエンスのステータスに関係なく、どのページもトップニュース カルーセルの表示対象となります。

また、Google ニュース アプリにも同様の更新を行っています。Google ニュース アプリは、世界中のユーザーが、その日の重要なニュースを包括的に把握できる重要な場所です。ページ エクスペリエンスの更新の一環として、news.google.com と Google ニュース アプリの中核となるエクスペリエンスを強化するため、非 AMP コンテンツの使用を拡大しています。

また、AMP コンテンツを示す AMP バッジアイコンは表示されなくなります。6 月中旬にページ エクスペリエンスの更新が開始されるため、この変更が Google のサービスに反映されることが期待されます。優れたページ エクスペリエンスを備えたコンテンツの特定に役立つ他の方法を引き続きテストし、最新情報を随時お知らせいたします。

ページ エクスペリエンスの更新に対応するための期間、ツール、詳細情報 Google検索セントラル

このように以前と比べるとAMPを実装するメリットが少くなくなっています。
この点を踏まえて、SEOの効果や実装するメリットをご確認ください。

4

AMPのSEO効果について

AMPにはSEO効果があるのでしょうか?

Googleは、「ページがAMPに対応しているかどうかは検索順位に直接影響しない」と明言しています。

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

顧客のサイトを AMP 化するための 8 つのヒント Google検索セントラル


一方、ページの読み込み速度は検索順位に影響すると述べています。

検索ユーザーはできるだけ早く質問に対する答えを見つけたいと考えています。研究によると、ユーザーはページの読み込み速度を非常に気にかけています。読み込み速度これまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。

ページの読み込み速度をモバイル検索のランキング要素に使用します Google検索セントラル

AMP であるかどうかが直接 Google 検索のランキングに影響することはありませんが、スピードはランキングに影響します。

AMP が検索結果にどのように作用するかを理解する Google検索セントラル

つまり、AMP導入自体は検索順位に影響しないものの、AMPを導入することでページの表示速度を向上させることはモバイルフレンドリー・ユーザーエクスペリエンス向上につながるため、検索順位へ影響するということです。

AMPを導入したことで検索順位が上がるというより、結果として表示速度が向上すればプラスの要素として働くと考えるべきでしょう。

ただし現在は読み込み速度やユーザビリティに関する改善をおこなう場合は、Googleの新しい指標であるサーチコンソールの「ページエクスペリエンス」を確認して実行するようにしましょう。

4-1

AMPとモバイルフレンドリーアップデートとの違い

AMPと混同されやすいものに、「モバイルフレンドリーアップデート」があります。
AMPとモバイルフレンドリーアップデートの違いは、開発・導入した目的です。

Googleなどの企業がAMPを開発した目的は、WEBサイトの運営者や利用者、広告主を支援することであり、サイトの運営者はユーザーの利便性を高めるために導入しています。

一方、モバイルフレンドリーアップデートの目的は、モバイル端末で閲覧しやすいサイトの評価を高め、検索順位を引き上げることです。

つまり、AMPは表示速度に関する技術で、モバイルフレンドリーアップデートはモバイル端末の利便性を評価に組み込むGoogleのアップデートとなります。

▼ モバイルフレンドリーについて別記事で詳しく解説しているので、興味がある方は以下ページをご確認ください。

5

AMPを導入するメリット・デメリット

AMPの導入には以下のようなメリットとデメリットがあります。

メリット・表示速度があがりユーザビリティの向上に繋がる
デメリット・AMPページには広告制限がある
・デザインが崩れる可能性がある
・管理ページが増え運用に手間がかかる
5-1

AMPを導入するメリット

表示速度があがりユーザビリティの向上に繋がる

表示速度を高めることで、直帰率の改善や滞在時間・回遊性・コンバージョン向上といったSEO効果も期待できます。

Googleモバイル部門のDaniel Anの分析によると、モバイルページの読み込みにかかる平均時間は22秒で、3秒以上経過すると53%のユーザーが離脱しているそうです。

モバイルページの表示速度が数秒、あるいはそれ以上遅れてしまえば、ユーザーにマイナスの印象を与えてしまい、ページからすぐに離脱されるかもしれません。

最近、私たちは直帰率とコンバージョン データを大量に使って、ある深層ニューラル ネットワーク(人間の脳や神経システムをモデルにしたコンピュータ システム)のトレーニングを行いました。このニューラル ネットの予測精度は 90% に達していて、このシステムの予測では、ページの読み込み時間が 1 秒から 7 秒に増えると、モバイルサイト訪問者の直帰率が 113% 増加するという結果が出ています。同様に、ページの要素(テキスト、タイトル、イメージ)の数が 400 から 6,000 に増えると、コンバージョン率が 95% 低下することも明らかになっています。

モバイルページのスピードに関する新たな業界指標
5-2

AMPを導入するデメリット

AMPページには広告制限がある

AMP HTMLではCSSやJavaScriptの使用を制限するため、AMPに対応していない広告を設置していると、表示されない場合があります。

デザインが崩れる可能性がある

AMP HTMLでは、CSSは50KBまで・JavaScriptを使用できないという制限があるため、レイアウトが崩れたり、コンテンツの配置がずれたりするかもしれません。

管理ページが増え運用に手間がかかる

AMPに対応するためには、従来のページとは別のAMP専用のページを作成する必要があります。元ページに変更があれば、AMPページも変更しなければいけません。

実際に、PR TIMESやAmebaなどの企業では、AMP対応を終了し、ページを削除しています。

PR TIMESにおけるAMPの削除を行いました
【お知らせ】AMPの対応終了について


▼ Google検索結果からAMPページを削除する手順は、下記ページで紹介されています。

【参考記事】
Google 検索から AMP ページを削除する Google検索セントラル

6

AMPの導入に向いているサイト・向いていないサイト

向いている・モバイル向けのWEBサイト
・動画コンテンツではないWEBサイト
・読み込み速度の遅いWEBサイト
向いてない・PC向けのWEBサイト
・表示速度が十分に早いWEBサイト
・AMPに対応していない広告を設置しているWEBサイト
6-1

AMPの導入に向いているサイト

モバイル向けのWEBサイト

AMPは、モバイル端末でページを表示する速度を向上させるためのものなので、PCよりモバイル端末からの閲覧数が多いサイト・ページの方がより効果的です。

読み込み速度の遅いWEBサイト

AMPは、モバイル端末でページを表示する速度を向上させるためのものなので、読み込み速度が遅いWEBサイトの方がより効果的です。ただし、PCから閲覧した場合のページの読み込み速度には影響しません。

6-2

AMPの導入に向いていないサイト

PC向けのWEBサイト

AMPは、モバイル端末でページを表示する速度を向上させるためのものなので、モバイル端末よりPCからの閲覧数が多いサイト・ページの場合、AMPの恩恵を受ける機会が少ないです。

表示速度が十分に早いWEBサイト

AMPはモバイル端末でページを表示する速度を向上させるためのものなので、表示速度が十分に早いWEBサイトではAMPの効果がそれほど期待できないかもしれません。

AMPに対応していない広告を設置しているWEBサイト

AMPページにAMP非対応の広告を設置していると、広告が表示されない場合があります。アドセンス広告を設置しているブログやアフィリエイトサイトでは、広告収入が減少するかもしれません。

7

AMPの対応方法

AMP HTMLページを作成する手順は以下の通りです。

  1. AMP HTMLの文言宣言で開始する
  2. headタグを指定する
  3. bodyタグを指定する
  4. meta要素を指定する
  5. 構造化マークアップをする
  6. AMPのJSライブラリを読み込む
  7. canonicalタグを指定する
  8. amp-boilerplate要素を指定する
7-1

AMPページの基本のテンプレート

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">
<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-anima
tion:none;animation:none}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>

AMP HTML ページの作成
7-2

AMP HTMLの文言宣言で開始する

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


lang属性でAMP HTMLの言語を指定します。
日本語のページの場合は、〇〇の部分に「ja」と記述します。

7-3

headタグを指定する

<head>
</head>


meta情報を記述するためにheadタグを記述します。

7-4

bodyタグを指定する

<body>
</body>


ブラウザに表示するテキストを指定するためにbodyタグを記述します。

7-5

meta要素を指定する

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


meta要素を指定することで、文字エンコーディングをUTF-8で指定してAMPページの文字を認識できるようにします。

viewportはHTML ページの <head> タグに含まれる共通のタグで、widthの値に「device-width」、minimum-scaleの値に「1」と定義する必要があります。

7-6

構造化マークアップをする

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


構造化マークアップをするコードです。

7-7

AMPのJSライブラリを読み込む

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


AMPのJSライブラリを読み込むコードを記述します。

7-8

canonicalタグを指定する

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


AMP HTMLでは、canonicalタグを指定する必要があります。
また、非AMPページにも同様に<link rel="canonical" を記述しておきましょう。

7-9

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-boilerplate要素を指定するコードです。

8

WordPressのAMP対応方法

WordPressで作成されたWEBサイトであれば、プラグイン「AMP」を導入するだけで、上記のような手間をかけず簡単にAMPを設定できます。

【プラグイン「AMP」をインストールする手順】

  1. WordPressの管理画面にログイン
  2. 画面左にあるメニュー「プラグイン」をクリック
  3. 「新規追加」をクリック
  4. 画面右にある検索窓に「AMP」を入力
  5. 「今すぐインストール」をクリック
  6. インストール完了後、「有効化」をクリック

以上でAMPの設定は完了です。

9

AMPが実装されたか確認する方法

ページがAMPに対応しているかを確認する方法は以下の3つです。

  • AMPテスト
  • デベロッパーツール
  • AMP Validator
9-1

AMPテスト

Googleが提供している「AMPテスト」ページにURLもしくはソースコードを入力することで、正しく設定がおこなわれているか、APMページとして有効なのかを確認できます。

AMP HTLMが正しく記述されていれば、「有効なAMPページです」と表示されます。
AMPを設定していないページの場合には、「AMPページではありません」と表示されます。

AMP HTLMの記述に間違いがある場合は、「有効なAMPページではありません」と表示され、問題のある箇所が指摘されます。

また、AMP設定後にGoogleのクローラーがページをインデックスしていない場合、検索結果にAMPは適用されません。

9-2

デベロッパーツール

【GoogleChromeブラウザのデベロッパーツールで確認する手順】

  1. GoogleChromeブラウザでページを表示する
  2. 画面右上の設定ボタンをクリック
  3. 「その他ツール」の「デベロッパーツール」をクリック
  4. 「Console」をクリック

「デベロッパーツール」は下記ショートカットキーでも起動できます。

WINDOWSCtrl+Shift+I
MACCommand+Opt+I


AMP正しく設定されている場合は「AMP validation successful.」と表示され、設定が間違っている場合は、赤字でエラーが表示されます。

9-3

AMP Validator

AMPプロジェクトが提供している「AMP Validator」には、WEB版とGoogleChrome拡張機能の2種類があります。

WEB版では画面上部にURLを入力することで利用できます。

WEB版:https://validator.ampproject.org/


【GoogleChrome拡張機能「AMP Validator」でAMPを確認する手順】

  1. 「AMP Validator」をChromeへインストール
  2. 確認するページをChromeで開く
  3. ステータスを確認

灰色:AMPを設定していない
青色:AMPが正しく設定されている
赤色:AMPの設定に間違いがある

Chromeウェブストア:AMP Validator

10

AMPまとめ

今回は、AMPの仕組みや対応方法について解説しました。

モバイル端末からのユーザー増加にともない、表示速度向上を目的としてAMPが開発され、さまざまな企業で導入されています。

一方、Googleの優遇措置が終了したことや管理面の問題からAMPを削除し、Googleが推奨しているページエクスペリエンスの対策へシフトするサイトも増加しています。

すべてのサイトでAMPが効果的というわけではないので、導入するメリットがあるのかを検討してみましょう。

ホワイトリンク 記事内用バナー


この記事を書いたライター

SEO施策部

SEMを軸にSEOの施策を行うオルグロー内の一部署。 サイト構築段階からのSEO要件のチェックやコンテンツ作成やサイト設計までを一貫して行う。社内でもひときわ豊富な知見を有する。またSEO歴15年超のノウハウをSEOサービスに反映し、3,000社を超える個人事業主から中堅企業までの幅広い顧客層に向けてビジネス規模にあった施策を提供し続けている。

RECOMMENDED ARTICLES

ぜひ、読んで欲しい記事

  • 内部リンクとは?のサムネイル画像です
    SEO対策
    2024/10/28
    内部リンクとは?貼り方とSEO効果について解説

    2024/10/28

  • 更新頻度とSEOの関係のサムネイル画像です
    SEO対策
    2024/10/28
    更新頻度とSEOの関係は?最適なコンテンツの管理方法を解説

    2024/10/28

  • ブラックハットSEOとは?のサムネイル画像です
    SEO対策
    2024/10/17
    ブラックハットSEOとは?ホワイトハットSEOとの違いと手法一覧

    2024/10/17

  • ペンギンアップデートとは?のサムネイル画像です
    SEO対策
    2024/10/10
    ペンギンアップデートとは│基本と対応方法・由来を徹底解説

    2024/10/10

  • HTTPステータスコード一覧のサムネイル画像です
    SEO対策
    2024/10/08
    HTTPステータスコード一覧│意味を完全解説

    2024/10/08

  • 検索エンジンとは?のサムネイル画像です
    SEO対策
    2024/10/08
    検索エンジン一覧│世界と日本国内のシェア率ランキングTOP10

    2024/10/08

backtotop