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

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程度に抑えることが可能になります。

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

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

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

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

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

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

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

詳しく解説します。

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

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

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

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の効果や実装するメリットをご確認ください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【参考記事】

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

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

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

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

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

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

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検索セントラル

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

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

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

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

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

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

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

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 ページの作成

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

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

<head>
</head>

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

<body>
</body>

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

<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」と定義する必要があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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