• WordPressサイトを使っているけども、サイト表示速度がいまいち気になる
  • AMP化ってHTMLをいじったりするの?難しそう…

 

こんな風に思い込んでいて、WordPressサイトを運営しているのにAMP化しないのは非常にもったいないです。

 

僕もWordPressサイトを14個ほど運営していますが、AMP化については少し抵抗がありました。

しかしやってみると驚きです。

 

WordPressサイトのAMP化は3分で済みます。

 

解決策は、やはりプラグインを使用するといった方法。

 

今回の記事では、AMPの軽い説明、そしてWordPressサイトのAMP化の方法を解説していきます。

 

ジョグ

本当にWordPressはプラグインがすごいですね。

カスタマイズ性に溢れていますが、逆に言えば知識がなければ綺麗なサイトは作れないということ。

難しい所ですね。

 

 

AMPとは?WordPressに導入する理由は?

AMP 意味 理由

まずはAMPの説明です。

AMPとは、Accelerated Mobile Pagesの略称で、GoogleとTwitterの共同開発で生まれた全く新しいフレームワーク(HTML)です。

AMPはモバイル端末のWEBページ表示がとても速く、通常の約4倍のサイト高速表示が可能です。

 

WordPressに導入するメリットは、他の記事でも解説していますが…

  1. 表示速度の改善により検索順位が上昇する可能性が高い
  2. トップニュース枠にカルーセル表示される可能性がある
  3. AMPラベルが表示されリピートユーザーの増加につながる
  4. 広告表示の高速化により収益増加につながる

 

となります。

サイト高速化についてや、AMPの知識については下記の記事で詳しく解説しております。

 

WordPressプラグインを使った簡単なAMP導入方法

それではさっそく、WordPressをプラグインを使ってAMP化させていきましょう。

非常に簡単で、この記事を見ながら進めれば3分もかかりません。

ジョグ
さぁレッツAMP化!

AMPプラグインのインストール、有効化

まずは「AMP for WordPress」をインストールして有効化しましょう。

参照AMP for WordPress

 

AMPページのデザイン設定

次に、WordPressの「外観」「AMP」を選択します。

WordPressのカスタマイズ画面になるかと思いますので、ここでAMPページのデザインを決めましょう。

  • ヘッダーテキスト色
  • ヘッダーの背景&リンク色
  • 配色

 

が決められます。

 

Googleアナリティクスの設定

デザインを決めたら、次はアクセス解析を設定します。

これを設定しないと、”自サイトのAMPページにアクセス流入しているのにGoogleアナリティクスに反映されない!”ということになりかねません。

WordPressの管理画面の左のサイドバーから「AMP」「Analytics」をクリックします。

入力する箇所が2つあります。

 

Typeには以下の文章を↓
googleanalytics

 

JSON Configurationには以下のコードを↓
{
  "vars":{
    "account":"UA-XXXXXXXX-X"
  },
  "triggers":{
    "trackPageview":{
      "on":"visible",
      "request":"pageview"
    }
  }
}

 

↑「UA-XXXXXXXX-X」の部分には、自分のGoogleアナリティクスのトラッキングIDを入力してください。

終わりましたら、「Save」をクリックします。

これで一応はAMP化作業は終了です。

 

AMP化の確認作業1

しっかりとAMP化されているか、確認作業を行います。

自分のサイトの中で適当に記事を選択し、URLの語尾に

  • /amp/
  • &amp

 

のどちらかを付けます。(僕の場合は”&amp”で確認できました。)

そのままエンターキーでURLに飛ぶと、AMPページが表示されるかと思います。

 

次に、そのAMPページのURLの語尾に、「#development=1」と追記してリロードしましょう。

Chromeのデベロッパーツールを開き、「Console」を見てみましょう。

 

上の画像の、黄色い蛍光ペンでチェックされているAMP validation successful.と表示が確認できればOKです。

 

AMP化の確認作業2

最終確認です。

Googleさんが提供している「AMPテストツール」で自分のURLを確かめてみましょう。

参照AMP テスト

 

自分の記事のAMPページURLを入力して「テストを実行」をクリックするだけです。

上の画像のように、「有効なAMPページです」と表示されればOKです。

 

これでWordPressのAMP対応可作業を終わります。

ジョグ
ね?簡単だったでしょ(^▽^)/?

 

まとめ:WordPressAMP化は非常に簡単だが、欠点もある

もちろん、AMP化すればサイト表示速度は速くなります。

しかし今のところ、このプラグインを使ったWordpressサイトAMP化には弱点があります。

 

  • SNSシェアボタンが表示されない
  • 関連記事などのウィジェットが表示されない
  • アドセンス広告が表示されない

 

という弱点です。

これらの改善策が分かりましたら、すぐにこの「Catch! Engine」でご報告&シェアさせていただきますのでよろしくお願いいたします。

 

じょさなん
  • ブログ収益化についての無料相談
  • 本格的なコンサルタント依頼
  • ブログやSEOについての質問
多数受け取っております。本当にありがとうございます! いつでもお待ちしておりますので、下記の記事を読んでいただけると幸いです(^o^)
おすすめの記事