AMPと導入方法の紹介

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導入の方法について書きました。

次回は、導入後の確認作業について書きたい思います。

———————————————————–
一般社団法人日本経営士会経営士
中小企業庁ミラサポ専門家
ウェブ解析士マスター
3級色彩コーディネーター
Webデザイナー検定エキスパート
CS試験ワープロ部門2級・表計算部門3級
全商簿記検定1級
———————————————————–
ビジネスサポート香川
———————————————————–
株式会社ビットコミュニケーションズ
TEL:087-848-9855 FAX:087-848-9856
高松市十川西町171-4(事務所) 
———————————————————–

シェアする

フォローする