WordPressのブログ記事を高速表示させる方法。Google AMP編

シェアする

ブログやメディアの記事を高速で表示する技術が話題になっていたので対応してみました。

Webページがリッチに表示出来るように成って以降、1ページあたりのサイズがどんどん大きくなり、読み込みに時間がかかるようになってしまいました。

スマホの表示が遅くてイライラする人

LTE回線であれば本来は直ぐに読み込みが終わるはずの所、1ページ内に広告など多くのスクリプトを走らせていることでユーザー体験が悪くなっていました。

そこでAppleやGoogle、Facebookは高速で表示させるようにする仕様をまとめています。AppleとFacebookはアプリから、Googleは検索結果から高速で記事を表示させられるようになっています。

スポンサーリンク
スポンサードリンク

WordPressでAMP(Accelerated Mobile Pages)対応

今回はWordPressで作ったこのブログをAMPに対応させた方法を紹介したいと思います。

AMPについてはこちらでも紹介していますので、読んでいただければと思います。

AMPでスマホからのアクセスが高速化!WordPressプラグインも製作中!
AMPでスマホからのアクセスが高速化!WordPressプラグインも製作中!
スマホでサイトを高速表示するAMP(Accelerated Mobile Pages)という新しい技術で、これに対応することで、Go...

AMPはGoogleが策定している高速表示する仕様で、WordPressに実装するには比較的時間はかかりません。

公式プラグインで対応

既に公式のAMP用WordPressプラグインが公開中です。

プラグイン追加でAMPで検索してみてください。

AMP WordPressプラグイン

こちらをインストールして有効化するだけで、基本的にはOKでWordPressがAMPに対応します。

表示させたいページの最後にampと入れるだけでAMPのページを確認することが出来ます。上記した過去記事をAMPで開くと以下のようになります。

AMPでスマホからのアクセスが高速化!WordPressプラグインも製作中!
AMPでスマホからのアクセスが高速化!WordPressプラグインも製作中!
スマホでサイトを高速表示するAMP(Accelerated Mobile Pages)という新しい技術で、これに対応することで、Go...

高速表示になっているのがわかると思います。

AMPのページに広告やAnalyticsを対応する

自分でやろうとすると大変なので、広告やAnalyticsもプラグインで対応します。

「Facebook Instant Articles & Google AMP Pages by PageFrog」というプラグインが便利で、見た目の編集や広告の管理、Google Analyticsまでこのプラグインで対応出来ます。

プラグインの追加でFacebook Instant Articles & Google AMP Pages by PageFrogを検索してください。

Facebook Instant Articles & Google AMP Pages by Pageスクショプラグインのスクショ

インストールしたら、設定に進みます。先ほどのAMPプラグインが必須なので先にインストールしておいてください。このプラグインからもインストールすることが出来ます。

Stylingからプレビューを表示しながら仕様の範囲内で見た目をカスタマイズすることが出来ます。ロゴ、フォントぐらいしか変更できないので、色味を変えるぐらいでしょうか。

凄く面倒くさい広告については、AdsをクリックしてGoogle AdSenseボタンで紐付けます。すると広告ユニットを選択出来るようになるので、任意のサイズを選んでください。私の場合は通常のページで使っている物を選択しました。細かく分析したい人は専用のユニットを作成しておくといいでしょう。

Google Analyticsも同様にひも付けが出来ます。AMPのページと通常のページを分けて測定したい場合は分けておくといいのですが、既に使っているものに一緒に測定するように紐付けました。

AMPはランキングに影響しない

AMPの対応をGoogleは推奨していますが、まだGoogleの検索結果に影響はしないとアナウンスしています。しかしAMPページは検索結果にカルーセルで表示されるようになります。

amp対応ページのカルーセル表示

AMP対応しているページにはカルーセルにAMPを表示される。

将来敵にはAMP対応は必須だと考えて置いたほうがいいと思いますので、早めに対応しておくのをオススメします。

次回はfacebook Instant Articlesについて紹介したいと思います。

追記

facebook Instant Articlesですが、うまく動いてくれず、設定を見てもエラーが多いので解決でき次第紹介したいと思います。AMPと違いレギュレーションがかなり厳しいです。

スポンサーリンク
スポンサードリンク
スポンサードリンク

シェアする