「Simplicity」でAMP機能を簡単導入する方法

最近スマートフォンで調べ事をしているとAMP対応の記事を見かける機会が多くなったような気がします。そのようなことからAMPを導入すればアクセスアップにつながると感じていましたが、難しいイメージがあり忙しいのと重なってなかなか手をつけられずにいました。

AMP(アンプ)はAccelerated Mobile Pagesの頭文字をとったもので、Googleが推し進めるプロジェクトです。モバイルページを高速表示させるためのプロジェクトで、スマートフォンの検索結果にAMPと表示されている記事がAMPに対応したものになります。

実際にAMPを導入した記事を見てみると、10％前後のアクセスアップにつながったということもあるそうですし「常時SSL化されたサイトを優先的にインデックスする」とGoogleが発表したことに続き、このAMPもそのうち重要な立ち位置になってくるのも時間の問題のような気がします。

関連記事 : wpXついにSSL対応！早速常時SSL化してみました

ということでAMPを実装してみたのでその手順を紹介したいと思います。

AMPの導入方法

AMPは「AMP HTML」「AMP JS」「Google AMP Cache」の3つの要素で構成されています。といってもこういった類に詳しくなければあまりよくわからず、自分の手で1からAMPを導入するのは難易度が高い話になるのでしょう。この時点で自力でAMPを導入するという選択肢は消えました。

すでにAMPを導入している運営者はどのようにして導入したのでしょうか。

ちなみにはてなブログProであれば管理画面からボタン1つで簡単に導入できるそうですし、WordPressではAMPを導入するためのプラグインが公式にあります。

当サイトもWordPressで運営しているのでAMPのプラグインでAMPを導入するという方法が浮上してきますが、実際にAMPプラグインでAMPを導入したサイトの記事を見てみるとプラグインを入れただけでそう簡単にうまくいくものでもないようです。

AMPはまだ比較的新しい技術ですからエラーになる可能性があるのはもちろんのこと、ページのデザインが崩れてしまうこともあります。

また、このAMPプラグインを導入するとAMPページからのアクセスをカウントしないので修正を加える必要があります。アドセンスも表示されないみたいなので修正が必要でしょう。

「Simplicity」AMPを導入する方法

こういった理由から手間がかかりそうだったので、AMPの導入は保留していたのですが当サイトが利用している無料テーマ「Simplicity2」でAMPが対応されたとのことなのでこの機会にSimplicityからAMPを導入してみることにしました。

Simplicity2.3.1のバージョンからAMPに対応しているそうですが、当サイトのバージョンはSimplicity2.2.0です。

Simplicityのダウンロードページを見てみましょう。現在の開発版のバージョンが2.5.3ですが、開発版だとやはり不安もありますので安定板の2.5.0をダウンロードすることに。

早速WordPressの管理画面からダウンロードしてきた安定板2.5.0にバージョンアップさせます。

カスタマイザー機能を見てみましょう。すると「AMP (β機能)」という項目がありました。おそらくここからAMPを設定するのでしょう。

Simplicityのカスタマイザー機能からAMPプラグインを使わず簡単にAMPを導入できるようですが、まだβ版というのもありますし導入する上で気を付けたいことなど調べてから導入したいのでSimplicity公式のヘルプ記事を見てみましょう。

まずSimplicityで、AMP機能を利用するには、テーマカスタマイザーで機能を有効にする必要があります。

WordPress管理画面から「外観 → カスタマイズ」を選択してください。あとは「AMP」項目にある「AMPの有効化」にチェックを入れてください。

Simplicityは、これだけでAMPが利用できるようになります。機能を有効化することによって、投稿ページに対してAMPページが作成されます。固定ページではAMPページは作成されないのでご注意ください。

現在のところこの「AMP機能」はβ機能となるため、多少の不具合が出る可能性があるのでご了承ください。

出典 : SimplicityのAMP機能の使い方。カスタマイズ方法など。 | Simplicity

β版なので多少の不具合が出る可能性があるようですが、それは致し方ないところでしょう。それ以上にAMPを導入したことによる効果を期待してしまいます。

あと固定ページではAMPページに対応しないようです。投稿ページにAMPページが作成されるという仕組みですね。

