Webでの集客や営業を支援するマーケティング情報メディア

AMPとは?仕組みや機能、メリット・デメリットも解説!

「AMPとはなに?サイトになにか影響があるの?」「AMP化のやり方はどうやるの?」と運営しているサイトを快適に表示させる方法を探している人は多くいらっしゃるのではないでしょうか。

現在では検索上位のサイトのほとんどがAMPページといった状況も珍しくないので、早めに対応しておくことをおすすめします。

AMPとは

AMP(Accelerated Mobile Pages)とは、モバイル端末でWebページを高速表示するのに必要なHTMLフレームワークのことです。

イナズマのマークがついているものがAMP化されたページに繋がります。

AMPは、2015年10月にAMPプロジェクトが開始されGoogleとTwitterで共同開発されました。そして今では、多くのWebサイトでAMP化は行なわれています。

なぜなら、2016年10月には、トップニュースだけでなく、検索結果にも表示されるようになったからです。

AMP化をすることで、速さは4倍、データ量は1/4程度になると言われています。

AMPの仕組み

みなさんがWebサイトにアクセスする場合、検索した結果やSNS、リンクをクリックしてサイトを表示しているかと思います。このときに通常はHTML・CSS・JavaScript(JS)などの読み込みなどの手順を踏んでWebページが表示されるようになっています。

既存の方法では様々な情報を読み込んでからページを表示させるので表示速度は通信環境による影響を受けやすいと言えます。

それに対してAMP化をしている場合には、WebサイトをあらかじめGoogleやTwitterでキャッシュしているので読み込む時間を短縮してすぐに表示させることができます。キャッシュとは、一度表示させたWebサイトを記憶させて、次に表示させるときに一度目よりも早く表示させる仕組みのことをいいます。

AMPを構成している要素

  1. AMP HTML
  2. AMP JS
  3. AMP Cache

以上の3つがAMPを構成している要素です。

AMP HTMLとは

Webページを高速表示させるためにHTMLに制約を設ける必要があります。データ量を削減するために、既存のHTMLに対して制限を行います。一部のHTMLタグをAMP専用のタグに変更することができます。

AMP JSとは

AMP JSライブラリは、AMP HTMLページのレンダリングを高速化することができます。AMP JSライブラリにAMPのパフォーマンスをする上で必要な最適化処理が全て行われるようになります。

AMP Cacheとは

AMPの仕様に従って作成されたページがGoogle AMP Cacheによってキャッシュされます。

ユーザーが検索画面やSNSからAMPページへのアクセスを行うと、Google AMP Cacheに保存されているキャッシュからコンテンツを返します。

3つの要素により、本来のWebページにアクセスをしてサイトを読み込まなくても、コンテンツを表示させることができます。

その結果、コンテンツを高速に表示させることが可能です。

AMP化のメリットとは?どんな機能があるの?

AMP化を行うことによるメリットは4つあります。

  1. ページの表示速度が高速になる
  2. データ転送時に負担が少ない
  3. トップニュース枠に表示されることがある
  4. ユーザビリティの向上

4つの解説は以下の通りです。

ページの表示速度が高速になる

AMPを実装したWebページがキャッシュとして保存されるため、ページの表示速度の高速化が可能になります。

それ以外にも、HTMLやCSSのデータ容量を小さくすることができるために、データを読み込む時間の短縮に繋がっています。

データ転送時に負担が少ない

従来のWebサイトと比べると1/10のデータ量にすることができます。 そのためには、AMPのガイドラインに沿った設計を行わなくてはいけません。

AMP化をすることにより、表示速度を高速化するために必要である、転送データを小さくすることが可能になります。

トップページ枠に表示されることがある

AMPを実装したニュースサイトは、検索結果のトップページ枠にカルーセル表示される確率が高くなります。カルーセル表示されることにより、ユーザーの関心を集めることができるので、新たなユーザーの獲得にも繋がります。

また、Webサイト自体の信頼性も向上させることができます。

