※本サイトは一部アフィリエイト広告を利用しています。

「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を構成している要素

AMP HTML
AMP JS
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つあります。

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

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つあります。

JavaScriptの制限がある
向いていないコンテンツもある
デザインが大きく変わる場合がある
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に対応するためのルール

AMP HTMLを宣言する
meta要素を指定する
構造化マークアップ
bolerplateを記述する
ライブラリの読み込み
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化を行なったばかりの人は始めは戸惑うかもしれません。

img	amp-imgを使用すること
video	amp-videoを使用すること
audio	amp-audioを使用すること
iframe	amp-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の使用方法

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

以上が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を使用している人に効果のあるプラグインです。

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

以上が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がおすすめです。

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

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

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

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

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

「アナリティクス設定」→「プロパティ」→「新しいプロパティを作成」を選択します
プロパティ名をつけます
トラッキング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>