プロのWEB制作者が解説！簡単にわかるＡＭＰの導入方法とSEO効果

「最近よく聞くAMPってなに？」
「ＡＭＰを導入すると何が良いの？」

当記事にたどり着いた方には、こういった疑問を持たれている方も多いのではないでしょうか？
最近では、WEB制作を行う上で「ＡＭＰ」について理解しておくことが必要になってきています。

そこで当記事では、「ＡＭＰ」についての一通りの知識とメリット・デメリット、 また、それらを踏まえたうえで導入する方法や、導入した場合の「SEO効果」について把握できるよう、簡単明瞭に解説します。

当記事が、あなたのWEB制作のお役に立てると幸いです。

ＡＭＰとは

ＡＭＰ(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト名です。
しかし、現在ではフレームワーク(AMP HTML)としての認知度のほうが高くなってきており、主に新聞社のサイトやポータルサイトなど、情報量の多いサイトがＡＭＰ対応を行うことが増えてきました。

ＡＭＰの仕組み

ＡＭＰの仕組みを簡単に言うと、「検索クエリと関連性の高いＡＭＰページがGoogleのクローラーにキャッシュされると、そのＡＭＰページが検索結果に採用される仕組み」です。

ユーザーが、検索結果に表示されたキャッシュ済みのＡＭＰページにアクセスする場合には、キャッシュ済みのためコンテンツの取得までの時間が短くなります。

また、広告やアナリティクスといったタグは遅延読込されるため、記事の表示が瞬時に行われます。

これらの仕組みによって、モバイルユーザーが快適にインターネットを利用できるようになることを目的としており、ＡＭＰ対応を行っているサイトへの評価もあがってきています。

ＡＭＰの必要性とは

ＡＭＰの仕組みでも解説しましたが、ＡＭＰを導入すると表示速度が格段に速くなり、モバイルサイトでよく見かける縦読みに必要なスクロールの動作も俊敏になります。

また、導入しているページは検索結果のカルーセルなどで表示される可能性があるため、サイトへの流入率が増える傾向もあります。

こういった「SEO効果」を含めて考えると、サイトの構成次第ではＡＭＰを利用するのはとても有効な方法だといえるでしょう。

ＡＭＰとモバイルフレンドリーの違い

モバイルでの利用を意識したＡＭＰですが、モバイルフレンドリープロジェクトとは別のものになります。

モバイルフレンドリーは、モバイルに最適化されたサイトを検索結果で優位に評価されるというプロジェクトです。

また、ＡＭＰ対応の有無は検索順位に大きく影響しません。
AMP対応はあくまでも「評価基準を達成する」という方法の一つにすぎないからです。

一方、モバイルフレンドリーはダイレクトに検索順位に影響しますので、今後のサイト運用として既に必須項目となっています。
つまり、ＡＭＰ対応をしないことで検索順位は落ちませんが、モバイル対応していいないと検索順位は落ちるということも、大きな違いといえるでしょう。

ＡＭＰのメリット・デメリット

ここでは、ＡＭＰのメリットとデメリットを解説します。
AMPは、Googleが開発している新しい仕組みのため、対応することでＳＥＯ効果にも影響する技術ですが、最新の技術なだけに不具合が起こるといったデメリットもあります。

それらのメリット・デメリットを踏まえて、導入を検討することをおすすめします。

メリットによる得られる効果

まずは、AMPを導入することによるメリットをみていきましょう。

１）ページの表示速度が高速化する
ＡＭＰの最大のメリットは、従来とは比較にならないほどページの表示速度が高速化することです。
ページの表示速度を高速化することで、ユーザビリティが上がり、離脱率を下げることができます。

２）トップニュース枠に表示される
ＡＭＰを実装したサイトの記事は、検索結果にトップニュースとしてカルーセル表示される可能性があります。
これはサイトへの流入率が格段に上がり、例えると無料で広告を打っているようなものです。

また、カルーセルで表示されることでサイトへの信頼性も高まります。

３）データ転送時に負担がかかりづらい
Googleによる厳格なルールに従いＡＭＰ対応を行うため、転送するデータ量をできる限り小さくしなくてはなりません。
ＡＭＰ対応したサイトは従来のサイトのデータ量に比べ、１０分の１の量になると言われています。

それらのことから、サイトの高速表示にもつながります。

デメリットによるさまざまな影響

それでは次に、デメリットもしっかり確認しておきましょう。

１）ＡＭＰ対応をするために、コンテンツやデザインの変更が発生する
ＡＭＰを実装するためには、Googleが定めた厳格なガイドラインに従わないといけません。
使用できないタグも多く、現在のところjavascriptも利用できません。

そのため、現在運用しているサイト全体のデザインやコンテンツなどを、大きく変更しなくてはならない可能性があります。

２）ＨＴＭＬコーディングを可能な人しか対応できない
使用できないタグや規制も多いため、コーディングの技術を持っている人や解読できる人でないと実装が難しいというのが現状です。

実装後に起こるトラブルなどへの対応能力も求められるため、ある程度の知識と技術力は必要になります。

３）バージョンアップに伴い表示くずれを起こす可能性がある
ＡＭＰは最新の技術ですのでバージョンアップも時々行います。
そのため、ＡＭＰ実装済みのページなのに、バージョンアップに伴い非ＡＭＰページとしての表示になる可能性もあります。

ＡＭＰのＳＥＯ効果について

ＡＭＰ対応を行うことによる「ＳＥＯ効果」はあります。
Googleが定めた、検索結果の評価基準に「ページ、サイトの高速表示」が含まれているためです。

従来の４倍の速さで表示されると言われているＡＭＰですので、高速表示化への評価は高くなります。
もちろん、「ＳＥＯ効果」を求めるのであれば、ＡＭＰ対応だけでは足りません。

その他にも様々な対応方法がありますが、その中の一つとしてＡＭＰを実装することは「ＳＥＯ効果」にとって有効な方法です。

ＡＭＰを導入しよう

ここでは実際にＡＭＰを導入するにあたり、どのような手順を踏んでゆくのか、どのような点を注意するべきなのかを解説します。

ＡＭＰのページを作る

ＡＭＰページを作成するためには、ＡＭＰHTMLの宣言をしたうえで、専用のＡＭＰタグでマークアップしたHTMLファイル（拡張子HTML）を作成します。

大切なのは、ＡＭＰタグでマークアップし、ＡＭＰコンテンツとしてGoogleに認識させるためのWebページを作成するということです。

必要な設定を行う

ＡＭＰページと認識させるためには、いくつか必要な設定があります。

１）ＡＭＰHTMLでは「DOCTYPE宣言をして、html amp の lang属性 を指定」します。

２）meta要素でUTF-8とviewportを指定します。

３）ＡＭＰ JS ライブラリを読み込みます。
ＡＭＰ JS ライブラリを読み込むことで、ＡＭＰページの高速表示が実行できるようになります。

４）canonicalタグを指定します。
canonicalを指定してURLを正規化すれば、重複コンテンツを回避することができるためです。

また、AMPページと非AMPページが存在する場合は、非AMPページにアノテーションタグ（link rel=”amphtml”）を指定して、AMPページの存在をGoogleに認識させることも大切です。

5）ＡＭＰ HTMLでは、ＡＭＰボイラープレートコード（CSS ボイラープレート[amp-boilerplate要素]）を指定することが必須となります。
amp-boilerplate要素を指定して、ＡＭＰ JS ライブラリが読み込まれるまでの最初の間、コンテンツを非表示にします。

使用可能なタグでマークアップする

ＡＭＰには、HTMLとCSSで使用できないタグや制限のかかるタグがあります。

下記はそれらのタグの一例です。

これら以外に、使用が制限されてしまうタグもあります。

例えば、styleは「AMP Boilerplate Code」と、それに加えてHEADタグ内で1つのみが利用可能で、その場合「<style amp-custom>」のように指定する必要があります。

また、linkは「<link rel=”<許可された文字列>”>」といったスタイルでのみ利用可能です。
「rel=”sylesheet”」といった形でのスタイルシート読み込みは後述のカスタムフォント利用的のもの以外は禁止になります。

他にも制限がかかるものがあるため、Googleサイトでの確認をおすすめします。

ＡＭＰの有効性を確認する

作成したＡＭＰページが、Google検索で有効なページか否かを確認するために、ＡＭＰテストツールを活用します。

１）ＡＭＰテストツールのページにアクセスして、作成したＡＭＰページのURLを入力したら、「URLをテスト」ボタンをクリックします。

２）「有効なＡＭＰページです」と表示されれば、Google検索結果でＡＭＰページが採用される対象となるので、結果的にＡＭＰを導入したことになります。

ＡＭＰテストサイト

また、「Chromeデベロッパーツールのコンソール機能」や「Chrome拡張アドオンのAMP Validator」、「サーチコンソールのAccelerated Mobile Pages機能」などでも有効性の確認をおすすめします。

wordpressで導入する場合

wordpressの場合、ＡＭＰの導入はもっと簡単です。
プラグインを導入することで、HTMLタグやCSSタグでＡＭＰ非対応のものをエラー表示をしてくれます。

また、未使用のCSSタグを削除してＡＭＰの50ＫＢ制限以下に整えます。
制限が超えてしまう場合は、重要度の高いテーマスタイルシートは保持され、重要度の低いものを除外するように優先順位をつけてくれます。

ただし、ＡＭＰプラグインに対応しているテーマは限られていますので、設計の段階でＡＭＰ対応を念頭に構築することをおすすめします。

まとめ

いかがでしたでしょうか？
ＡＭＰはとても便利な機能ですが、使いこなすにはある程度の知識が必要になります。

まだ発展途上のプロジェクトとフレームワークのため、使用できないタグや制限のかかっているタグも多く、それらのタグの代替えとなるものを考えながら構築が必要になります。

これから新たにサイトを作られる方は、これらのタグを意識したサイト設計を行えば良いのですが、すでに運用しているサイトの場合は、ＡＭＰ対応ページを別で作ることも一つの方法でしょう。

なぜなら、既存サイトの中から使用できないタグを探し、削除し、代替え対策を行うのは、至難な作業になりがちだからです。

ただし、これからますますモバイルフレンドリーを重視した環境になりますので、今後ＡＭＰを意識したページ作りを行うことは大切なことです。

当記事を読まれることで、ＡＭＰ対応への足掛かりになり、快適なサイトが作られることを祈っております。