WordPressで作成したサイトを、プラグインでサクッとAMP対応してみた

16148632108_2d32177b0f_b

Googleやtwitterが推進している「AMP」。

Web界隈の方であればもちろん聞いたことがあると思いますし、将来的には無視して通れないと思います。

ですが少なくとも現時点ではSEO等のへの影響は限定的です(たぶん)。

 

まずはAMPとは何かという話ですが、公式サイトが一番わかりやすいと思います。

ざっくりいうと、scriptやcss、画像やフォントを最適化し、なおかつキャッシュして爆速でWebページを表示するというもの。

きっかけはわかりませんが、twitter界隈で早い早いと少し話題になっていたので、このブログもAMPに対応してみることにしました。

ただし費用(労力)対効果が不透明なので、プラグインでサクッと対応することにします。

以下のページを参考にさせて頂きました。

 

やり方は、WordPressの公式プラグイン「AMP」をインストールして、有効化するだけ。

以上で完了です。

設定項目などはありません。

バージョン0.4.2ですから、あくまでもベータ版、不具合があってもご愛嬌、という方だけにオススメします。

 

さっそく見てみることにしましょう。

▼通常のスマホビュー

screenshot_20161117-115641

 

▼AMP版スマホビュー

screenshot_20161117-115727

 

おお…非常にシンプルです。

そしてフォントもイマイチ。

ヘッダーも簡素化されています。

 

▼通常のスマホビューでの広告表示。

screenshot_20161117-115653

 

▼スマホ版での広告表示。というか表示されません。

screenshot_20161117-115735

 

またcssも非常に簡素化されるため、自分でカスタマイズした表示などは全て無効になります。

 

▼通常のスマホビューでのリンク表示

screenshot_20161117-115700

 

▼AMP版でのリンク表示

screenshot_20161117-115743

 

まあ読めなくはないですが、本当に最低限の表示になります。

そして何よりも、頑張ってカスタマイズしたのに…感が切ないです。

 

▼カエレバのリンクもこの通り。

screenshot_20161117-115748

 

というわけで、一応のAMP対応は出来ました。

繰り返しますが、現状ではAMP対応の旨味はまだまだ未知数ですので、プラグインのインストールだけで簡単に済ませたものです。

設定はそのままにしてありますので、このブログでも、各ページのURLの最後に/ampを付けるとAMP版を表示することが可能です

 

ちなみにウェブマスターツールで構造化データを解析してみると、AMP版のソースやcssの中身を見ることが可能です。

とりあえずエラーは無いようです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-17-12-12-16

 

以上、オススメするものではありませんが、こういうことも出来るよ、という感じです。

将来的にはAMP対応がもっと重要になってきそうですが、現状は様子見です。

 

というわけで今回は以上!

 
photo credit: Neo Love 132/365 via photopin (license)
 

▼良質な情報を提供するのが一番のSEO対策だとは思います。