SNSや動画コンテンツなどの埋め込み

気になるのがSNSや動画コンテンツの埋め込みです。当サイトではTwitterのつぶやきやYouTube動画を記事に埋め込むことがありますが、このような場合にAMPページでは対応しているのかどうかということです。

ちなみにSimplicityのカスタマイザー機能でAMPを導入した場合は以下のサービス埋め込みの動作は確認できているそうです。

Twitter
Instagram
YouTube
Vine
Facebook動画
Googleマップ

幅と高さを指定していないとエラーになる場合があるそうですが、これは後で確認してエラーになるようだったら対応するというスタンスでOKでしょう。

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

そして一番気になるのがアナリティクスとアドセンスへの対応はどうするのかという問題です。AMPを簡単に導入できるというのはいいとして、アクセス数の測定とアドセンス広告が表示されないということを考えるとこれは絶対に対応させておくべきことでしょう。

Simplicityのヘルプページを見てみましょう。

以下のサービスに対応しています。

Google Analytics

Google AdSense

Analyticsでの計測、AdSenseに対応しています。
Analyticsについては、Simplicityのテーマカスタマイザーで設定した値が利用されます。

アナリティクスはカスタマイザーから設定していればそのトラッキングIDの値がAMPで利用されるようです。当サイトは直接トラッキングIDを書き込んでいたのでこれを消して、カスタマーザーから設定し直しました。

アドセンスはウィジェットの「広告 300×250」で設定している場合はそのままでも問題ないようですが、当サイトは「広告 300×250」から広告設定していないのでそこは別で対応する必要があるのでしょう。

SimplicityでAMPを導入した際のアドセンス設定については別記事で紹介したいと思います。

ブログパーツは？

AMPを導入する前にもう1つ確認しておきたいことがあります。Amazonアソシエイトや楽天アフィリエイトなどのブログパーツです。

当サイトはカエレバやたまにヨメレバを使用していますがブログパーツも大事な要素なので対応状況を把握したいところです。こちらもSimplicityのヘルプページを見てみましょう。

以下のブログパーツのスタイルをSimplicity側で設定しています。

カエレバ
ヨメレバ
BabyLink
Amazon商品リンク（Amazonアソシエイト）
Amazon JSプラグイン
アプリーチ
カイモモ

AMPの制約により、style属性を全て除去しています。

ですので、style属性などでスタイルしてあるブログパーツなどの表示が崩れる必要があります。ただ、上記のブログパーツの場合、Simplicityが指定したスタイルが適用してあります。

例えば、カエレバの場合はこんな感じ。

こちらもしっかり対応済みとのことで、それほど心配することはないかと。

「CSS」AMPページのデザイン

AMPページのデザインも気になります。AMPをプラグインで導入した例を見てみるとAMPページでは通常ページのレイアウトが引き継がれなく簡素なものになるというではありませんか。

AMPページは高速化に特化した技術ですし、実際に超高速でページを表示してくれますからそれは仕方のないことともいえますが、できればAMPページのデザインにもこだわりたいところ。

Simplicityではその部分にも対応しているようで、子テーマのフォルダ直下に「amp.css」を作成すればAMPページ用のCSSを編集できるようになるようです。ただしこれは自分で作成しなくとも、「amp.css」が同胞された子テーマ「simplicity2-child 20161002」をダウンロードすれば使用できるようです。

子テーマダウンロードページ → https://wp-simplicity.com/downloads/child-theme2/

CSSではなくテンプレートファイルに書き込む場合は「single-amp.php」を編集すればAMPページに変更を加えることができます。

「Simplicity」AMPを導入

一通り確認したところで実際にSimplicity(バージョン2.3.1以降～)のカスタマイザー機能からAMPを導入してみましょう。
先ほどのようにカスタマイザー機能から「AMP (β機能)」を選択します。ここで早速有効化しておきたいところですが、下の方にちょっとした設定項目があるのでそちらを見てみましょう。
「AMPと通常ページ間の移動リンクを表示」「AMPテストリンクを表示」という項目がありますが、初期値から有効化されています。これらはどのような機能なのでしょうか。

これは管理者が通常ページとAMPページの比較を行うための機能のようです。これは初期値のままで問題ないでしょう。