“AMP”がSEO対策で重要視される理由とは？導入メリットや方法を解説！
SEOで記事を上位表示させるにあたって、「AMP」に対応しているかどうかが重要視されるようになってきました。
しかし、「そもそもAMPって？」「なんで重要？」「どうやって実装するの？」など疑問をお持ちの方も多いかと思います。
そこで本記事では、AMOの仕組みやメリットデメリット、実際に導入する手順を紹介していきます。
AMPに対応しているサイトは評価されやすい傾向にありますので、検索上位を狙っている人は参考にしていただけたらと思います。
※2023年7月にサポート終了！GoogleAnalytics（UA）からGoogleAnalytics4への移行が終了していない方はこちらをご参照下さい。※
目次
AMPとは？
まず、AMPとはそもそもどういったものかを紹介していきます。
AMPとは「Accelerated Mobile Page」の略で、高速にモバイルページを表示させる方法のことを指します。
ユーザーが検索するデバイスはスマートフォン7割、パソコン3割と言われており、どちらにも対応できるレスポンシブデザインのサイトが増えてきました。
しかし、レスポンシブデザインはユーザーにとって読みやすいデザインではありますが、表示速度が遅くなってしまうというデメリットがあります。
そのため、ユーザーにとって読みやすく、なおかつ表示速度も速いレスポンシブ×AMPの対応が急がれているということです。
AMPに対応しているサイトは、実際の検索結果に「カミナリマーク」が表示されています。
上位サイトがすべてAMP対応のサイトというケースも増えてきているので、これからも対応への流れは加速していくはずです。
仕組み
続いて、AMPが高速表示できる仕組みについて見ていきましょう。
AMPは、以下3つの要素を使って構成されています。
- AMP HTML
- AMP JS
- Google AMP Cache
AMP HTMLは、通常のサイトのHTMLにはない制限を設けて、読むこむデータ量自体を少なくしています。AMP JSは、AMP HTMLのレンダリングを高速化せる仕組みです。
レンダリングとは、webサイトの閲覧をサーバー側にリクエストして、実際にユーザー閲覧するページを表示させるまでの、一連の流れを指します。
つまり、AMP HTMLで読み込むデータ量自体を抑え、サーバーからの返答を高速にしているのがAMPの仕組みです。
最後に、AMP対応しているページをGoogleやTwitter側でキャッシュしているのが、Google AMP Cacheという仕組みになります。
Google AMP CacheにはAMP専用のネットワークが用意されているため、検索結果やSNS側でシェアされる際に、AMP専用のキャッシュにアクセスできます。
通常のキャッシュのように直接webサイトにアクセスする必要がないため、コンテンツを高速で表示できる仕組みです。
AMPメリット
AMPには以下3つのメリットがあります。
- ページの表示速度が速くなること
- モバイル対応していることをユーザーにアピールできること
- 新たな検索流入が生まれること
それぞれ順番に見ていきましょう。
ページの表示速度が速くなる
まず、最大のメリットとして挙げられるのがページの表示速度です。
AMP対応していないサイトよりも「4倍ほど速くなる」という統計があるため、ユーザーの離脱率を下げることができ、快適な閲覧を実現できます。
ページの表示速度改善はSEO内部対策においても非常に重要なポイントになるので、AMP対応は非常に効果的なSEO対策だといえます。
関連記事
モバイル対応していることをユーザーにアピールできる
AMP対応に伴って、検索結果にカミナリマークが表示されるため、ユーザーが「このサイトはAMP対応しているから見やすいサイトだ！」と認識される可能性があるため、記事のクリック率が高まります。
記事のタイトルにもよりますが、AMP対応していないSEO1位の記事よりも、AMP対応されているSEO2位の記事の方が、クリック率が高まる可能性があるということです。
新たな検索流入が生まれること
AMP対応されたニュースサイトは、検索結果のカルーセル画面に表示される確率が高くなります。
サイトへの流入経路が1つ増える形になるので、サイトのPV数アップや、結果的な売り上げアップにつながりやすいです。
AMPデメリット
メリットがたくさんあるAMPですが、一方で、実装する際にもデメリットもあります。
- 実装の難易度が高いこと
- 動的サイトはデザインが崩れてしまう可能性があること
それぞれ順番に解説していきます。
実装の難易度が高いこと
まず、AMPを実装する際には、HTMLのコードを修正する必要があります。
エンジニアなど、自分でコードを触れる人以外が触ってしまうと、サイト内でバグが起きて動かなくなってしまったり、AMP関連のトラブルが起きたときに対応できないでしょう。
実装する際は、入念に調べた上で行うか、エンジニアなど詳しい人に対応依頼をするのが良いでしょう。
弊社でもAMP対応を始めとしたSEO対策全般をサポートしておりますので、お気軽にご相談ください。
動的サイトはデザインが崩れてしまう可能性があること
アクセスに応じてサイトの内容が変わる動的ページでは、現状でのAMP対応は非常に難しいです。
理由としては、動的ページを作る際に使うJava Scriptを、AMPページでは利用できないからです。
他にも、AMPページに関して使えるタグにかなりの制限があるため、動的ページを作ったとしても、最悪は不正タグの使用でペナルティの対象になります。
AMPには高速化できる大きなメリットがあるのは事実ですが、大きなデメリットもあることを認識した上で、実装することをおすすめします。
SEOでAMPが重要視される理由
ここからは、SEOでAMPが重要視される理由を解説していきます。
Googleには「ユーザーファースト」と「モバイルファースト」という2つの評価基準が設けられており、これらを満たすのに効果的なのがAMP対応だからです。
それぞれを順番に解説していきます。
「ユーザーファースト」
Googleが掲げるユーザーファーストは、webサイトの運営者が、ユーザーにとって有益な検索結果を提供することを表しています。
Googleが掲げる10の事実の3番目で、「遅いより速い方が良い。」に書かれている通り、ページの表示速度は非常に重要です。
コンテンツの内容を精査することはもちろんですが、ページの表示速度がSEOの上位表示に密接に関わっていることは、過去のGoogleアップデートを見ても明らかです。
Googleが掲げるユーザーファーストには、AMPによる表示速度最適化がぴったり当てはまっていると言えるでしょう。
「モバイルファースト」
モバイルファーストとは、スマートフォン向けサイトを優先的に設計するときに使われる言葉です。
先ほども少し触れましたが、スマートフォンでも読みやすくするレスポンシブデザインは、表示速度が遅くなるデメリットがあります。
表示速度が遅いと離脱率が高まりますし、Googleの掲げるユーザーファーストにも最適化されていないことになります。
そこで、モバイルユーザー向けにAMPで高速表示をさせることができれば、Googleにもユーザーにも最適化されたサイトが完成するということです。
SEOに効果のあるAMPの導入方法
続いて、AMPの導入方法を2つ紹介していきます。
1つはWordPressのプラグインを使った方法で、もう1つは実際にHTMLを触る方法になります。
どちらも詳しく解説していきますので、実装しやすい方法を試してみてください。
WordPressを使用した導入
webサイトをWordPressで運営している場合は、プラグインを使えば簡単にAMPが実装できます。
「AMP for WordPress」をインストール有効化
まずは、AMP for WordPressのページから、プラグインをインストールしましょう。
AMP for WordPressは無料で使えるプラグインで、更新頻度も高いため、脆弱性が高いなどの心配もありません。
プラグインをインストールしたら、そのまま有効化まで進めます。
ページURLの末尾に「amp/」を追加する
AMP for WordPressをインストールして有効化した後は、ページURLの末尾に「amp/」を追加できるようになります。
インストール前のURL：「ドメイン/カテゴリー/ページURL/」
インストール語のURL：「ドメイン/カテゴリー/ページURL/amp/」
という形で変更することができます。
プラグインを有効化して、適切にURLを設定できていれば、この時点からAMP対応ページとして表示されることになります。
HTMLを使った導入方法
続いて、HTMLを使った導入方法を紹介します。
方法はいくつかありますので、やりやすい形で実装してみてください。
AMP HTML宣言
まず、サイトが通常のHTMLではなく、AMP対応のHTMLで作られていることを伝える必要があります。
<!doctype html>
<html カミナリマーク lang=”ja”>
カミナリマークマークは「amp」に変更しても、AMP対応のHTMLだと認められます。
meta（メタ）のAMP記述
続いて、記事のmeta要素をAMP対応にて記述する必要があります。
<meta charset=”utf-8″>
<meta name=”viewport”content=”width=device-width,minimum-scale=1,initial-scale=1″>
meta charsetは「UTF-8」のみの対応となっています。
meta（メタ）の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>
上記の記述を、meta要素の次に追記してください。
AMP用の定型句
続いて、AMPを高速化させるためのコードを記述する必要があります。
<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用のライブラリ記述
続いて、タグの最後に、AMPを表示させるためのコードを記述していきます。
<scriptasyncsrc=”https://cdn.ampproject.org/v0.js”></script>
記述する場所を間違えてしまうとエラーが起きるため、必ずタグの最後に記述しましょう。
AMPのカノニカル（canonical）設定
（canonical）設定とは、複数のページが存在するときに、クローリングするロボットに対して、別々のページを用意していることを伝える設定のことです。
この場合ですと、AMP対応ページと、非対応ページの両方を伝える必要があります。
まずは、下記のコードを記述しましょう。
<link rel=”canonical” href=”【オリジナルページのURL】”>
リンク部分に、httpsから始まるURLを記載します。
AMPのアノテーション設定
次に「アノテーション」の設定です。
<link rel=”amphtml” href=”【対象のAMPページURL】”>
上記の記述をすることで、AMP対応ページと、非対応ページの2つがあることをクローラーに伝えることができます。
逆に、これらのコードを実装しないと、クローラーに「AMPページが存在すること」を伝えられないため、検索結果にAMP対応のページが表示されることはありません。
AMPの有効性を確認する方法
最後に、プラグインを使った場合、HTMLを記述した場合のどちらでも、実際にAMP対応しているかを確認する必要があります。
確認には「AMPテスト」という無料のツールが便利です。
アクセスをすると検索窓が出てきますので、確認したいURLを「amp/付き」で入力をしましょう。
問題がない場合は有効化と表示されますが、問題がある場合は「構造化を確認してください」などのフィードバックが出てきます。
該当箇所を修正し、問題点がなくなるまで確認を繰り返しましょう。
まとめ
AMPとSEOの関係性や、実際の実装方法について解説していきました。
- AMPはモバイルページを高速表示させる施策のこと
- 高速表示できるメリットがあるが、実装が難しいデメリットがある
- 静的ページには実装できるが、動的ページは難しい
- プラグインで実装する方法と、HTMLで実装する2つの方法がある
AMPに対応したサイト作りは大変ではありますが、実装できれば高速化を実現させることができ、更なるアクセスアップが期待できます。
弊社では、今回のAMP対応を始めとしたSEO対策全般をサポートさせて頂いております。何かお困りごとやご不明点等ございましたらお気軽にご連絡ください。
デジタルトレンズへお気軽にご相談下さい。
