3分で可能!wordpressをプラグインでAMP化して高速表示

wordpress amp プラグイン

あなたのサイトは
スマホで見た時に
見やすいサイトになっていますか?

今、1人1台スマホを
持つようになり、

デバイスの主役が
パソコンではなく
スマホになってきています。

そのため、サイトのページが
スマホで見た時に

適度な文字の大きさや
デザインになっていて
誰が見ても
見やすいページであることが重要です。

スマホユーザーを意識することで
より多くのユーザーに
見てもらいやすくなります。

wordpressでは、スマホで
検索に来たユーザーに
見やすいページをサクッと
表示することができる
便利なプラグインがあります。

そのプラグインを入れるだけで
AMP化させる方法をご紹介します。

目次

1.モバイル対応AMPとは?
2.AMP化でのメリット
3.AMP化するとどのように表示されるのか
4.wordpressのサイトにAMPのプラグインを導入
5.エラーチェック
6:まとめ

1.モバイル対応AMPとは?

wordpress amp プラグイン

Googleが、2015年10月に
Accelerated Mobile Pages(AMP)の
プロジェクトを公開しました。

参考先:Google公式ブログ

AMPとは、
モバイル端末でのページの表示を
高速化するためのプロジェクトです。

AMP(Accelerated Mobile Pages)とは
GoogleとTwitterで共同開発されている、

モバイル端末でウェブページを
高速表示するためのプロジェクト、
またはそのためのフレームワーク
(AMP HTML)のことです。

通常、ウェブページにアクセスするとき、

リンクをクリックしてから
HTMLを読み込み、
ページを表示するため、
その分時間がかかってしまいます。

一方AMPでは、
ウェブページのHTMLを
あらかじめGoogle

あるいはTwitter側で
キャッシュすることで、
読み込む分の時間を

大幅に削減する
仕組みとなっています。

引用先:SEOHACK

2.AMP化でのメリット

サイト検索の主役は、
もうすでにパソコンではなく
スマホになったと言われています。

ほとんどの人が家でも外でも
スマホを片手に
調べたいものをいつでも
検索できるようになりました。

wordpress amp プラグイン

画像引用元:モバイルSEOに取り組むべき11の理由

そのため、サイトを
スマホ対応にするのはもちろん
AMP化することによって
表示速度が大幅に変化します。

Googleの内部調査データによれば、
AMP対応していないページの
表示速度の中央値が22秒だったのに対し、
AMP対応しているページは0.7秒でした。

30分の1以上
短縮されていることになります。

引用先:海外SEO情報ブログ

表示速度が速くなることで
ユーザーのサイト閲覧の
ストレスを軽減し、
より離脱を防ぐことができますね。

  • ユーザーのページビュー増加
  • ページから離れていくことがなくなる
  • ページをじっくり読んでくれる
  • Googleの評価が高くなる
  • 検索順位に効果有り

より最適なページになっていきます。

3.AMP化するとどのように表示されるのか

実際に、AMP化されたページは
どのように表示されているのかは
こちらです。

wordpress amp プラグイン

 

wordpress amp プラグイン

3-1.トップニュース枠のカルーセル表示

ニュース系のAMP対応ページは、
このようにカルーセルパネルとして
表示されます。

wordpress amp プラグイン
カルーセルパネルとは、
Webデザインの一つの種類になります。

画像などのコンテンツ表示を
スムーズに表示させる方法になります。

3-2.AMPマークによる訴求

このようにAMPラベルが表示されます。

wordpress amp プラグイン

3-3.AMPに向いているジャンル

具体的には次のようなジャンルの
コンテンツがAMPに向いています。

  • ニュース記事
  • ブログの投稿
  • レシピ
  • 商品一覧
  • 旅行ガイド

現在、GoogleがAMPとして
対応しているコンテンツは
ニュース記事やブログ記事です。

トップニュースのカルーセルの中に掲載されます
(リスト形式の場合もある)。

引用先:海外SEO情報ブログ

4.wordpressのサイトにAMPのプラグインを導入

wordpressにプラグインをインストールし、
設定する方法を説明していきます。

4-1.インストール

AMPのプラグインを
インストールします。

メニューにある
「プラグイン」を押します。

wordpress amp プラグイン

「新規投稿」から
検索窓に「AMP」を記入し、
「いますぐインストール」を押します。

wordpress amp プラグイン

「有効化」ボタンに変わるので
それを押したら完了です。

wordpress amp プラグイン

4-2.AMPページを確認

どのように表示されるのか
AMPページを見てみましょう。

確認方法はURLの終わりに
以下の2パターンどちらかを
つけて表示させます。

• /amp/
• ?amp=1
(?がすでについている時はこちら「&amp=1」)

4-3.AMPページのカラーデザイン

AMPのページは全て同じデザインです。
かなりシンプルになっています。

設定から配色の変更をすることができます。

メニューの「外観」を押します。

wordpress amp プラグイン

「AMP」を押すと
カスタマイズの画面が出てきます。

wordpress amp プラグイン

「Design」を押して
好きな色に変更してみましょう。

wordpress amp プラグイン

変更できる箇所は3か所です。

・Header Text Color
(サイトタイトルの文字の色)
・Header Background & Link Color
(サイトタイトル部分の背景色とリンクURLの色)

・Color Scheme
(投稿記事の背景色)

色の部分を押すと、
カラーを選択できる画面になるので、
ここで調整します。

wordpress amp プラグイン

最後に「保存して公開」を
押して完了です。

wordpress amp プラグイン

5.AMPエラーチェック

AMPのプラグインで
エラーが出ていないか
チェックをしておきます。

まずは、デベロッパーツールで確認します。

デベロッパーツールとは、
Google Chromeブラウザで
閲覧中のページの要素を
確認できるものです。

使い方は簡単で、
閲覧しているページの上に
カーソルを置いて、
右クリックします。

そこで、出てくる項目の
「検証」を押します。

他のやり方はこちらです。

・Google Chromeの設定
(画面右上の3本線のバー)を押します。
その他のツール

デベロッパーツール
の順番に押していきます。

・ショートカットキー

《Windowsの場合》
Ctrl + Shift + i

《Macの場合》
Cmd + Opt + i

デベロッパーツールを表示したら
上に並んでいるメニューの
「Console」を選択します。

「Powered by AMP HTML – Version …」
と表示されていたらOKです。

wordpress amp プラグイン

6.まとめ

簡単にwordpressを
AMP化させる方法を紹介しました。

AMP化することで
スマホでサクサクと
ページを表示することができ

ユーザーにストレスなく
閲覧してもらえるサイトになります。

wordpressは、
プラグインをインストールするだけで
AMP化が可能です。

サイトのテーマに合わせた
配色デザインに設定することも可能です。

作業としてはおそらく
3分もかからず実装できます。

まだの人はすぐにインストールして
ページ表示の高速化を行ってみてください。

時間とお金も手に入れシンプルに成功する方法

個人でビジネスを始める方、小さい会社でも大きな利益を出したい方、自由な人生を勝ち取りたい方向けに 合計5本のビデオをプレゼントしております。 さらに期間限定ビデオもプレゼントしておりますので、今すぐ下記のボタンをクリックして詳細をご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

ビジネスZEROでは、0からビジネスを作り会社や国に頼らなくても自身で稼ぎ続ける起業、副業、WEBマーケティングノウハウを徹底的に追求し、個人でも稼ぐことが出来るビジネスモデルの作り方やマネタイズの方法等、具体的なノウハウを1から10まで可能な限り、トコトン提供していきます。