みなさんはAMPという技術をご存知でしょうか？
AMP（Accelerated Mobile Pages）はGoogleやTwitterなどの企業がが共同開発しているシステムで、モバイル端末でwebページを高速表示するためのプロジェクトです。
通常のwebページはリンクがクリックされてからHTMLを読み込むのでタイムロスが生じますが、AMPはGoogleやTwitter側にキャッシュとして保存されることでタイムロスを改善し表示速度を高速化できるようになっています。
サイトの表示速度はユーザーのストレスに直結していることもあり、表示速度が遅いサイトでは直帰率が非常に高くなってしまうというデータもあります。
今回は表示速度を改善できるAMPを簡単に設定できるプラグインと予めAMPに対応したテーマを３つ紹介します。
AMP化するメリット
サイトの表示速度を改善できるAMPを活用することによるメリットはどのようなことが上げられるでしょうか。以下にまとめてみました。
ユーザーのストレスが軽減される
webサイトはいくら良質なコンテンツを発信していたとしてもユーザーが訪れてこなければ意味がありません。
キーワード対策などをして作ったコンテンツがユーザーの目に止まったとしてもサイトの表示速度が遅ければ、同じような情報を発信している他のサイトへ行ってしまうでしょう。
AMP化することによってサイトが重くなるようなjavaScriptの使用が制限されるため、アイキャッチ画像や説明動画などの表示が改善できます。
2度目のアクセスからキャッシュされるので更に高速に表示されることになり、ユーザーからすると非常に快適なサイトとして信頼される要因にもなります。
Google検索のカルーセル部分にサイトが表示される
AMP化したページはモバイル端末で検索した際に表示されるカルーセルに表示されるようになります。これは確実に表示されるということではありませんが、コンテンツの内容によっては高確率で表示されるようです。
モバイル端末でGoogleの画面を見ている際にカルーセルに自分の記事やコンテンツが表示されていればアクセスアップにも繋がります。これは非常に大きなメリットと言えるでしょう。
AMP化プラグインAMPとGlue for Yoast SEO & AMPの設定手順
ここでは簡単にAMP化を実現できる便利なプラグインの使い方とAMP用のアクセス解析ツールであるGlue for Yoast SEO & AMPの設定方法を解説していきます。
AMP
https://ja.wordpress.org/plugins/amp/
プラグインのダウンロードをするかワードプレスの管理画面より「プラグイン」→「新規追加」をクリックします。新規追加画面が表示されたら「AMP」と検索してプラグインを表示させましょう。
プラグインが表示されたら「今すぐインストール」をクリックします。インストールが完了したら「有効化」してください。
プラグインを有効化したら設定は完了です。非常に簡単ですね。これでモバイル端末で投稿を表示した際にAMPかされたページが表示されることになります。
AMP化されたページが表示されるか確認したい場合は記事のURLの末尾に「/amp」と付けてアクセスすることでページを表示できます。
次にデベロッパーツールを使って作成したAMPページが有効なページになっているかを確認します。
「/amp」を付けたURLにさらに「/#development=1」を付け加えてアクセスします。
サイトが表示されたらWindowsの方は「Ctrl + Shift + I」をMacの方は「Cmd + Opt + I」を押してデベロッパーツールを呼び出します。（ブラウザ：GoogleChromeの場合）
問題がなければ下の画像のように「AMP validation successful.」と表示されます。
これでプラグインAMPのインストールと設定は完了です。
次にGlue for Yoast SEO & AMPの設定をしていきましょう。
こちらのプラグインを使用する際は事前に大元の「Yoast SEO」をインストールしておきましょう。
Glue for Yoast SEO & AMP
https://wordpress.org/plugins/glue-for-yoast-seo-amp/
上のURLからプラグインをダウンロードするかワードプレスの管理画面より「プラグイン」→「新規追加」をクリックします。
プラグインの追加画面が表示されたら「Glue for Yoast SEO & AMP」と検索します。プラグインが表示されたら「今すぐインストール」をクリックします。インストールが完了したら「有効化」しておきましょう。
プラグインの有効化が完了したら管理画面より「SEO」→「AMP」の順に進んで詳細ページを表示させます。
プラグインの詳細ページが表示されますので「Analytics」をクリックしてAMPページ用のトラッキングIDを入力する画面を表示させます。
「Analytics code:」の入力欄に以下のコードを挿入します。
コードの「”account”: “UA-XXXXXX-X”」部分に新規に取得したトラッキングIDを入力して「変更を保存」をクリックで完成です。
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
これでプラグインでAMP化したページをアクセス解析する設定は完了です。
AMP対応済のテーマ
ここではAMP化に対応したテーマを紹介します。
デフォルトでAMP化に対応したテーマや今回紹介したプラグインと連携することのできるテーマを特集しました。有料と無料のものがありますので、好みや目的に応じて使用してみてください。
Simplicity
カスタマイズしやすいシンプルな作りが魅力の「Simplicity」
無料で利用できる非常に人気のこちらのテーマはAMPに対応しており、管理画面から「AMPの有効化」にチェックを入れるだけで簡単に設定できます。現在はAMP機能はベータ版として利用可能になっており、固定ページのAMP化には対応していません。
投稿ページのみの対応となっていますがYouTube動画やTwitter、Instagramなど記事に埋め込まれたSNSに対してもAMP化できるようになっているのは無料テーマとしては非常に優秀です。本家サイトでAMPに対する詳細の説明があるのも分かりやすいです。カスタマイズ性の高い無料テーマでおすすめです。
Sentry
https://ultimate-ez.com/sentry/
非常に手の込んだ無料テーマの「Sentry」
有料テーマのようなレイアウトが非常に魅力的なテーマですが、プラグインを活用することにより簡単にAMPやSNSのシェアボタンを追加できるように設計されています。
必要なものをインストールしてレイアウトに反映できるのはとても便利な機能で知識のない方にも分かりやすい設計になっています。マニュアルサイトも用意されていてチュートリアルも豊富に揃っています。
ワンカラムの表示にも対応しておりランディングページを作ることもできます。もちろんレスポンシブデザインですがYouTubeの埋め込み動画も自動でレスポンシブに対応しているのはブログで動画コンテンツを多様する方には嬉しい機能と言えます。有料でもおかしくない高機能なテーマでおすすめです。
AFFINGER5（WING）
このサイトでも事ある毎に紹介している「AFFINGER」
何度も紹介するのは、それだけ高機能でありコストパフォーマンスに優れているからなんです。こちらのテーマでは記事全体をAMP化することはもちろん、個別にも設定できるようになっていますので、必要以上にAMPのページを作らずに済みます。
コンテンツの量が多い方には嬉しい機能です。また最近のアップデートによりAMP化されたページに任意で「完全版のページを表示」するボタンが付けられるようになりました。
これによりAMPページで表示速度を上げておいてコンテンツの詳細を知りたい方は自身の意志で通常版のボリュームのあるコンテンツを表示できるようになります。
これはユーザーにとっても運営側にとっても現段階のAMPの機能としてはベストな選択と言えるでしょう。設定も非常に簡単で流石は有料テーマと思わせてくれる使いやすいものになっています。
開発元：株式会社オンスピード
価格：14,800円(税込)
主な用途：アフィリエイト、メディア
AMPのデメリット
高速に表示ができるAMPにはメリットしかないと思う方も多いと思いますが、現段階ではデメリットになる部分も持ち合わせています。以下に主な要因を並べてみます。
使用できるタグに制限がある
例えば画像を表示する際に使用する「img」タグはAMPのページを作成する場合「amp-img」と表記を変更しないと使用することができません。
プラグインによって自動で編集してくれる部分はあるものの対応していない、もしくは不具合の起きるコンテンツは少なからずあるでしょう。コンテンツによっては表示されないものも出てくる可能性があります。この問題は後々改善される見通しのようですが現段階ではデメリットになっています。
HTMLとAMP HTMLを2重で管理する必要がある
現状では通常ページのHTMLとAMPのHTMLが統合されていませんので、同じコンテンツだとしても実際には2つのHTMLを管理する必要があります。
このデメリットについても今後改善されていくと思いますが今のところ面倒と感じたり、ファイルが溢れてしまうことを嫌ってAMP化をしない方も多くいるのが現実です。
広告タグの使用制限がある
ASPを活用してアフィリエイトをしている方には残念なことに国内のASPでAMPに対応している企業の少なさが目立ちます。Googleアドセンスはもちろん対応しているのですがA8.netなどの広告タグは未対応なので表示されない不具合が出てしまいます。
せっかくサイトの表示速度が上がっても広告が表示されなければ意味をなさないサイトの運営者の方も多いでしょう。現段階ではデメリットに感じAMP化を諦めている方も多いと思います。
弊サイトではSEO対策関連の記事も書いています。AMP対応の前にAMP対応の前にいくつか見直せる部分があるかもしれませんのでその記事をご紹介します。「【ワードプレスのSEO】価値の低いページの対処方法（noindex）」、「ページネーションするときはrel=”prev”とrel=”next”を追加しよう【SEO対策】」、「ナビゲーションを追加しよう SEO対策としてのナビゲーション」
ワードプレスAMP化のまとめ
ワードプレスで作ったサイトをAMP化するプラグインとテーマを紹介しました。
サイトのページ速度を改善してモバイル端末での表示速度を飛躍的にアップさせるAMPは実際にサイトを表示してみるとその早さに驚くと思います。画像が沢山使われたサイトでも一瞬で表示されるのは非常に魅力的でストレスを感じません。
ただし現状ではデメリットに感じずにはいられないような課題も残っています。今までのコンテンツをそのまま流用しにくい現在のAMPの仕組みを面倒に感じてしまう方も多いと思います。
ただしこの問題はAMPのシステムがオープンソース型という誰でも改善に参加できる仕組みになっているので、遅かれ早かれユーザーの希望通りに改善される方向に進むと思います。
今後、モバイル端末での表示速度は非常に重要な要素になってくるはずですので、今からサイトを立ち上げる方はAMP化は必須項目と言えるでしょう。今後に期待のAMPを活用していきましょう。