モバイルページを「超」高速化できるAMP(Accelerated Mobile Pages)に、WordPressのプラグインを使って、簡単に対応するための方法を紹介します。

あまり凝っていないサイトなら、この対応だけで、GoogleAnalyticsの設定からAdSenseの広告表示まで、AMPに対応したページを立ち上げるために必要な準備がだいたい終わります。

一方で、デザインに凝っているサイトやプラグインをたくさん使っているサイトについては、今回紹介するプラグインだけでは対応は終わらず、かなりのカスタマイズが必要になります。プラグインでどこまで出来るのか、の参考にしてみて下さい。

AMPとは?

AMPとは、Accelerated Mobile Pagesの事で、GoogleとTwitterなどが立ち上げた、モバイルでウェブページを高速表示するためのプロジェクトです。ニュースやブログなどの静的なコンテンツに向いた対応が先行しており、WordPressもプロジェクトに参画しています。

スマホからGoogle検索した時に、⚡️マークを見たことありませんか?AMPに対応しているページでは、Googleの検索結果にこのアイコンが付くようになっています。

AMPに対応しているページは、驚くようなスピードで表示されます。これは、AMP対応するとページが軽くなり速くなる、というのに加えて、Googleが持つキャッシュが効くようになるからなのです。非力なサーバーを使っているサイトが、GoogleやTwitterのキャッシュのおかげで「超」高速化されます。

AMP対応した時の速さは、単純にサイトを開いて計測した場合の差以上に、Google検索などからの流入時にさらに実感できます。

この記事のAMP版がこちらです。スマホで開いている場合で、AMP版が表示されていない場合はクリックしてみて下さい。

AMPのメリット

