AMPとは、「Accelerated Mobile Pages」の略で、モバイルでページを高速に表示させる手段。モバイルユーザーのUX向上を目的として、Googleが中心となって立ち上げたオープンソースプロジェクトです。
高速表示させることで、Googleが掲げているモバイルファーストインデックスにのっとっており、ユーザーの満足度があがることで検索結果の上位表示に繋がり、SEOに効果的と言われています。
また、AMP対応しておくと、検索結果表示において、関連度の高いAMPページはカルーセルで画像つき表示されるようになっています。
スマホで検索していると、雷のマークが表示されているサイトを見たことがあるかもしれません。それがAMP対応しているページです。
AMPを実装させるには、仕様に沿ったHTMLファイルを記述し、設定する必要があります。
今回は、WordpressでAMP対応する方法について書きます。
方法は2つ。
■プラグインを導入する方法
■AMP対応テーマを利用する方法
■プラグインを導入する方法
AMP対応のプラグインは色々ありますが、ここでご紹介ものは「AMP」です。
AMPプロジェクト公式サポートページで紹介されているため、AMPのプロジェクトが推奨するプラグインであると言えますし、自動でAMP仕様に沿ったページを自動生成してくれます。
AMP
https://ja.wordpress.org/plugins/amp/
ですが、AMPページは出来る限り表示速度を高めるために、必要のない要因を取り除いたシンプルなページ構成になっているので、通常ページのデザインと異なるし、大きく崩れてしまう、という可能性があるため、AMPページ用のcssを書く必要があります。
AMP対応のページにするためには、使用できないHTMLタグが数多くあります。
例えば画像を表す＜img＞タグは「amp-img」のように、AMP HTMLの書式に沿ってHTMLを記述しなければいけません。
このように、
自分でHTML、CSS、PHPなどのプログラムを書けなければ、AMP対応の綺麗なページを作成することは難しいと言えます。
■AMP対応テーマを利用する方法
前述したような問題を解決してくれるのが、AMP対応のテーマです。
AMP対応のテーマの場合、あらかじめAMP用のデザインが用意されていたり、AMP表示の際だけ自動的に記事内のHTMLタグをAMP用に置換してくれたりするようになっています。
自分でデザインしなくてもAMPページのデザインは通常のページとほとんど同じになります。
こちらもテーマは色々ありますが、ここでご紹介するのは「LION MEDIA」というテーマです。
同じ開発元が提供するテンプレートで、「LION BLOG」というテーマもあります。
「LION BLOG」はブログ向け、「LION MEDIA」はメディア向けいうことで、若干、デザイン（見た目）異なりますが、基本的な機能や性能はほとんど同じ。
ありがたいことに、既に、子テーマもありDLできます。
「LION MEDIA」メディアサイト向けWP無料テーマ
http://lionmedia.fit-jp.com/
今日はざっくりですが、AMPについて・AMP導入の方法について書きました。
次回は、導入後の確認作業について書きたい思います。