WordPressをAMP HTML対応にしてみた~AMPプラグイン使用~

AMP(Accelerated Mobile Pages)とは

AMP(Accelerated Mobile Pages)とは、Googleがモバイルページを高速表示させることを目的として立ち上げたプロジェクトで、AMP仕様に従ってモバイルページを作成すれば、Google検索結果からアクセスされたとき、ページが高速表示されます。また、いずれSEO優位になるかもしれないということで、試しておきたいところでした。

AMP仕様のガイドラインは下記となります。また、Googleウェブマスターのメニューにいつの間にかAMPのメニューが追加されているので、そこからガイドラインに移動してもいいですね。

Google Search guidelines for AMP pages
amp1

AMPプラグインをインストール

WordPressサイトをAMP HTML対応するには、プラグインを使うか、自作するかなどあります。今回は楽をしたいのでプラグインを導入する方法をとってみたいと思います。

WordPressプラグイン新規追加の画面で「AMP」と検索すれば出てきます。

amp2

このプラグインをインストールして有効化すれば導入は完了です。簡単ですね。

この状態で、スマホでサイトの投稿記事を開きます。もし記事URLの後ろがディレクトリ形式で終わっているなら「amp」または「/amp」を付けます。URLパラメータで終わるパーマリンクの形式であれば「&amp=1」を付けます。すると、以下のように投稿記事がシンプルな見た目になって表示されます。

Screenshot_2016-05-12-22-18-10

とはいえ、AMPプラグインをインストールしただけではサイトとして使い物になりません。ですので、ある程度のカスタマイズは必要になります。「Facebook Instant Articles & Google AMP Pages by PageFrog」というプラグインを使えば簡単にロゴやスタイルの変更ができたり、Google Analyticsとの連携や広告表示などができるそうなのですが、最新のWordpress(4.5.2)との互換性がまだテストされていないようなので、いったんそのプラグインを使うのは止め、AMPプラグインをカスタマイズしてそのあたりを対応してみようかと思います。

サイトアイコンを変える

AMPプラグインのカスタマイズ方法がGitHubに公開されています。その内容のうち、自分のサイトで最初に直しておきたいところを実際やってみます。

GitHub – Automattic/amp-wp: WordPress plugin for adding AMP support

最初はサイトアイコンを変えてみます。下記のコードをfunctions.phpに追記します。

すると、下記のようになり、AMPページのみサイトアイコンが変わりました。

Screenshot_2016-05-12-22-35-20

CSSを変更する

AMPプラグインを入れただけの状態のとき、サイトアイコンが円形になっていました。たいていのサイトはサイトアイコンをそのまま表示させたいでしょうから、余計なCSSは戻したいですよね。その場合はfunctions.phpに以下のコードを追記します。

これで円形ではなくなりました。参考ページでは、AMPページのヘッダーにあるロゴテキストのリンクを、ロゴ画像に変換する方法が書かれています。

また、ヘッダーナビの背景は以下のように変えます。

投稿者のアバター画像を消す

現在、サイトで出していない記事投稿者のアバター画像も出てしまっているので、削除します。

AMPプラグインには記事のメタ情報に対してそれぞれテンプレートPHPを用意し、プラグインインストール先の「amp/templates/single.php」で表示しています。メタ情報ごと不要であればそちらを編集すればいいと思いますが、今回はアバター画像だけ消したいので、メタ情報のテンプレートを修正します。

投稿者に関するテンプレートは「amp/templates/meta-author.php」です。その3行目のアバター画像のURLが設定されているかどうかのif条件式に「false && 」を追加して、強制的に非表示にします。

Google Analyticsとの連携

一応、パッと見た感じのデザインは取り繕ったので、次はアクセス解析用にGoogle Analyticsとの連携をします。

AMPプラグインではGoogle Analytics以外の解析ツールとも連携できるようですが、まずはGoogle Analyticsとの連携だけを考えます。下記のコードをfunctions.phpに追記します。

これでGoogle Analyticsに、AMPページのURLが記録されるようになるはずです。

現在のAMPページはこんな状態です。

Screenshot_2016-05-12-23-52-36

こういった感じで試していこうと思っています。ただ、カスタマイズを間違えるとGoogleにAMPページと認識されない可能性があります。次回以降のどこかでやりますが、構造化チェックツールなどでエラーがないかチェックした方がよいでしょう。

広告
  • LINEで送る