WordPressのブログをAMP対応させてみた

Wheelmap App iPhone

ブログを多くの方に読んでもらうためには記事の内容はもちろんですが、ストレスなくアクセスできることも大切だと思うのです。

そこで、最近、AMPと呼ばれるスマートフォン向けに非常に高速でページを読み込ませる技術があるとのことですので、早速ですがこのブログにも導入してみました。

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

AMPとは

Accelerated Mobile Pagesの略。

ネット検索で集めた話を総合すると、

  • GoogleとTwitterが共同で開発した
  • Googleの検索画面でカード状に表示される
  • モバイルページが通常の4倍の速度で読み込まれる
  • 表示に必要なデータ通信量が1/10まで削減できる

とのことです。

詳しくは以下のリンク先に書いてあります。

とりあえず、スマートフォンでこのブログを閲覧する読者にとってはメリットが多そうなので導入してみることにしました。

今回のAMP導入にあたってプラグインを新規で2つインストールしました。

プラグイン1:AMP

まずはAMPというプラグインをインストールします。

これは名前の通り、各記事に自動でAMPバージョンのページを生成してくれるプラグイン。

しかし、どうやらエラーが多いうえに設定できる項目が少ないのが難点。

そこで、この欠点を補うために2つ目のプラグインをインストールします。

プラグイン2:Facebook Instant Articles & Google AMP Pages by PageFrog

うん、長い長い名前のプラグインです(笑)

インストールするとGoogle AMP HTMLが「Ready」と表示されていることがわかります。

スクリーンショット 2016-11-07 20.21.58

AMPのページのスタイルを編集することができます。

スクリーンショット 2016-11-07 20.23.13

また、AMPバージョンで投稿が表示されるとGoogleアドセンスが消えてしまいますが、このプラグインを使えば表示させることが可能です。

まず「Ads」のメニューから自身のアドセンスアカウントと連携させます。

設定メニュー内「Ads Placement」で何文字目の位置に広告を表示させるか設定できます。

999文字と入力すると文末にアドセンスが表示されました。

Google Search Consoleでの検出

左側のメニュー内「検索での見え方」にAMPの項目があります。

スクリーンショット 2016-11-07 20.32.01

ここではAMP版のページがどれだけGoogleにインデックスされたか、エラーを含んだページがどれだけあるかが分かります。

上記2つのプラグインを導入してから、GoogleのサーチエンジンがAMPを検出するまで2日ほどかかりました。

Fetch as GoogleでAMP版のURLを送信してもダメだったみたいですね。

導入してみて

以上の手順でこのブログ「シロクマのPuni Puni」もAMP対応となりました。

各投稿のURL末尾に「/amp/」をつけると、高速表示できそうなモバイルページが表示されます。

WordpressのブログをAMP対応させてみた
WordpressのブログをAMP対応させてみた
ブログを多くの方に読んでもらうためには記事の内容はもちろんですが、ストレスなくアクセスできることも大切だと思うのです。 そこで、最近、...

このAMPはまだ認知度は低いみたいですが、いずれモバイルページの標準的な造りになるかもしれません。

関連コンテンツ
関連コンテンツ
スポンサーリンク
スポンサーリンク
スポンサーリンク

Share me

Follow me