ワードプレス関連の役立つ情報をまとめています。WordPressプラグイン、WordPressテーマ(テンプレート)の情報をわかりやすく紹介します。

AMPをWordPressへ導入する方法、モバイル端末でのウェブページの高速化!

このエントリーをはてなブックマークに追加

記事公開 2016.12.08

最終更新 2016.12.14

モバイル端末でのウェブページの表示速度を高速化するAMP(アンプ)をWordPressに導入する方法を紹介します。WPプラグインを利用するので簡単にAMP対応ページを生成できます。

AMPに対応するのみであれば、AMPプロジェクトの公式プラグイン「AMP」を利用するだけで対応できます。それに加え、AMP対応ページで広告(AdSense)やアクセス解析(Google Analytics)を利用する方法を合わせて紹介します。

WordPressを利用したWebサイトにAMPを導入する際に参考にしてください。ちなみに、AMPの導入は必須ではありません。AMPと相性の良いサイトを運営している場合に活用しましょう。

はじめに

AMPとは?

AMP(アンプ)は、モバイル端末でのウェブページの表示速度を高速化するウェブページの仕様です。正式名称はAccelerated Mobile Pages(アクセラレイティッド・モバイル・ページ)になります。

AMP対応ページは検索エンジンのクローラーに定期的に巡回・取得されます。エラーがなければ、Google AMP Cache(GoogleのCDN)に保存されます。キャッシュに保存することでページを素早く表示できるようになります。キャッシュの状況はサーチコンソールから確認できます。

詳しい情報は、AMPプロジェクトやサーチコンソールのドキュメントをご確認ください。

参考サイト

AMP導入前に知っておくべきこと

  1. AMPの独自仕様が決められている。利用に関しては様々な制限がある。
  2. JavaScriptが利用できない。アクセス解析や広告のタグをAMP対応版に変更する必要がある。
  3. モバイル端末(スマートフォン端末)でのGoogle検索結果に反映される。
  4. 導入すればモバイル端末での検索結果の順位が上がる訳ではない。
  5. 相性が良いサイトと悪いサイトがある。文字を主体としたニュースサイトやブログとの相性が良い。大量の記事を毎日公開するサイトが導入のメリットがある。
  6. あなたが作成したAMP対応ページがGoogle AMP Cache(GoogleのCDN)にキャッシュされる。検索結果にそのキャッシュを利用するので高速に表示される。
  7. 記事は高速に表示されるが、記事本文以外の要素を全て排除した状態になる。スマートフォンを利用したユーザーがあなたのWebサイトに全くアクセスせず、記事のキャッシュを閲覧しただけで、Googleの検索結果の画面に戻ってしまう恐れがある。

AMPの導入は必須ではない

AMPのWebサイトへの導入は必須ではありません。導入すればモバイル端末での検索結果の順位が上がる訳ではありません。毎日記事を大量に公開する大手ニュースサイトのようなサイトに導入するとメリットがあります。

AMPプロジェクトが公開されてからまだ日が浅いので、急いで導入しなくても、日本では今のところは大きな影響はありません。今後、AMPの機能が順次拡張されていく予定なので、影響が大きくなることが予想されます。

AMPと相性の良いサイトの例

  1. 毎日記事を大量に公開するサイト
  2. ニュース記事のような文字や写真を主体とした記事が多いサイト
  3. スマートフォンでの閲覧者が多いサイト

この記事で紹介するWPプラグイン

AMP
  • AMPプロジェクトの公式プラグイン
  • AMP対応ページを生成できる
Facebook Instant Articles & Google AMP Pages by PageFrog
  • AMP対応ページでアクセス解析を利用できる
  • AMP対応ページに広告を挿入できる
  • Facebook Instant Articlesの機能もある

AMP対応ページの生成

AMP

AMP

AMPは、AMPプロジェクトが公開している公式プラグインです。WordPressで運用するWebサイトにAMPを対応させる際は、このWPプラグインを利用しましょう。

WPプラグインの利用方法は簡単です。プラグインをインストールして有効化するだけでAMP対応ページが生成されます。

AMP対応ページにアクセスするには、サイトURLの後ろに「/amp」または「?amp」を付ければAMP対応ページになります。

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「AMP」で検索
  2. WordPress.org からダウンロード

管理画面の場所

プラグインの管理画面は下記の場所にあります。AMPの画面のカラーもカスタマイズできます。初期設定のままでも運用できます。

WordPress管理画面 > 外観 > AMP

AMP導入時の注意点

WordPress内部のURL構造に関するデータの更新が必要となります。AMPのプラグインを有効化後、WP管理画面の「パーマリンク設定」を設定そのままで保存して更新してください。

これで新しいパーマリンクの設定が反映されます。パーマリンクの設定を更新しないと、404エラーでAMPページがリンク切れ状態になる場合があります。

URL構造の例

通常記事のURL http://your-domain.com/post-title/
AMP対応ページのURL http://your-domain.com/post-title/amp
または
http://your-domain.com/post-title?amp

記事のヘッダーに挿入されるタグ

AMPを有効にした場合、通常の記事のヘッダーに下記のタグが挿入されます。検索エンジンのクローラーは、このタグに書かれたURLを辿ってAMP対応ページを巡回してキャッシュします。

<link rel="amphtml" href="https://your-domain.com/post-title/amp/"/>

AMPで広告とアクセス解析を利用する

Facebook Instant Articles & Google AMP Pages by PageFrog

Facebook Instant Articles & Google AMP Pages by PageFrog

