SEO 公開日: 2020.02.12 更新日: 2021.08.26

AMPのSEO効果と仕組み、マークアップ方法などをご紹介

WEB制作やWEBマーケティングに関わる方は、AMPという言葉を聞いたことはありませんか？
AMPは簡単にいうとモバイル版のWEBページを高速化させる仕組みです。

今回は企業のWEB担当者向けにAMPとは何か、そしてメリット・デメリットや導入方法、SEO効果などを分かりやすく解説していきます。

この記事の目次

AMPとは？

AMPは、Accelerated Mobile Pagesの略で、WEBページを高速表示させるためにGoogleが中心となって作ったHTMLソースの一種です。
Googleはユーザーファーストを掲げ、モバイル(スマートフォン)ユーザーが快適にWEBコンテンツを閲覧できるようにするため、WEBサイトをAMPで作成することを推奨しております。

2015年に公式にプロジェクトが発表され、現在各WEBサイトで導入が進んでいます。

AMPの仕組み

AMPのルールに準拠したWEBページ（AMP HTMLページ）がインターネット上に公開されると、「クローラー（WEBページをインデックスするプログラム）」がAMP HTMLページをキャッシュ（一時保存）します。キャッシュデータは、「CDN（コンテンツ配信用に最適化されたネットワーク）」サーバーに格納されます。

モバイル端末で検索エンジンに情報を入力すると、それに応じたAMP HTMLページが表示されます。AMP HTMLページリンクをユーザーがクリックすると、AMP HTMLページを公開しているWEBサーバーではなくCDNサーバーがキャッシュをユーザーに渡します。

クローラーについてはこちらの記事で詳しく解説しています。

クローラーを徹底解説！重要なポイントとサイト向上の秘訣とは？

AMPのメリット・デメリット

ここからは、AMPのメリットとデメリットを説明していきます。

AMPのメリット

AMPをWEBサイトに実装すると、次のようなメリットがあります。

・サイト表示スピードの高速化
・モバイル対応していることをユーザーにアピールできる
・新たな検索流入経路が生まれる

サイト表示スピードの高速化

AMP HTMLページは、専用のCDNサーバーからユーザーに配信されます。すでにキャッシュされているので、コンテンツ取得の時間は通常のWEBページより一気に短くなります。

さらにAMP HTMLページ自体も、無駄なコードを読み込まないような構造になっています。

こうしてユーザーは、モバイルでも高速でWEBページを閲覧できます。通常のWEBページ読み込みと比べると、表示スピードにおいてユーザーが感じるストレスを軽減できる効果があります。

ユーザビリティ向上の手段として、AMPはかなり有効ですし、SEOにおいてもページ読み込み速度が早いWEBサイトは評価が上がるアルゴリズムになっているため、流入の側面でも効果的な施策と言えます。
SEOに関しては、詳細を後述いたします。

ユーザビリティとは？向上させるための方法も解説！

モバイル対応していることをユーザーにアピールできる

スマホでAMPページが検索結果に表示されると、AMPページURL隣には「雷」の小さいマークが表示されます。

AMPについて知っている方は、「これはAMPだから高速で表示される」と一目で分かります。

検索結果でモバイル対応していることをアピールしてユーザーを引き込めるのも、AMPのメリットです。

新たな検索流入経路が生まれる

2019年12月、Googleは検索結果の表示方法を変更しました。ニュース関連の検索結果表示において、関連度の高いAMPページはカルーセルで画像つき表示されるようになっています。

このように、WEBサイトをAMP対応にすると、検索流入経路も増え、また画像つきのほうが目立ちやすく、ユーザーにとっても視覚的に内容のイメージが伝わりやすくなります。

他にもリッチスニペット（通常の検索結果に追加で情報を表示する）として、レビュー評価やメニューなどさまざまな情報を表示可能になることで視認性が向上し、流入数の向上に繋がります。

リッチスニペット・リッチリザルトとは？設定方法を理解してSEOに活かそう！

AMPのデメリット

AMPには、次のようなデメリットもあります。

・制約が多く、知見のある人でないと実装が難しい
・既存サイトのデザインや機能を変える必要がある場合も

制約が多く、知見のある人でないと実装が難しい

AMPは、その効果を最大化するためにも、厳格な制約が存在します。

・オリジナルのJava Scriptなどは使えない
・専用のマークアップ構造を利用する必要がある
・ボイラープレートコードを必ず挿入する

とルールは多岐にわたり、AMPについて熟知しておかないと実装自体が難しいです。AMPを導入する場合、AMPについてある程度知識のある人の工数をきちんと確保する必要があります。

ちなみに「WordPress」でWEBサイトを公開している場合は、プラグインを利用すると一から実装するより簡単にWEBページをAMP化できます。ただしあくまで機械によるAMP化であり、エラーが発生する可能性が高かったり、表示したいコンテンツや機能が表示されなかったりします。

「WordPressで手早くAMP対応を行いたい」という場合でも、実装には十分注意しましょう。