ちなみに、カルーセル表示とは同一の場所にいくつものコンテンツがあり、横にスクロールして閲覧できる仕組みのことです。

ユーザビリティの向上

ページの表示速度が上がることにより、ストレスなくWebページを閲覧することが可能です。

Webページを快適に利用することができるだけでも、ユーザーの離脱率を抑えることができますので、結果としてユーザビリティの向上に繋がります

AMPの機能

amp-ad広告を表示する
amp-carousel画像とコンテンツを組み合わせてカルーセルを作成
amp-analytics簡単なパターンのトラッキング
amp-sidebarナビゲーションを追加する

その他にも、YouTube動画やTwitterを埋め込むことも可能です。

AMP化のデメリット

AMP化を行うことによるデメリットは4つあります。

  1. JavaScriptの制限がある
  2. 向いていないコンテンツもある
  3. デザインが大きく変わる場合がある
  4. HTMLコーティングの知識が必要な場合がある

4つの解説は以下の通りです。

JavaScriptの制限がある

AMP化をすると、JavaScriptの利用に制限がかかってしまいます。AMPのパフォーマンスを落とさないためにAMP JS以外のJavaScriptを使用することができません。

そのため、JavaScriptを使用しないで表現する方法を考えなくてはいけません。

現在任意のJavaScriptを実行できる<amp-script>がトライアルされていますので、正式のリリースを待ちましょう。しかし、<amp-script>が利用できるようになっても、150KB以内であったり、5秒以上のMutationが必要であったりと制限があります。

無条件でJavaScriptを利用することができるわけではないので、注意してください。

向いていないコンテンツがある

2017年には、海外のECサイトやポータブルサイト、2018年には、食べログやマイナビなどの情報サイトやニュースメディアで多くのサイトがAMP化していることが多くなりました。

しかし、動的ページ(JavaScriptが多用されているページ)には向いておらず、まだまだ日本のECサイトではAMP化をしているWebサイトは多くないのが現状です。それに加えて、AMP導入後に導入前と変わりない挙動となっているか確認するコストも発生してしまいます。

デザインが大きく変わる場合がある

AMPを使用するのに、Googleが定めるガイドラインに従わなければいけません。ガイドラインには、禁止されているタグが多いので、実装すると大きくデザインが変わってしまう恐れがあります

特に、JavaScriptを使用することができないので、JavaScriptを使用しているWebサイトの場合は、実装に検討が必要となります。

HTMLコーティングの知識が必要な場合がある

管理しているWebサイトによってAMP化を行う方法が変わります。

予期せぬトラブルが行なった場合にも対応することができるように、ある程度HTMLコーティングの知識を持っているほうが安心して作業に取り組むことができます。

このように、AMP化の導入にはさまざまな障壁があります。

AMPは普及が進んでいるが、必須ではない

サイト運営やブログ運営をしている方には、すでにAMPという言葉は馴染みがある言葉になっているかもしれません。実際にAMP化されているサイトは増えてきています。

その理由としては、WordPressでAMP化を行うことができるプラグインやテーマがあり、比較的簡単にAMP化を行うことができることがあげられます。

また、はてなブログやエキサイトブログ、アメーバブログなどの無料のブログサービスはAMPをサポートしているので、無料のブログサービスでブログを運営している人は気付かないうちに記事がAMP化されている場合が多いです。

そのため、WordPressを使用してブログ運営を行なっているのであれば、他のブログサービスに遅れを取らないためにもAMP化をおすすめします。

しかしながら、現在時点では検索順位に大きく影響する要因ではなく、サイトによって向き不向きもありますので無理をして導入する必要はありません。

それでもAMPはGoogleが推進しており、サイトの表示速度の改善はユーザーのストレスを減らし、滞在時間や回遊率の向上が見込めますので、取り入れられる場合はAMP化しておいて損はないでしょう。

AMP化への対応方法について

AMP化を行う上で、知ってもらいたいことがあります。

  • AMPのルール
  • AMP化を導入する上での注意事項
  • AMP化のやり方

