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

AMP WEBサイト制作

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

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

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

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

AMPとは

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

AMPの仕組み

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

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

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

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

AMPの必要性とは

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

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

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

AMPとモバイルフレンドリーの違い

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AMPのSEO効果について

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

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

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

AMPを導入しよう

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

AMPのページを作る

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

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

必要な設定を行う

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

1)AMPHTMLでは「DOCTYPE宣言をして、html amp の lang属性 を指定」します。

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

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

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

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

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

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

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

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

タグ名 説明
base 使用不可
img 使用不可。代わりにamp-imgタグを使用する
video 使用不可。代わりにamp-videoタグを使用する
audio 使用不可。代わりにamp-audioタグを使用する
iframe 使用不可。代わりにamp-ifameタグを使用する
frame 使用不可
frameset 使用不可
object 使用不可
param 使用不可
applet 使用不可
embed 使用不可
コメント(<!– –>) 使用不可

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

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

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

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

AMPの有効性を確認する

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

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

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

AMPテストサイト

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

wordpressで導入する場合

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

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

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

まとめ

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

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

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

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

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

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

コメント