SEO
「よく耳にするAMPについて、分かりやすく知りたい」
「運営しているWebサイトをスマホで見てみたら、びっくりするほど遅かった……」
WebページをAMP化することで、モバイル端末での表示を高速化できます。
この記事では、AMPの概要と仕組み、そしてメリット・デメリットを解説。さらにAMP化に適したWebサイト・ページの説明も行っています。専門知識のない人にも分かりやすいよう、専門用語はできるだけ使用せずに解説しています。
AMPについて知りたい人や、導入を考えている人は、是非参考にしてみてください
| 読み | |
| AMP | アンプ |
| Accelerated Mobile Pages | アクセラレイテッド・モバイル・ページ |
大学卒業後システム開発に関わり、銀行システムの開発やアンドロイド開発などを経験。ライター歴は3年ほど
AMPとは？
端的に表すと、AMPとは「モバイル端末でのWebページの表示を高速化する」技術です。オープンソースのフレームワークであり、WordPressなどの管理ソフトが対応しているため、個人・団体問わずに導入が進められています。
このセクションではAMPの概要・仕組みを分かりやすく説明していきます。
AMPの概要
AMPとはAccelerated Mobile
Pagesの略で、名前の通りモバイルページの表示を高速化する技術のことです。
AMPを導入することで、スマートフォン・タブレット端末における閲覧の利便性が向上します。AMPを導入したページ(AMPページ)では、ユーザーの快適性(ユーザービリティ)の向上が見込めるため、間接的なSEO対策にも繋がっています。
もともとGoogleがモバイルユーザーのユーザービリティ向上のために、Twitterと共同で開発した技術であり、Googleによって導入が推奨されている技術でもあります。
AMPページを作成する際は、AMPのルールに則った独自のHTMLファイルを作る必要があります。しかし既存のファイルに対して大きな変更を加える必要はないため、導入に大きなコストがかからないのもAMPの特徴です。
AMPの仕組み
普通のWebページにアクセスした場合、ユーザーの操作に伴ってサーバーにリクエストが送信されます。そしてリクエストに応じた情報がサーバーから返信され、Webページの画面が生成されます。
サーバーからページの情報が届いた後、1から画面の生成プロセスが始まるイメージです。
一方でAMPページでは、Webページの情報を前もってキャッシュとして保存しておくことが可能です。またAMPのルールによって、読み込みの負荷を軽減するソースコードが使用されるため、ページの読み込み時間の短縮に繋がります。 AMPは以下4つの要素で構成されています。
- AMP HTML
- AMP JS
- AMP Cache
- Custom Styling
Custom Styling(CSS)は通常のWebページと変わりませんが、AMP HTMLとAMP
JSは読み込みの負荷を軽減。そしてAMP
CacheがWebページの情報を前もって保存しておく技術です。
AMPのメリット
このセクションではAMPを導入するメリットを解説します。大きく以下の3点にまとめました。
| メリット |
| ページの表示速度が向上する |
| 検索順位が上昇する |
| 新たな検索流入が増加する |
それぞれのメリットを詳しく解説していきます。
ページの表示速度が向上する
AMPを導入する最大のメリットは、Webページの表示速度が向上することです。そして表示速度の向上は、ユーザーの利便性・快適性の向上に繋がります。
スマートフォン・タブレット端末を利用する際、PCと比べてページの表示が遅いと大きなストレスを感じますよね。モバイルユーザーを意識したWebページを作成していないと、そもそもページの内容を見てもらう前にユーザーが離れてしまうことも。
一方で、AMPページは表示速度が速いため、即座にブラウザバックされてしまうケースが減少。該当ページにおける、ユーザー1人当たりの滞在時間が長くなります。
検索順位が上昇する
Googleは2021年まで、AMPページを検索上位に設定する優遇措置を行っていました。優遇措置は終了しましたが、モバイル端末での検索において、表示速度が速いページが優先的に検索上位に設定される仕様は変わっていません。
特に読み込み速度が遅かったWebページは、表示速度の向上によって、Googleから今までよりも高い評価を受けやすいと言えます。
またユーザーの快適性が向上することで、1人のユーザーが同じページ・サイトを繰り返し利用する「回遊率」の改善が見込めます。回遊率が高いWebページは検索上位に設定されやすいため、AMPの導入は間接的なSEO対策に繋がっています。
新たな検索流入が増加する
AMPページは特定の検索サイトに向けて最適化することが可能です。
「リッチリザルト」と呼ばれる機能で、検索結果に画像や「カルーセル」が表示されているのを目にしたことがありますよね。カルーセルとは、タップしてスライドすることで、複数のコンテンツが閲覧できる機能のことです。
AMPページをカスタマイズすることで、リッチリザルトとしてWebページが表示される可能性があります。AMPページは通常のページに比べ、検索結果の上位に表示されやすいことも合わせ、「検索流入」の増加が見込めます。
検索流入とは、ユーザーがGoogleなどの検索エンジンを経由してWebページを閲覧することです。
AMPのデメリット
ここではAMPを導入するデメリットを解説していきます。AMPを導入するデメリットは、大きく以下の3点です。
| デメリット |
| 運用の手間が増える |
| デザインが崩れる可能性がある |
| アクセス数が減少する可能性がある |
それぞれ詳しく見ていきましょう。
運用の手間が大きくなる
WebサイトにAMPを導入する場合、通常のWebページとAMPページの両方を作成する必要があります。AMPページは通常のページを基に作成するため、AMPページだけで運用することはできません。
またページの作成時だけでなく、変更時にも2つのページに修正が必要な場合があります。2倍とまではいきませんが、ページ作成・サイト運用の手間が増えることは否めません。 ただしWordPressなどのWebページ管理ソフトでは、ページを簡単にAMP化する機能がプラグインとして実装されています。AMP導入に対するハードルを下げてくれるため、導入の参考にしてみてください。
デザインが崩れやすくなる
通常のWebページのデザインが、AMPページでは再現できない可能性があることにも注意が必要です。 AMPページで使用される「AMP HTML」と「AMP JS」では、読み込み速度の向上のため、極めてシンプルなコーディングが求められます。
そのため単純にAMP化しただけでは、ページのデザインが崩れてしまうことがあります。特にデザイン性を意識したページの場合に顕著です。
Webページのデザインをシンプルなものに変更するなど、AMP化に当たって対処が必要な場合があります。
アクセスが減少する可能性がある
端的に、アクセス数が減少する可能性があるのもAMPページのデメリットです。
AMPページの検索結果では、「検索スニペット」のリンクが表示されなくなってしまいます。検索スニペットとは、検索結果におけるページタイトルの下の部分を指します。
特定の単語を調べたい場合などに、検索スニペット内のリンクをクリックしたことはありませんか。長いページタイトルではなく、「AMPとは」というリンクを無意識にクリックしてしまいがちです。
ページ内のリンク数が少ない場合はほとんど影響がありませんが、導入時には注意が必要です。
AMPを導入したほうがいいサイトの特徴とは？
メリット・デメリットを踏まえ、AMP化に適したサイトの解説をしていきます。AMP化しやすいサイトの特徴を、大きく以下の2点にまとめました。
- 広告を設置していない(あるいはAMPに対応した広告を設置する)
- シンプルで静的なサイト
AMP化に適したサイトについて、詳しく解説していきます。
導入したほうがいいサイトの特徴
まず1点注意が必要なのが、AMPページには対応していない広告があることです。
そのため、そもそも広告を設置していないサイトがAMP化に適しています。広告を設置する場合は、AMPに対応しているか確認が必要です。
また「シンプルで静的なサイト」がAMP化に適しています。”静的なサイト”とは、会員情報などの、ユーザーから受け取る情報がないサイトを指します。
デメリットにも挙げたように、デザイン性の高いサイトではAMP化によってページが崩れてしまうことがあります。既存のコンテンツが多い場合、崩れたデザインの修正に膨大な労力が必要となってしまいます。
デザインがシンプルであり、文章が中心のサイトがAMPの導入に適しています。
AMPの対応方法
このセクションでは、基本的なAMPページの作成方法を、記述例を交えて解説していきます。AMP化に当たって具体的に何をすればよいのか、イメージを掴む参考にしてみてください。
AMPページは最低限、以下6つの要素を指定します。
- AMP HTML宣言
- headタグとbodyタグの指定
- meta要素の指定
- JSライブラリの読み込み
- カノニカル（canonical）設定
- amp-boilerplate要素の指定
それぞれ詳しく説明します。
AMP HTML宣言
まず通常のページと同じく、HTMLの宣言を行います。またAMPページであるため、lang ampでlang属性を宣言。
<html amp lang=”jp”>
上記は日本語のWebページにおける宣言例です。英語サイトの場合はlang属性をenに変更してください。
headタグとbodyタグの指定
次に「headタグ」と「bodyタグ」の指定を行います。
</head>
<body>
</body>
以下に記載する「meta要素の指定」と「JSライブラリの読み込み」、「カノニカル（canonical）設定」と「amp-boilerplate要素の指定」は、全てheadタグ内で行ってください。
bodyタグ内には、ページに表示する文章などを記載します。
meta要素の指定
次にmeta要素を指定します。 AMPが対応している文字コードはUTF-8のみ。またページの表示領域を設定するviewportの設定が必須となっています。
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
上記のコードにより、文字のエンコード方式と、デバイスの表示領域の設定が完了しました。
JSライブラリの読み込み
AMPページでは、AMP JSのライブラリを読み込む必要があります。
AMP JSライブラリはAMPページを表示するために必須となるため、上記のコードに変更を加えないでください。
カノニカル（canonical）設定
次にcanonicalタグの指定を行います。
AMPページは通常のWebページを基に作成するため、そのままでは同じ内容のページが2つ存在する「重複コンテンツ」の判定を受けてしまいます。canonicalタグを指定することで、1つのコンテンツとして認識させることが可能です。
上記のhttp://example.htmlの部分を、AMPの基となったWebページのURLに変更してください。
amp-boilerplate要素の指定
最後にamp-boilerplate要素を指定すれば、最低限ではありますが、AMPページの要素の指定が完了します。以下のコードはページの読み込みを高速化する定型文であるため、変更を加えないでください。
AMPのまとめ
Webページの情報をキャッシュとして保存し、モバイル端末でも快適に閲覧できるAMP。ユーザビリティが向上し、間接的なSEO対策にも繋がります。WordPressでサイトを運営している場合、AMPの導入を容易に行えるのもメリット。
反面、運用にかかる労力は増え、ページデザインの変更が必要になるケースも存在します。
また設置している広告が、AMPに対応していない場合もあります。運営しているサイトがAMP化に適しているのか、慎重に検討が必要です。 AMPの導入を考えている方は、是非株式会社Jiteraにご連絡ください。ご相談内容に寄り添った、的確なアドバイスをさせていただきます。