これからAMP化を検討している方は参考にしてください。

AMPに対応するためのルール

  1. AMP HTMLを宣言する
  2. meta要素を指定する
  3. 構造化マークアップ
  4. bolerplateを記述する
  5. ライブラリの読み込み
  6. canonicalタグを使用する

以上の7つがAMPを行う上で必要なルールです。上記のルールを守ることでAMP化を行うことができます。

1.AMP HTMLを宣言する

通常のHTML文章と同じでAMPを宣言する必要があります。

AMPが面白い点は、「雷マーク」を「⚡️」で記載することも可能です。

<!doctype html> <html amp lang=”ja”><!doctype html> <html ⚡️ lang=”ja”>

どちらで記載しても同じですので、好きな記載方法を選んでください。

2.meta要素を指定する

AMPはUTF-8にのみ対応していますので、必ず指定するようにしてください。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

3.構造化マークアップ

クローラーに正しく構造を伝えるために必要な作業です。

schema.orgのJSON-LDを指定しなくてはいけません。

4.boilerplateを記述する

boilerplateは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>

5.ライブラリの読み込み

AMPを表示させるためにライブラリを作成する必要があります。

<script async src="https://cdn.ampproject.org/v0.js"></script>

上記をheadタグの上に記載する必要があります。これを正しく入力しないとエラーの原因となります。

6.canonicalタグを使用する

canonicalタグでAMPページがあることをクローラーに伝えることができます。

AMPページを伝える方法は、AMPページとオリジナルページの両方を伝えなくてはいけません。

<link rel="canonical" href="元のページのURL">
<link rel="amp html" href="AMPページのURL">

どちらも必要ですので、忘れずに入力してください。

AMP化を導入する際の注意事項

<HTMLの場合>

その他にも、実際にAMP化を行うと使用するのが禁止されているタグもあります。

AMP独自に決められたタグを使用しなくてはいけないので、AMP化を行なったばかりの人は始めは戸惑うかもしれません。

imgamp-imgを使用すること
videoamp-videoを使用すること
audioamp-audioを使用すること
iframeamp-iframeを使用すること

上記以外のタグは基本的には使用することができません。属性についても一部制限がありますので、AMP化を行う前に確認をしましょう。

HTMLの制限があるタグについては、こちらから確認をすることができます。

<CSSの場合>

AMPにはHTMLの他にもCSSにもルールがあります。AMPでは外部にあるCSSファイルを読み込むことが禁止されています。

AMP対応のHTML内では、CSSを使用することができるので、headタグ内に記述しましょう。

<head>
  <style amp-custom>
    body{
      background: #◯◯◯;
    }
    h1{
      color: #◯◯◯◯◯◯;
      margin: ◯◯px 0;
    }
    amp-img {
      max-width: ◯◯◯px;
      height: auto
    }
  </style>
</head>

上記のように記述することでCSSを利用することが可能です。

その他のCSSの制限のあるタグについてはこちらから確認をすることができます。

HTMLもCSSについても、事前に調べてから行うことをおすすめします。

先ほど伝えたAMPに対応するルールも合わせて理解してからAMP化を行いましょう。

AMP化のやり方

実際にAMP化を行う方法は、2通りのやり方があります。

  • AMPのプラグインを使用する方法
  • HTMLコーティングを行う方法

WordPressでWebサイトを運営している場合は、AMPプラグインを使用することができます。

WordPressでWebサイトを運営していないときには、HTMLコーディングを行う必要があります。

しかし、テンプレートを参考にすれば簡単に行うことができますので、先ほどお伝えした「AMPに対応するためのルール」と「AMP化を導入する際の注意事項」を確認してから行うようにしてください。

AMPのプラグインを使用

WordPressでAMP化を行う上でおすすめのプラグインは3つあります。

  • AMP
  • Giue for Yoast SEO & AMP
  • Facebook Instant Articles & Google AMP Pages by PageFrog

これらの3つはAMP化をするのにおすすめのプラグインです。

