検索結果にイナズママークがついているサイトはスマートフォン向けに軽くしてあるページです。スマホで検索しているときイナズママークがついていると、つい優先してみてしまうのですが、WordPress はプラグインを入れると投稿ページをAMP対応にすることができるので便利です。
91dc6163d42aff76a418987414d5aedb_s

AMP誕生の背景

日増しにWebサイトが複雑怪奇になっている今日このごろ。スタイルシートはどんどん長くなるし、HTMLだけの静的サイトも最近ではほとんど見かけなくなって、Webサイトは重くなる一方です。そんな中、Google様が立ち上がってたんですね。今から１年前にAMPプロジェクトが発足して、検索エンジンにも採用され始めたとか。それが「AMPプロジェクト」です。

AMPプロジェクトとは

AMPプロジェクトとは、簡単に言えば、スマートフォン向けの軽いサイトを実現させるためのお約束みたいなもの。

今やWebサイトへの訪問はPCからよりスマホからの方が多くなってしまっていて、Webサイトを作る時にはスマートフォンからのアクセスも考慮して作らなければなりません。PC用とスマートフォン用のサイトを作れば制作コストは２倍になってしまいます。

そこで一つのWebサイトを、端末の画面サイズによって、デザインを自動で切り替わるようにした「レスポンシブデザイン」なるものが考案され広く普及しています。でも、そのお陰で長ーいスタイルシートを書かなければならなかったり、長すぎて直すのに時間がかかるので複数のファイルに分けて読み込ませたりしなければならず、スマートじゃなかった。なのでGoogle様は気に入ってなかったらしいです。

AMPでは、これやっちゃダメっていうのをはっきりさせて、その約束を守ったらマークをつけてあげる、というもの。マークがついているサイトは検索でも上位に来るように優遇するし、スマホユーザーは、マークがついていれば読み込み速度の速いサイトという保証があるので積極的にアクセスしてくれる。だから、みんなが軽いサイトを作るようになるでしょう、というもの。

WordPress で AMPを導入するには

えっ、じゃあAMP用のサイトを作らなきゃならないの？って思うと大変な感じがしますが、大規模サイトならともかく個人のブログじゃそんなの無理ですよね。WordPress なら無料のプラグインがあるので、お手軽に導入できます。まだ色々固まってないみたいですが、保険みたいな感じで入れとくと良いかも。

ダッシュボードのプラグインで「AMP」を検索

プラグインはダッシュボードから入れられます。プラグインメニューで「新規追加」を選び、「AMP」を検索すると表示されますので、インストールして有効化すればＯＫです。とっても簡単ですね。（WordPress のバージョンによってはWordPress が壊れるなどの被害があるかもしれませんので、バックアップをとるなどインストールは慎重にお願いします）

AMPをインストール

インストールしたらパーマリンクを更新

設定は特に必要ないですが、パーマリンクを更新させた方が良いそうです。設定メニューの「パーマリンク」で何も設定は変更せず「更新」ボタンをクリックします。

参考サイト WordPressのプラグインでブログをAMP対応にしてみた

パーマリンクを更新

投稿ページ（single.php）だけに反映されるらしいです。ブログの適当なページを表示させてみます。この時点では何も変化なし。

普通の投稿ページ

アドレスにAMPをつけるとAMPページが表示される

投稿ページのアドレスの末尾に「amp/」をつけるとAMPページが表示されます。スタイルがなくなって超シンプルなページになりました。

AMP対応の投稿ページ

AMPページをもうちょっと何とかしたい

自動で生成されるのは便利ですが、それにしてもデザインがイマイチ過ぎだし機能も減っちゃっているみたい、と思った場合はプラグインの中のテンプレートをいじれば見栄え良くすることもできるみたいです。テンプレートの場所はこちら

wp-content/plugins/amp/templates

↓こちらのサイトにAMPサイトのデザイン修正方法が詳しく載っていました。
参考サイト WordPressをマジメにAMP（Accelerated Mobile Pages）対応させた話