2016.3.3

AMP を WordPress に実装してみる

AMP を WordPress に実装してみる

AMPってなに?と思った方もいると思います。Googleが2月25日から実装した「モバイルでのWebページの高速表示」のための機能です。Accelerated Mobile Pagesの頭文字をとってAMPとのことです。早速やってみようということで、このサイトにAMPを実装してみました。

Googleによれば、AMP対応をすることで、

AMPに対応したウェブページがモバイル Google 検索の結果上で見つけやすくなる。出典:モバイルウェブをもっと速く|Google Japan Blog

AMP のテクノロジーを利用しているウェブページは、従来に比べ平均 4 倍の速度で表示され、データ量も約 1/10 に抑えられるため、ほとんどのページが瞬時に表示されます。出典:モバイルウェブをもっと速く|Google Japan Blog

ということです。

これは早速やってみようということで、Wordpressの書く記事をプラグインを使って簡単にAMP化する方法を紹介します。

AMP 純正プラグインをWPにインストール

AMP化といえど、何をどうすればいいのというところからなのですが、心配ありませんでした。WordPressのプラグインにAMP対応のプラグインは準備されております。

その名もAMP

そのまんまです。WPのメニューから、プラグイン > 新規追加 へ進み、検索窓にAMPと入力して、Enterすると一番最初に出ています。

amp-plugin

今すぐインストールをクリックして、WordPress内にインストール。その後、有効化にします。詳細情報も見ておくと、結構重要な注意書きが2つありました。

注1: 固定ページとアーカイブには現在対応していません。

注2: このプラグインは AMP コンテンツ生成のみを行い、モバイル端末からの訪問者に対して自動的に表示を切り替えるものではありません。後者は Google 検索などの AMP コンシューマーによって処理されます。詳しくは AMP Project FAQ をご覧ください。

現段階(Ver 0.3.1)でAMP化されるのは、とりあえず投稿ページのみのようですし、AMP化されたページを自動で読みに行くというわけではありません。

ひと手間のワンクリック

プラグインのインストールと有効化だけでは正常に動かないようで、一度、WPのメニューから、設定 > パーマリンク設定 へ進み、何も変更を加えずに変更を保存ボタンをクリックして、パーマリンクのリフレッシュを行うといいようです。

作業はたったこれだけです。所要時間は15分程度で、あっさりできちゃいました。

どんなやって表示すればいいのか、表示されるのか

まずAMP化されたページをどのようにして表示させるかですが、これも簡単です。AMP化したページのURLの末尾に、/amp/ もしくは ?amp=1 を付加してURLを開けば、AMP化された自分の書いた記事が表示されます。

例えば、このページの場合、
通常通りの表示: http://zakki-nikki.net/amp-implement-wordpress/
AMP化した表示: http://zakki-nikki.net/amp-implement-wordpress/amp/
もしくは http://zakki-nikki.net/amp-implement-wordpress/?amp=1
を開いてみてください。そうすれば、AMP化は完了です。おおまかな工程はこの2つだけで超シンプルにAMPに対応することができました。

検索結果への反映は、Googleeのクロールや順位付けによって変わってくるのかなと思います。そこはGoogle大先生にお任せするしかございません。

私が思うAMP

モバイル検索によるページ表示スピードが速くなることはすごくいいと思います。あとはコンテンツとの相性によって、AMPバンザイ!になるか、厄介なやつめのどちらかになると思います。ニュース系サイトなどは非常に相性のいいものだと思います。Wikipediaなどもこれだと、関連する項目も合わせて読んでしまって、いつの間にか3時間経った。など時間を忘れてしまいそうです。

逆に通販サイトとかは商品ページをAMP対応の為にも整形を行い、かつ上位表示に持っていくための施策を打つと想定できて、けっこうきついものがあるのかなぁとも思っています。その分やりがいもあるのかなと思います。

表示のされ方は、今のところデフォルトですと、青っぽいイメージで表示されていますが、ちょっと調べると、AMP用でCSSとかを編集できるプラグインがあるみたいなので、

もう少し掘り下げて調べて、またここに投稿できればいいなぁと思います。

 

カテゴリ : Web

タグ :

雑記日記 zakki-nikki.net all rights reserved.