サイトアイコン JTM-有限会社ジェイティエム[WEB DESIGN]

【wordpress】サイトをAMP化してみました

このサイトは、wordpressで構築・運営していますが、世の中にはwordpressを便利にする沢山のプラグインが存在しています。

このウェブサイトでもいくつかプラグインを導入していますが、そんな中でも最近導入してみた「AMP化プラグイン」について少し紹介してみたいと思います。

 

AMPってなに?

Accelerated Mobile Pagesの略

アクセラレーテッド モバイル ページズ??

調べてみるとモバイル(今で言うスマホ)用に高速に表示できるページのことを言うようです。

Googleでも推奨している仕組みでSEO的にも有利になるのかもしれません。

日本ではスマホでも高速なパケット通信が可能ですが、高速通信ができない国や地域ではできるだけ軽量化されたウェブページがありがたい。

高速表示にするためにはページを構成する画像や動作制御するプログラムなどを最小限にすることで高速表示を実現します。

AMP化すると軽量かつ高速なウェブページができるというわけです。

見た目はとても簡素なページになりますが。

 

まずはAMP化してみる

WordPressの場合、AMP for WordPressというプラグインがあるので、簡単に導入できます。

 

インストールして、有効化するだけでWordPressの記事ページがAMP化されます。

例えばこのページをAMPで表示させると

↓こんなURLが出来上がります。

https://www.jtm.gr.jp/technote/wordpress/amp_for_wordpress/amp/

だいぶ簡素なページですね。

 

通常のURLは

https://www.jtm.gr.jp/technote/wordpress/amp_for_wordpress/

もとがシンプルデザイなので違いがわかりにくい。。。

URLの末尾に/amp/をつけたページがAMPページとなります。

 

HTMLソースコード内では、

canonicalタグが自動的に挿入されてたり、AMPを構成するタグに置き換えられます。

 

ものの数分でAMP化ができました。

AMP for WordPressのプラグインだけでもヘッダの色を変更する程度のデザイン変更は可能ですが、凝ったデザインにするにはCSSを読み込ませてデザイン調整する必要がありそうです。

 

 

AMP化のメリットを考えてみる

ウェブサイトをAMP化するとどんなメリットがあるのでしょうか。

ユーザー目線だとメリットはありそう。

 

AMP化のデメリットはなんだろう

 

どんなサイトがAMP化に向いているか

簡素化されたウェブページになるのでニュース記事やブログなど読み物系のサイトが向いています。

商品カタログのような画像が多かったり、リッチなページにしたい場合はAMPにする必要性はありません。

 

 

しばらくAMP化で運用の様子をみてみたいと思います。