AMP(アンプ)って何?

AMP(アンプ)の正式名称は、Accelerated Mobile Pages(高速表示されるモバイルページ)です。

最近、スマートフォンで検索すると⚡マークが入っているページがありますが、これは、AMP化されたウエブサイトを意味します。

AMPページの表示例

AMPは、スマートフォンのユーザビリティ向上のためGoogleとTwitterが協同で立ち上がたプロジェクトです。

AMPの仕様に従って作成されたサイトのページは、AMP Cacheと呼ばれるAMPページ用のコンテンツ配信ネットワーク(CDN)によってデーター保存(キャッシュ)されます。

通常のウエブサイトは、サーバーからデーターを読み込んでユーザーのスマートフォンに情報を表示します。

しかし、AMP対応したページは、ネットワーク上でウエブサイトのデーターが保存(キャッシュ)されており、モバイルユーザーがURLをクリックするとAMP Cacheに保存されているキャッシュからページ情報をユーザーのスマートフォンに返すので表示速度が向上します。

サイトの表示速度が遅いとサーチエンジンでの検索順位にも影響すると言われており、自社ウエブサイトの表示順位を上げるためAMP化を考える企業が増えております。

ワードプレスで作ったサイトをAMP化する方法は?

ワードプレスで作ったウエブサイトをAMP化するには、AMP規格に準じたページ構成にする必要があります。

もちろん、PHPなどソースコードを変更してAMP化することも可能ですが、それなりの知識を持っていないと失敗します。

無難にやるのであれば、プラグインを使うべきです。

AMP化するためプラグインは、沢山出ていますが、一番お勧めなのは、AMP for WP Accelerated Mobile Pageです。

AMP for WP Accelerated Mobile Pagesを進める3つの理由

AMP for WP Accelerated Mobile Pagesは、英語のプラグインのため苦手意識を持つ方もいるかもしれませんが、AMP化するための最低限の機能が揃っている優れたプラグインです。
本プラグインが特に優れている点は以下の3つです。

①phpなどソースコードをカスタマイズせずプラグインだけでAMP自動広告を表示できる

②PC版のウエブサイトページをそのまま維持できる

③AMPページのレイアウトをある程度変更することができる

AMP for WP Accelerated Mobile Pagesを使ったAMP化手順

Step1:プラグイン”AMP for WP-Accelerated Mobile Pages”をインストール

インストール後に有効にする

Step2:AMP化するページを決定

【WordPress管理画面の左メニュー】⇒【AMP】⇒【SETTINGS】⇒【general】を開き、AMP化したいページを設定する。

ホーム、個別ページ、投稿記事全てをAMP化したい場合はすべてONにする。
※今回は、投稿記事だけをAMP化する。

AMP TakeoverをONにするとパソコン画面でもAMP化されたページが表示されてしまうので、PC用のデザインを維持したい場合はOFFに設定する。

Step3:AdSenseのAMP自動広告でコードを取得

AdSenseにログインし、自社ウエブサイトのAMP自動広告コードを取得します。
※もし、AdSenseの設定がまだの方は、まずAdSenseの登録から始めて下さい。

Step4:AMP自動広告コードの設定

【WordPress管理画面の左メニュー】⇒【AMP】⇒【SETTINGS】⇒【Advance Setting】を開きStep3で所得したAMP自動広告のコードを貼り付ける。

Mobile Redirectionをオンにするとモバイル表示した時に自動でAMPページにリダイレクトします。オフにしているとモバイル表示でAMPページと非AMPページの2種類が表示されてしまいます。

Step5:AMPページの翻訳

【WordPress管理画面の左メニュー】⇒【AMP】⇒【SETTINGS】⇒【Translation Panel】を開きAMPページの英語を日本語に変更する。

Step6:AMP化が成功したか確認

AMP対応状況を確認する検証ページを開き、AMP化したページのURLを貼り付けて検証をする。PASSの表示が出ればOK!
AMP検証サイト https://validator.ampproject.org/

非AMP化のURLを貼り付けるとエラーメッセージが出る。必ず末尾が…./ampとなっているAMP化されたページにすること。