iscle [イズクル] - あなたの生活に役立つネタを!

AMP用ページを超簡単に作成するWPプラグインの組み合わせ

竹中文人
執筆者:
[最終更新日]2016/10/17
[カテゴリ]Wordpress

WordPressのブログをAMP対応させるプラグイン

あなたのwebサイトはもうAMP(アンプ)に対応してありますか?

Googleが力を入れているAMP。以前まではトップニュースなど一部のスペースでしかAMP用ページが表示されていませんでした。しかし現在では通常のモバイル検索においてもAMP用ページが表示される割合が多くなりました(日本のGoogle検索においても今後そのようになってくるはず)。

「AMP対応なんて大手ニュースサイトだけで十分でしょ!」と思われていた方も多いでしょうが、一般のブログサイトであったとしても対応しているところが増えてきました。当サイトも初期の頃からAMP用ページが作成されるように対応していますが、Google検索からAMP用ページへアクセスされる割合も少しずつ増えています。全てのサイトで対応する必要はまだ無いかもしれませんが、ニュースサイトやブログサイトなどは対応に前向きになった方が良いでしょう。

ただ、AMP対応させるには一定のルールがあります。1ページ毎にAMP用ページを作成するのは現実的ではないため、通常はプラグイン等のツールを使うことになります。ブログサービスなどを利用している場合は、そのブログサービスがAMPに対応してくれないと難しいでしょう。(現時点で、有料の「はてなブログPro」を使用しているユーザーはベータ版として対応させることができるようです。)

WordPressであればプラグインで簡単にAMP用ページを自動で作成させることができます。AMPが出てきた当初は、プラグインも不完全でかなり手を加えなければなりませんでした。当サイトでもコピペ用のコードを公開したりしていましたが、今はプラグインの組み合わせで超簡単にAMPに対応させることが可能です。

プラグインで簡単にAMPに対応させよう!

2つのプラグインを併用することで、簡単にAMPに対応させることが可能です。そのプラグインとは次の2つです。

  • AMP(作者:Automattic)
  • Facebook Instant Articles & Google AMP Pages by PageFrog(作者:PageFrog Team)

まずプラグインの新規追加から上記の2つをインストール&有効化してください。
amp-plugin-01

有効化するとMobile Formatsというメニューが追加されますので、その中のStylingを選択してください。初期状態で何も問題はありませんが、ロゴを変更しておくと良いかなと思います。
amp-plugin-02

これだけでAMP用ページが自動で作成されます!通常のURLの末尾に「?amp」もしくは「/amp」を付けてアクセスしてみてください。どのようにAMP用ページが表示されるか確認ができます。

念のため下記Googleのテストページで問題がないか確認してください。
AMPテスト

「有効なAMPページです」と表示されればOK!
有効なAMPページです

スポンサーリンク

アナリティクスとアドセンス

AMP用ページはモバイルページとは別のページが作成されるわけですから、別途Googleアナリティクス等のアクセス解析やアドセンス等の広告を設置しなくてはなりません。しかし、アクセス解析や広告コードもAMPのルールに従った記述方法でないとダメだといういうことにご注意ください。

面倒だと思われるかもしれませんが、このプラグインを使用している場合は設定が超簡単!

アナリティクスの設定

Mobile FormatsAnalyticsから[GOOGLE ANALYTICS]をクリックします。
アナリティクスの設定

Sign in with Googleボタンからアナリティクスを利用しているGoogleアカウントにログインをし、リクエストを許可してください。
amp-plugin-05

既にアナリティクスで作成済みのサイトの情報が表示されるので、AMP化したサイトを選択します。
amp-plugin-06

またEnable Integrationボタンもクリックして有効にしてください。
amp-plugin-07

アドセンス広告の設置

次はアドセンス広告を設置してみましょう。Mobile FormatsAdsからSign in with Googleボタンをクリックしてアドセンスを利用しているGoogleアカウントにログインします。
アドセンスを設置

アカウントを選択したら既に作成済みの広告ユニットが表示されますので、表示させたい広告ユニットを選択してください。
amp-plugin-09

「Enable Google AdSense for AMP HTML Pages」にチェックを入れれば広告が表示されるようになります。「Ad Placement」は何ワード毎に広告を挿入するかという設定です。初期状態のままで問題ないと思います。
amp-plugin-10

最後に画面右下のSave All Settingsボタンをクリックして完了です。アナリティクスもアドセンスも設定がとても簡単でしたね!