WordPrssにAMPを導入して最適化する方法

Google for WordPress Publisher tại HCM に参加し、AMP に感銘を受けたのでこのWebサイトもAMP化しました。
AMP の導入方法やハマったことを共有したいと思います。
また、AMP でのGoogle アナリティクスの設定&Google AdSense の設定も共有したいと思います。


AMP とは

AMP は Accelerated Mobile Pages(モバイルページの高速化) の略名で「アンプ」と言います。
Google が推進しているモバイル ページを高速に表示(読み込み)させるためWebコンポーネント フレームワーク(規定内での作成手法)です。
AMP にするとモバイル ページだけでなく、PC ページの高速化できます。

詳しいことはいつか記事化したいと思いますので概要だけにしています。

AMP 導入のタイミング

AMP を導入するならWebサイトを立ち上げる前の企画段階か、立ち上げてすぐの段階がおすすめです。
なぜかというと、AMPはWebサイトを高速読み込み(表示)するためにいくつかの制限があります。主にJavaScript の制限です。
ある程度規模が大きくなった段階でAMP を導入するとデザインやプラグインの変更で非常に時間がかかり、検証にも大変です。そのため、Webサイトを立ち上げる前の企画段階か、立ち上げてすぐの段階 でAMP を導入すると運用が楽になります。

規模が大きいWebサイト がAMP 導入をすすめていない訳ないです。CNNや朝日新聞やAmebaやGIZMODO もAMP を導入されています。
AMP は高速読み込みするのでSEO の向上やユーザービリティがいいのでAMP 化したときはパフォーマンスが高くなると思います。

AMP の導入方法

AMP を導入する方法はこの3つかと思います。

  1. AMP に対応しているテーマを導入する。
  2. AMP に対応していないテーマをAMP 設定を施す。
  3. テーマをAMP に合わせてフルスクラッチする。

1. AMP に対応しているテーマを導入

Googler 曰くは「自分でオリジナル テーマを作成するが良いが、手間と時間がかかるのでAMP に対応しているテーマを導入するのが良い」とのことです。AMP に対応しているテーマ は基本的には有料版が多いです。購入するのが一番いいと思いますが何も試してないのにコストを掛けるのは立ち止まってしまうと思いますが、手間が少なく高品質なのでおすすめです。

2. AMP に対応していないテーマをAMP を施す

AMP を対応していないテーマに手を加えて、AMP化を行うことです。カスタマイズ化です。
ここは「テーマをカスタマイズし、AMP に合わせる」「AMP 規格に適しているテーマにAMP プラグインを導入」の2つの方法があると思います。前者はテーマの規格とAMPの知識が必要で辛いですが、フルスクラッチするよりマシかと思いますがテーマのバージョンアップが来たらやり直しなおので辛いことには関わりないです。後者はある程度の知識があればできると思いますが、テーマの見極めが必要なので時間がかかると思います。これは無料でできる事が多いです。

3. テーマをAMP に合わせてフルスクラッチ

なければ作ればいいじゃないということで、テーマを自作することです。デザインはピッタリ合うので時間と手間を掛かってもいいなら有りだと思います。予算が豊富なら外部に依頼するというのも有りだともいます。ただ、AMP が発展中でバージョンアップがある合わせてテーマもそのバージョンアップに適さないと効果が発揮できないので管理というコストが上乗せになります。資金とリソースが使える企業やブログだけで生活しているブロガー向けだと思います。または技術変態とかはあっているかと思います。

私が選んだのは綾鷹でした。

このWebサイトでは「1 と2 」を使用しています。意味がわからないと思うので説明させてください。

使用しているテーマは「LION Media 」です。 このLION Media にはAMP 対応に対応しておりますが少し仕様がややこしいのでプラグイン AMP(旧名:AMP for WordPress) を導入してAMP 化しています。

LION Media はAMP の規格にあっているがAMP 機能をOFF する。プラグイン AMP を使ってAMP 化 しているという事です。

1 というよりも、2 にとても近いです。

導入方法

たった2ステップです

  1. テーマを「LION Media」に設定する。
  2. プラグイン「AMP」を新規追加し、Website Modeを「Standard」に変更する。

あとはAMP 化しているかを確認するために「AMP テスト」でURLをテストして問題なければ終わりです。
AMP テストを行われるなら「Homepage」「記事」ページの2つを試しておいてください。

AMP に適していると「有効な AMP ページ」と表示される。

その他カテゴリの最新記事