WordPressのSEOを徹底解説！おすすめSEOプラグインもご紹介！

コンテンツのデザインや機能を変える必要がある場合も

AMPは制約が多いので、WEBページの全デザインや機能を実現できるわけではありません。

たとえば

・大量にJQueryなどで動きをつけているWEBサイト
・複雑なプログラム機能が実装されたWEBサイト

などは、AMP対応するのは難しいでしょう。

最近はAMPも進化し、導入当初対応していなかったECサイトなどさまざまなジャンルのサイトに対応するようになっています。ただし書き方に制約があるのは変わらず、どうしても実現できるデザインや機能は限られてきます。

AMP実装の際は、自社WEBサイトがAMPと相性がよいかどうかを見極める必要があります。

AMPの導入方法

ここからは、実際にAMPを導入する方法を解説していきます。

AMPページを作成

AMPページは、通常のWEBページとは構造が違います。ですから通常のWEBサイトの他に、AMP用のWEBページを制作してWEBサーバーにアップロードする必要があります。

まずはAMP用のページを制作し、保存しましょう。ページの拡張子は「.html」と、通常のhtmlページと同じで構いません。

AMP HTMLの宣言をする

次にAMPページ内で、AMP HTMLの宣言を行います。

というように設定を行います（htmlのlang属性はなくても構いません）。

通常のHTMLと宣言部分で違うところは、htmlタグ内にamp表記があるかないかくらいです。

ちなみにamp表記は、雷のマークに変更も可能です。ただし「文字化けが起こらないか心配」などと思う方は、ampと書いておきましょう。

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

宣言が終わったら、次はAMP専用の構造化マークアップを行っていきます。

・<head>タグ最初に<meta charset="utf-8">を記述する
・<script async src="https://cdn.ampproject.org/v0.js"></script>を<head>タグに記述する
・<link rel="canonical" href="URL">をAMPページと元ページ両方に入れる
・<style amp-boilerplate>で始まるボイラープレートコードを挿入する
・<script type="application/ld+json">でページの構造を伝える

必要な記述が多いので、注意しながらマークアップを行っていきます。

先ほども説明しましたが、WordPressだとプラグインで簡単にページをAMP化できます。最近はWordPressでサイトを作成している企業も多いので、プラグインを活用してみるのも良いでしょう。

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

AMPページは、少しでもエラーがあるとクローラーに正確に読み込まれず検索結果にうまく表示されません。AMPページを制作した後は、必ず構造にエラーがないかチェックを行いましょう。

AMP構造チェックに便利なのは、Googleが公式公開している「AMPテスト」です。

AMPページのURLを貼りつけて「URLをテスト」ボタンを押すだけで、AMPページが有効かどうか結果が表示されます。「有効なAMPページではありません」と表示されたときはAMP HTMLタグの打ち方が間違っているなどの原因があるので、表示された原因をもとに対策を行いましょう。

AMPがもたらすSEOにおける効果

AMPは、SEOに大きな効果をもたらします。

ページスピード高速化によりユーザビリティが向上するだけでなく、SEOにおいても良い影響を及ぼします。

GoogleではSEOの評価基準として、「WEBページ読み込み速度がどれくらいか」を重視していると公表しています。つまりWEBページ読み込みが速ければ、遅いWEBサイトよりもGoogleから高い評価を受けられます。

もちろん一番重要なのはコンテンツの中身ですが、読み込みが遅いとユーザーの離脱につながり、見てくれるユーザーが少なくなってしまいます。AMPを実装すればモバイルでのWEBページの読み込みが劇的に高速化するので、ユーザビリティ的にもSEO的にも効果的です。

「ページの読み込み速度に課題を感じる」という場合は、ぜひAMP対応も視野に入れてみてください。

表示速度はSEOにとって重要！計測方法＆改善方法の事例をご紹介

正しいマークアップで、AMPの恩恵を受けよう

今回はAMPとは何か、そしてメリット・デメリットやSEOにもたらす効果などを解説してきました。

AMPを導入すれば、モバイルでのWEBページ読み込みが高速化します。そうすればユーザーのWEB体験の向上だけでなく、SEO的にもよい効果を見込めます。

ただし実装にはAMPに関する知識を身につけて、正しいマークアップを行う必要があります。実装を行う場合はAMPテストツールなども活用して、焦らず確実にAMP化を成功させましょう。

モバイルに関するSEO記事はこちら！

今すぐホームページをスマホ対応に！スマホ対応させる具体的な4つの方法！

サイトのスマホ対応の重要性・SEOのためにやるべき施策とは？

スマホ向けLPOとは？PCとは異なるLPOのポイントを解説

モバイルフレンドリーとは？Googleの考えと対応方法を知り、SEOに活かそう！

執筆者：山口ひかる

株式会社ヒトノテのディレクションを担当。自社オウンドメディア運営ノウハウを活用し、クライアントメディア向けのWEBコンテンツ制作や、WEBマーケティング全般の支援を行っています。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。