AMPのメリットは、大幅な速度改善によりユーザー体験の向上につながる、の一言に尽きます。それによって得られる副次的な効果として、

  • サイト表示前の離脱減
    →ユーザーが表示に待てるのは2秒まで、とも言われており、表示が遅くなるごとに当然のように離脱率は上がっていきます。少し待っても出てこないページは見るのを諦めますよね?サイトにアクセスしてから表示されるまでの速度は本当に重要です。
  • 検索サイトからの流入増
    →AMPを知ってしまうと、あまりにも快適なので、検索結果に「AMP」のロゴがあるサイトを優先してクリックしたくなります。検索結果の表示への影響はロゴの有無でしかないのですが、今後AMPが認知されていくにつれて、AMPロゴの有無だけでもCTR向上につながる可能性が高くなるでしょう。
  • 広告のCTR向上
    →広告の設置方法などに制約を受けるものの、ページのユーザー体験向上により、CTR向上の可能性が高くなります。150のパブリッシャーの結果では、90%以上のパブリッシャーが、非AMPページより高いCTRで良いエンゲージメントを得ている、という報告がされています。(参考:ADS ON AMP: WHERE FASTER IS BETTER

といったメリットがあります。

現時点では、AMPの対応有無自体は検索ランキングに影響しない、とされているのですが、結果としてAMP対応がSEO対策の一つになる、と言えます。

このサイトは、PV数が少なくサンプル数も十分ではないためあまり参考にならないかもしれませんが、検索・広告ともにAMP対応したページの方がCTRが高い傾向が出ています。

AMPページの方が直帰率が高い傾向が出てしまっていますが、AMPページの計測においてGoogle Analyticsがまだ課題を残しており、その影響が出てしまっている分もあると考えられます。

AMPのデメリット

当然、AMPにはデメリットもあります。

  • 一部のタグが使えない(AMP専用のタグを利用する必要がある)
  • 外部CSSが読み込めない(CSSはインライン化が必要。最大50キロバイトまで)
  • JavaScriptがほとんど使えない(AMPのために設計された非同期スクリプトのみ利用可能)

といったあたりが、AMPの制約によって発生します。特に、WordPressのAMP対応という観点では、

  • AMPページで表示崩れやエラーが発生してしまう
  • 一部のプラグインがAMPページで使えなくなる
  • AMPページで、通常のページと同じことが表現できなくなる
  • 一部のアフィリエイトがAMPに対応していない(AdSenseはAMPに対応しています)

という課題があり、すぐにでも対応すべきかどうかは、サイトの状況次第となります。

WordPressをAMPに対応するための選択肢

AMPに対応しているテーマの利用

個人的には、この対応方法が一番オススメです。Simplicityなど、有名なテーマについては、AMP対応しているものが増えてきています。テーマそのものがAMPに対応してくれるのが一番楽なのでオススメです。

もしも、現在利用中のテーマにこだわりがなく、テーマ自体をあまりいじってないようであれば、AMPに対応しているテーマへの乗り換えを検討する事もオススメします。

ただし、一部のプラグインがAMPに対応できない事は変わらないので、利用しているプラグイン次第ではうまくいかず、個別対応が必要になる可能性があるので、テーマを切り替えただけで全ての対応ができるわけではない、という点には注意をして下さい。

AMP対応のためのプラグインの導入

AMPへの対応は、プラグインの導入でも出来ます。

細かい事にこだわらないのであれば、プラグインを入れて設定をするだけで、ほぼ対応終了になります。

細かい事にこだわろうとすると、テーマを一から入れてカスタマイズするのに近い労力が発生します。テーマを導入した当初にCSSをたくさんいじった事がある人にとっては、それと同じ事をもう一度やる事になる、と考えるのが良いでしょう。

また、表示に影響するようなプラグインを使っている場合、AMPで使えないものも出てきます。それらに一から対応しようとすると、時間も手間もかなりかかる場合があります。

プラグインによってWordPressをAMP化する方法

前置きがかなり長くなりましたが、本題のプラグインを導入して、WordPressをAMP化する方法を紹介します。

導入するプラグインは、

  • AMP(Accelerated Mobile Pages)
    →WordPress.comの開発・運営元であるAutomattic社によるプラグイン
  • AMP for WP(AMP for WordPress)
    →AMPプラグインを拡張するためのもので、AMP化するために必要なたくさんの設定がこのプラグイン経由でほとんどできてしまう便利なプラグイン(AMP for WPをインストールするとAMPのインストールを促されます)

の二つです。プラグインの追加から、AMPと検索するとどちらも上位に出てきます。

AMPのインストール

まずは、Automattic社のAMPプラグインをインストールして有効化します。(プラグイン→新規追加で、AMPを検索)

次に、設定→パーマリンク設定、を開いて、何も変更せずに「変更を保存」をクリックします。(設定を変更してしまうと記事のURLが変わってしまうので要注意)

実は、この時点で、WordPressのAMP化はできてしまっています。

記事のURLの最後に「/amp/」をつけてアクセスすると、このようにAMP化されたページを開くことができます。ただし、デザインも質素ですし、何の設定もされていないので、相当シンプルなサイトでない限り、これだけでは足りないでしょう。

まずは、この時点でサイトのコンテンツがどのように表示されているか、を確認してみて下さい。ずれている箇所、表示されていない箇所があれば、それがAMP化する上で調整すべき内容になります。特に、プラグインを使って表示しているものの中には、出ていないものもあると思います。

また、非AMPページに、AMP対応ページのリンクがこっそり埋め込まれる事になっています。検索エンジンにAMPページがクロールされるようになりますので、中途半端な状態でこのプラグインを有効化して放置しないように気をつけましょう。

AMP for WPのインストール

AMPだけでは、設定が足りなすぎるので、それを強力に補ってくれるのがこちらのプラグインです。これさえ入れてしまえば、凝っていないサイトであれば、ほぼ設定だけでAMP対応が終わります。

先ほどと同様に、プラグインで「AMP」を検索すると上位に出てきます。

インストール直後のAMPページがこちらです。先ほどよりも色々と増えていますし、デザインもよくなっています。

このプラグインで、AMPページに対して、主に以下のような事ができるようになります。あまりこだわりがなければ、いくつか設定をいじるだけで、AMP対応は完了してしまえるくらい高機能です。

  • AMP化する対象ページの変更(トップページ、アーカイブページ、単一ページのON/OFF)
  • AMP用のデザインの変更&カスタムCSSの追加
  • SNSシェアアイコンの設置
  • 関連投稿の追加
  • AdSense広告の設置
  • AMPページのSEO設定
  • AMPページへのGoogle Analyticsの設定
  • モバイルからのアクセスの場合に、AMPページへの自動リダイレクト

AMP for WPの初期設定

必要な設定を簡単に説明します。デフォルトからの変更を検討する箇所を中心に取り上げています。(記事作成時点のバージョンは0.9.55)

General

AMP on Pages→余計なAMP Validationエラーが出る場合があるため、まずはOFFを推奨。様子を見てからONにすれば良い。設定変更時には、設定→パーマリンク設定にて、パーマリンクの更新が必要。

Homepage

Homepage Support→トップページのデザインが大きく変わってしまうため、まずはOFFを推奨。AMPは記事ページを優先的に対応した方が効率的。


Design

Design Selector→好みのデザインを選択すればOK。今のサイトのテーマに近いものを選んでおくと調整が少なくて済みます。このサイトは「Design Two」をベースにしてカスタマイズをしています。

Customer CSS→ここにカスタムのCSSが追記できます。見出しタグのフォーマットなどは、ここにCSSを追記すればAMPページに適用されます。見出しタグを元のテーマと揃えるだけで、AMPページと非AMPページの間の違和感がなくなります。なお、AMPページのCSSでは!importantなどはエラーになるので注意。

Single

Sticky Social Icons→画面の一番下に張り付くSNSボタン。ON/OFFは好みで。どのアイコンを表示するか、は別のタブで変更できます。

Show Related Post from→関連する投稿を「何」をベースに表示するか。タグ/カテゴリーのどちらかを選択。

Number of Related Post→関連する投稿の件数。

Advertisement

AdSense広告を設定できます。それぞれのスロットに異なる広告ユニットを設定します。

どのスロットをどのサイズで使うのが良いか、は試しながら調整する事になるので、AdSenseにて広告サイズをレスポンシブにして、設定できるスロットの数だけ作った上で全部のスロットにまずは設定してしまうと便利です。

AD Size→広告のサイズを選択

Data AD Client→広告コード内にあるdata-ad-clientの値をセット

Data AD Slot→広告コード内にあるdata-ad-slotの値をセット

Social

SNSのシェアボタンで出すものが選べます。不要なものをOFFにして、必要なものだけ残しましょう。FacebookはFacebook App IDが必要になります。(注:当サイトでは、このプラグインが提供するシェアボタンは使わずに個別カスタマイズしています)

SEO

Meta Description→ONで良いでしょう

SEO – Advanced Index & No Index Options

検索エンジンにIndexする対象のみONにします。ベースとなるサイトの設定に合わせれば大丈夫ですが、よく分からなければ、このような設定にしておきましょう。

Author Archive pages→No Index

Date Archive pages→No Index

Categories→Index

Tags→No Index

Analytics

AMPページのGoogle Analyticsによる計測は、通常サイトとは別のプロパティで計測することが推奨されています。Google Analyticsの管理メニューから新しいプロパティを作成して、新しいトラッキングIDを入れましょう。

Analytics Type→Google Analytics

Google Analytics→新しいトラッキングIDを入力(UA-XXXXX-Y)

Translation Panel

一部の文言の翻訳が設定できます。適宜、日本語訳を設定して下さい。

Advance Settings

Archive page Support→タグページやカテゴリーページのAMP対応のON/OFFが変更できます。デザインや機能に問題なさそうならONにすればOK。よく分からなければ優先度下げておき、OFFのままでOK。

Mobile Redirection→スマホからのアクセスの場合に、自動的にAMPページを表示するようにするオプションです。AMP対応が問題なさそうになったらONにすればOK。これをOFFにしても、検索エンジンからはAMP対応ページがインデックスされていくので要注意です。

AMP for WPのデザインの調整

外観→AMPから、AMPページのレイアウトやデザインの調整ができます。ON/OFFを切り替えてながら、必要なものだけをONにしましょう。

ヘッダーの背景&リンク色を、元のサイトのイメージと合わせておくと、AMPページと非AMPページを行き来した場合の違和感がおさえられますし、デフォルトそのままではないイメージになるので変更するのがオススメです。

このDesign Managerで設定できるもの以外は、DesignタブにあるCustomer CSSに追記するなどして調整する事になります。

AMP対応した結果の確認

AMPに対応したら、エラーがないか確認をしましょう。エラーがあると、検索結果などに表示されない可能性があるのでエラーは解消しておく必要があります。

The AMP Validator

こちらのThe AMP Validatorで、サイトがAMPが指定するフォーマットに対して、問題ないかのチェックができます。URLを入れて「PASS」と出れば問題ありません。

Google Search Console

Google Search Consoleの検索の中に「Accelerated Mobile Pages」というメニューがあります。対応してから数日後くらいから、インデックスされたAMPページ数とページエラーが確認できるようになります。

補足:エラーが大きく増えているタイミングがありますが、これはCSSの追加によるエラーです。特にチェックしてなかったら、AMPでは使えない「!important」を含んだコードを設定してしまっていました。

まとめ

AMPとAMP for WPという二つのプラグインを使って簡単にWrodPressのサイトをAMP対応する方法を紹介しました。

このページのAMP版も今回紹介したプラグインを入れた上で、いくつかのカスタマイズを加えてAMPに対応しています。AMP対応の土台として、かなり使える、という事は分かっていただけるのではないでしょうか。

これらのプラグインだけでも十分なサイトもあれば、使っているプラグインやデザインとの相性の問題でここからかなりの追加対応が必要になるサイトもあると思います。

AMPにきちんと対応すれば、サイトを訪れるユーザーのメリットは大きく、結果としてサイトの利益につながります。対応のためのハードルはやや高めなので、WordPressをいじる事が苦手な方はAMP対応しているテーマを利用する、というのがやはりオススメです。

AMPの対応は必須ではなく、やればいい事があるかも、程度の状況です。これからもっと便利なプラグインが出たりする可能性もありますので、状況を見ながらできるタイミング・方法で対応するのが良いと思います。

Pocket

スポンサーリンク


スポンサーリンク


関連記事

WordPressのAMPページでTable of Contents Plusをキレイに表示する方法... AMPに対応した時に、Table of Contents Plusで作成される目次をきれいにするための方法です。 目次を作成するためのプラグインとして、Tab...
WordPressのAMPページにパンくずを表示する方法... WordPressのAMPページにパンくずを表示する方法を紹介します。 AMPに対応するプラグインとしてAMP for WPを使っていて、パンくずを出すプラグ...
WordPressのバックアップはUpdraftPlusがオススメ!そのバックアップは簡単に復元でき... WordPressのバックアップのためのプラグインはBackWPupよりもUpdraftPlusをオススメします。オススメする一番の理由は、復元が非常に簡単な事...
WordPressを独自ドメインで立ち上げるためのメモ... 新規のサーバー契約、独自ドメイン取得、WordPressの設置まで、これまでに実施した主な対応の簡単なメモです。新規にサイトを立ち上げる方にとっては、このメモが...
PV数の報告はAdSenseの利用規約違反?他には何がダメなの?... PV数の報告はダメ、という事をたまに目をしますが、何でダメと言われているのでしょうか?根拠を探してみたので、他のAdSenseでNGとされている事項も合わせて、...
エックスサーバーの設定を変えてWordPressをたった5分で高速化... エックスサーバーはサーバーパネルから色々な設定を変更したりできますが、その一部の設定を変更するだけでサイトをいきなり高速化する事ができます。たった5分で出来てし...

ブログランキング参加中(クリックお願いします)

にほんブログ村 株ブログ インデックス投資へ

スポンサーリンク