「AMP」はAMP化をするのに必ず必要なプラグインとなります。

「Giue for Yoast SEO & AMP」「Facebook Instant Articles & Google AMP Pages by PageFrog」は必要に応じてプラグインをインストールして利用してください。

どちらを選んでも便利な機能を増やすことができます。

AMP化をするのであれば、プラグインをインストールするのが最も簡単に実現できる方法なのでおすすめです。

AMPの使用方法

  1. WordPressで「AMP」をインストールする
  2. 有効化する

以上がAMPの使用方法です。

特に設定をしなくてもAMP化を行うことができます。

AMPページにアクセスをしたい場合は、URLの最後に「amp/」を追加することで確認をすることができます。

それ以上の機能が欲しい場合は、「Giue for Yoast SEO & AMP」か「Facebook Instant Articles & Google AMP Pages by PageFrog」をインストールして利用してください。

Giue for Yoast SEO & AMPの場合

AMPページのデザインを変更したい場合やGoogleアナリティクスのトラッキングコードを設置することができるようになります。

Yoast SEOを使用している人に効果のあるプラグインです。

  1. WordPressで「Giue for Yoast SEO & AMP」をインストールする
  2. 有効化する

以上がGiue for Yoast SEO & AMPの設定方法です。

Yoast SEOで使用したロゴや組織の名称をAMP構造データに反映させることができます。

Facebook Instant Articles & Google AMP Pages by PageFrogの場合

Googleアナリティクスだけでなく、Googleアドセンス(Google広告)にも対応させたいのであれば、Facebook Instant Articles & Google AMP Pages by PageFrogがおすすめです。

  1. WordPressで「Facebook Instant Articles & Google AMP Pages by PageFrog」をインストールする
  2. 有効化する
  3. 有効化することで設定画面に移動します
  4. Google AMP HTMLの「Begin setup」をクリックする
  5. 「Download Now」をクリックする
  6. 左側のメニューからMobile Formatsを選ぶと設定を行うことができます

アクセス分析に使用しているプラグインをクリックして設定を行うことで、連携することが可能です。

AMP対応のページを分けて分析をしたい人は、これから説明するGoogleアナリティクスの設定方法を参考に新しくプロパティを作ってください。

Googleアナリティクスの設定方法

通常のページとAMPのページを分けて分析したい人は新しくプロパティを作成する必要があります。

  1. 「アナリティクス設定」→「プロパティ」→「新しいプロパティを作成」を選択します
  2. プロパティ名をつけます
  3. トラッキングIDの取得をクリックします

AMPとわかる名前にしておくのがおすすめです。あとは、トラッキングIDが必要なときに使用してください。

HTMLコーディングを行う

HTMLコーティングでAMP化を行う場合は、「AMP化に対応するためのルール」を実行します。

具体的には、下記のソースを参考にしてください。赤文字部分を変更することでAMP化を行うことができます。

コピペをするのは簡単ですが、万が一エラーが出た場合にも対応することができるように、もう一度「AMP化に対応するためのルール」を理解してから行うことをおすすめします。

ページのタイトル

<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <title>Webサイトのタイトル</title>
    <link rel="canonical" href="https://syncer.jp/Web/AMP/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      body {
      background-color: #◯◯◯ ;
      padding: ◯◯px ;
      }
    </style>
    <script type="application/ld+json">
      {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "記事のタイトル",
      "image": [
      "eyecatch.jpg"
      ],
      "datePublished": "◯◯◯◯-◯◯-◯◯(日付)T00:00:00+0900"
      }
    </script>
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>ページのタイトル</h1>
    <p>◯◯◯◯◯◯◯◯◯</p>
  </body>
</html>

AMP化のSEOへの効果

AMP化を行うとページの読み込み速度を早くすることができる、とメリットの部分で説明しました。

AMP化された記事は検索結果のカルーセルに表示される可能性が高まります。その記事からの流入増加や表示までの時間をとらせないことで、ユーザビリティが向上し、回遊率が高まれば自然とGoogleからの評価は上がります。

