AMPって最近よく聞くけどなんなの？であったり、AMPってどうやったら使えるの？というところにこの記事で答えたい。

 

そもそもAMP（Accelerated Mobile Pages）ってなに？

AMPとはAccelerated Mobile Pagesの略。モバイル端末でのWebサイト表示の高速化を目指して主にGoogleが推し進めているプロジェクトだ。

通信速度が遅い地域でもWeb上のコンテンツ（ブログやメディアの記事など）をストレスなく見ることができるよう、コンテンツのぜい肉を削ぎ落としてモバイルへ配信するのがAMPの仕組み。

通信速度が遅い地域というと、例えば観光地のWi-Fiがしょっぱい速度だったりする。そんな地域で問題なくコンテンツを見るためには通信速度を上げるかコンテンツのサイズを落とさなければいけない。通信速度というハード面の対応はお金と時間が掛かるからコンテンツサイズというソフト面で対応しようということだ。

 

WordPressにAMPを導入する方法 ~AMPプラグイン~

WordPressサイトにAMPを導入する方法を紹介しよう。といってもAMP用のプラグインを入れるだけでいいのでとってもお手軽だ。

 

まずはプラグイン『AMP』を検索してインストールする。プラグインページから直接取得しても良い。

AMP ― WordPress Plugins

インストールが終わったらプラグインを有効化しよう。

 

WordPressにAMPを導入した後の注意点

ここからはAMPプラグインを入れた後のお話。場合によってはプラグインを有効化しただけでいいのだけれど、念のためにAMPページを見て確認しておきたいのと、AMPエラーになるケースを潰しておこう。

 

AMPページのテキストと画像が正しく表示されているかを確認する Check!

AMPページには各記事のURLに『/amp/』を付ければアクセスできる。AMP版でテキストや画像に欠けがないか確認しておこう。オリジナルのHTMLに不具合があれば正しく表示されていないものがあるはずだ。いい機会なので直してしまおう。

 

Facebookのシェアボタンを設置している場合

コンテンツ内にFacebookのシェアボタンを設置している人は要注意だ。XFBMLを使ったシェアボタンはAMPエラーとなってしまう。（禁止されているタグ: like なるエラー）

これを回避するため、シェアボタンを他の方法で記述するようにしよう。その方法は設置方法によって変わるけれど、一例としてWP Social Bookmarking Lightというプラグインを使ってボタンを設置している場合はこの項目をいじれば良い。

 

AdSenseなど広告を設置している場合

記事中にAdSenseなどの広告を貼ることはよくあるケースだ。だが、AMPページではJavascriptの実行が禁止されているからそれら広告が表示されなくなってしまう。

AMPは広告用に amp-ad 要素を用意してこれに対応した。ここではAdsense広告をAMP化した場合を見てみよう。

広告の幅と高さ(widthとheight）を決め、typeに adsense を設定する。そしてdata-ad-clientとdata-ad-slotにAdSenseで取得したコードを設定すればAMPページでもAdSense広告が表示されるようになる。

その他の広告への対応方法はこちらのページを参照されたい。

amphtml/amp-ad

 

Search Consoleのメッセージに注意する。

もしAMPページにエラーがある場合、Search Consoleの『Accelerated Mobile Pages』で教えてくれるから逐次対応していこう。

エラーのあるページの具体的にどこがおかしいかもこのページからチェックできる。上の画像のエラー項目をクリックし、次に表示されるページのどれかをクリックしよう。すると詳しい情報が表示されるので『ページを開く』からページを開こう。

ページを開いてコンソール画面を開くと詳細なエラー内容が表示されているので参考にして修正しよう。※Chromeならページ上で右クリック→検証→Console

なお、amp版のURLに#development=1を付けても同じ。例えば http://some.com/post1/amp/ なるURLなら、http://some.com/post1/amp/#development=1 と入力すればいい。

 

 

Amazonで大人気のコンテンツマーケティングの参考書