Facebook Instant Articles & Google AMP Pages by PageFrogは、名前の通り、WordPressのWebサイトを「Facebook Instant Articles」と「Google AMP Pages」に対応させることができるWordPressプラグインです。今回は後者のWordPressのAMP対応に絞って説明します。

このWPプラグインを利用すると、AMP対応ページに広告(AdSense)やアクセス解析(Google Analytics)を挿入できます。AMP対応ページのデザインをカスタマイズしたり、AMPのプレビュー画面を表示する機能もあります。

このWPプラグインは上記で説明したAMPのプラグインを有効化した上で利用してください。

このプラグインの特徴

  1. AMP対応ページに広告(AdSense)やアクセス解析(Google Analytics)を挿入できる。
  2. AMP対応ページのデザインをカスタマイズできる。
  3. AMP対応ページのプレビュー画面の機能あり。
  4. AMP対応ページを一括で無効化・有効化する機能あり。

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Facebook Instant Articles & Google AMP Pages by PageFrog」で検索
  2. WordPress.org からダウンロード

管理画面の場所

プラグインの管理画面は下記の場所にあります。

WordPress管理画面 > Mobile Formats

Mobile Formats

外観のカスタマイズ(Styling)

プレビューを見ながら、AMP対応ページのデザインをカスタマイズできます。ヘッダーや記事本文の配色の設定ができます。あなたのサイトのロゴやアイコンを登録しておきましょう。

外観のカスタマイズ

アクセス解析の設定(Analytics)

Google Analyticsなどのアクセス解析の設定ができます。Googleのアカウントを認証して、アクセス解析の設定を選択すれば、後はWPプラグイン側でアクセス解析コードを自動挿入してくれます。

Google Analyticsの選択

Google Analyticsの選択

Googleアカウントの認証

Google Analyticsを利用しているGoogleアカウントで認証します。

Googleアカウントの認証

サイトの選択&機能の有効化

サイトを選択します。そして、右上にある有効化ボタン(Enable Integration)を押して機能を有効化してください。

サイトの選択&機能の有効化

広告の設定(Ads)

Google AdSenseなどの広告の設定ができます。Googleのアカウントを認証して、表示したい広告ユニットを選択すれば、後はWPプラグイン側で広告コードを自動挿入してくれます。

Googleアカウントの認証

Google AdSenseを利用しているGoogleアカウントで認証します。AdSenseを管理しているアカウントで認証してください。

Googleアカウントの認証

広告ユニットの選択

登録済みの広告ユニットの一覧が表示されます。AMP対応ページに表示させたい広告ユニットを選択してください。

広告ユニットの選択

広告の有効化

レスポンシブ(自動サイズ)の広告ユニットを表示した例です。AMPはスマートフォン端末で表示されるので、レスポンシブの広告ユニットと相性が良いかもしれません。

広告の有効化

全体的な設定(Settings)

設定(Settings)の管理画面では、一括してAMPの機能を有効化・無効化できます。デフォルトの設定も登録できます。

AMPは全てのページで有効化する必要はありません。例えば、固定ページで作成した「製品情報ページ」「お問い合わせフォーム」などは、AMPを利用するメリットが殆どありません。AMPを有効化する必要のないページはAMPを無効化しておきましょう。

ネタワン管理人の個人的な考えになりますが、固定ページで作成したコンテンツはAMPを有効化する必要がないので、一括して無効化しておくのも良いかもしれません。

記事投稿画面の設定

WP管理画面の記事投稿画面で、記事ごとにAMP対応ページの生成の有無を指定できます。

画面右側にある「AMP HTML」にチェックを入れて保存すると、この記事のAMP対応ページが生成されます。

記事投稿画面

サーチコンソール

AMPテスト

AMP対応ページの作成が完了したら、念のためにAMPが正しく出力されているかどうかの確認を行いましょう。AMPテストで「有効なAMPページです」と表示されれば正常な状態です。

動作確認ページ

AMPテスト

AMPテスト

キャッシュされるまでに時間がかかります

AMP対応ページはGoogleのクローラーが定期的に巡回してくれます。エラーがなければ、Google AMP Cache(GoogleのCDN)に登録されます。クローラーの巡回状況やエラーの状況はサーチコンソールで確認できます。

キャッシュが完了するまでに数日かかります。数日後、サーチコンソールの状況を再度確認しましょう。

サーチコンソール

まとめ

モバイル端末でのウェブページの表示速度を高速化するAMPのWordPressへの導入は簡単です。WPプラグインを利用すると、簡単にAMP対応ページを生成できます。

AMPの導入は必須ではありません。AMPと相性の良いサイトを運営している場合に活用しましょう。WordPressを利用したWebサイトにAMPを導入する際に参考にしてください。

追記

ちなみに、ネタワン(当サイト)でもAMPを試験的に導入してみましたが、最終的にはAMPの導入をやめました。他のサイトでは利用しています。

当サイトはPC向けの情報を提供しているので、現段階ではAMP導入のメリットがありませんでした。モバイル端末での閲覧者が少ないので、影響も少なかったです。

スポンサーリンク

最後までお読み頂き、ありがとうございます

この記事の内容が役に立ったと思ったらソーシャルメディアで共有してね。

このエントリーをはてなブックマークに追加

RSSフィードを購読する

follow us in feedly

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


ソーシャルメディア & RSS

Twitter Facebook Google+ RSSフィード

スポンサーリンク

ワードプレステーマTCD

ネタワンでも利用しているTCDのWordPressテーマを紹介します。様々な種類のテーマが販売されています。

MAG(TCD036)

WordPressテーマ「MAG(TCD036)」

ハイクオリティーな人気ブログを構築できるWordPressテーマ


ワードプレステーマTCDの詳細&レビューはこちら