Googleではユーザビリティを重視しているため、ユーザーが評価したページは上位化の可能性が高まります。

そのため、直接的な検索順位には影響しませんが、間接的に検索順位の底上げに利用することができます。まだAMP化を行なっていない場合は「AMPのやり方」を参考にして行うことがおすすめです。

AMP化に対応しているか確認する方法

ここまでAMP化を行う方法を紹介しました。次は実際にサイトの記事がAMP化されているのかをチェックする方法をお伝えします。

AMP化を確認する方法は4つの方法があります。

  • AMPテスト
  • AMP Validator
  • Search console
  • デベロッパーツール

AMPテスト

AMPテスト」はGoogleから発表されています。

  1. AMPテストのツールを開く
  2. テストするURLを入力へ調べたいURLを入力する

AMPが有効であれば、「有効なAMPページです」と表示されます。

しかし、AMPページでない場合や、間違った設定を行なっているときには、「AMPページでありません」や「有効なAMPページでありません」と一緒にエラーメッセージが表示されます。

指摘されたエラーメッセージを修正して、再度確認をして「有効なAMPページです」と表示すれば問題なくAMP化されたことになります。

AMP Validator

AMP ValidatorはAMPプロジェクトが開発したツールです。

Chrome版とWeb版がありますので、使用する環境に合わせて使ってください。

【Chrome版の場合】

  1. ChromeのWebストアから「AMP Validator」をインストールします
  2. 確認したいWebサイトにアクセスを行う
  3. アイコンを確認する
灰色AMP対応ではないページ
青色AMP対応のページがある
緑色AMP HTMLが有効なページ
赤色エラーがあるAMPページ

上記の4つの色からWebサイトの状態を判断することができます。

青色の場合には、アイコンをクリックすることによりAMPに対応しているページへアクセスします。

赤色のエラーがある場合には、アイコンをクリックすることにより、エラーを確認することが可能です。

【Web版の場合】

  1. AMP Validatorのツールを開く
  2. URLの部分に確認をしたいURLを入力する
  3. VALIDATEをクリックする
  4. エラーの場合にはエラーメッセージとソースコードが表示されます

Search console

  1. Search consoleにログインを行う
  2. チェックしたいサイトを選択する
  3. 検索での見え方 → Accelerated Mobile Pagesを選択する
  4. AMPのインデックス数やAMPページに発生しているエラー内容が表示される

エラーがある場合にはエラーメッセージに従って修正を行います。

デベロッパーツール

  1. AMP化をしたページの最後に「#development=1」を入力してページを表示します
  2. デベロッパーツールを起動させます
  3. Consoleタブをクリックする
  4. 1行目に「Powered by AMP」と表示される場合はAMP化が行われています

デベロッパーツールの起動方法について

Chromeの場合は、「右上のバー」をクリックして「その他のツール」→「デベロッパーツール」で表示させることができます。ショートカットで起動させることもできます。

MacCommand+option+i
WindowsControl+Shift+i

以上がAMP化されているか確認をする4つの方法です。

AMP化を行なったあとは、正しくAMP化されているか確認をしてみてください。しかし、AMP化されていてもすぐに反映される訳ではありません。

クローラーにWebページがAMPに対応しているということを認識してもらわなければいけません。

まとめ

AMP化のメリットやり方について解説しましたが、いかがだったでしょうか。

このページの要点は以下になります。

<AMP化とは>

  • GoogleとTwitterが共同開発を行なったHTMLフレームワーク
  • データの読み込み速度を向上させることができる
  • AMPは普及しはじめているが必須ではない
  • WordPressを使用している人はプラグインを使用することで簡単にAMP化できる
  • 必要に応じて一緒にインストールしたら機能を増やすこともできるWordPressプラグインもある
  • AMPのルールを覚えればHTMLコーディングを行うこともできる
  • 間接的にSEOにも効果があるのでAMP化はおすすめ

ユーザーの利便性を高めるためにAMP化を検討してみてはいかがでしょうか。