長崎のホームページ制作

WordPressサイトをモバイル端末での表示を高速化するAMP(Accelerated Mobile Pages)対応にしてみました

2016年3月2日
1220 views
約 5 分
WordPressサイトをモバイル端末での表示を高速化するAMP(Accelerated Mobile Pages)対応にしてみました

今回は、Googleがホームページの「セキュア化」と並んで重要視している「高速化」についてご紹介します。

Googleは、Accelerated Mobile Pages(アクセラレイティッド・モバイル・ページ)という、モバイル端末(スマホなど)でのWebページの表示を高速化するためのプロジェクトを公開しています。その名が Accelerated Mobile Pages = AMP(アンプ)です。

Googleのモバイルでの検索結果に、AMP対応ページの表示を2月24日に開始しました。
AMP対応ページは、検索結果をクリックすると、ほぼ瞬間的に内容が表示されます。

Google公式ページでも2月25日に発表されています。

と、言っても今わざわざ対応したところで、全くと言っていいほど恩恵はないと思います^^;

さらに、AMP対応ページでは、javascriptが動作しないなどの制限があるのでGoogle Analyticsのタグやいいねボタンなどは、動作しないです。

アクセス解析は、設定をすればAMP対応ページにアクセスがあった場合は、カウントされるようになります。

なので、AMP対応は自己責任でお願いします(笑)ということで今回、人柱になってみたいと思います!

WordPressのプラグインAMPをインストールしました

当サイトは、WordPressなのでプラグインを入れれば対応できます!
やっぱりWordPress最高っ!簡単ですっ!

  1. WordPressの管理画面から《プラグイン》
  2. 《新規追加》をクリック
  3. 「AMP」を検索
  4. 《今すぐインストール》をクリック

WordPressのプラグインAMPをインストール

《プラグインを有効化》をクリックします。

《プラグインを有効化》をクリック

AMPの設定

設定することは、ないのですが一つだけ操作が必要です。

設定は、変更せずに《設定》→《パーマリンク設定》で《変更を保存》ボタンをクリックします。

《設定》→《パーマリンク設定》で《変更を保存》ボタンをクリック

これをすることで、Rewriteルールを“フラッシュ”させるためだそうです。

AMP対応ページにアクセス解析をするための設定

今のままでは、Google Analyticsのjavascriptも削除されてしまうので、AMP対応ページヘアクセスがあるのかわからなくなります。

プラグインのファイルに2箇所追記して、アクセス解析ができるようにします。

FTPソフトを利用して、サーバー上のファイルを使ってもいいですし、
WordPressの管理画面内の「プラグイン編集」を利用してもいいです。

プラグインAMP編集

AMPプラグインの中の wp-content/plugins/amp/templates/single.php を編集します。

プラグイン編集画面

1.head要素<head>〜</head>の中に、以下を入れます。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

2.body要素<body>〜</body>の中に、以下のスクリプトを入れます。

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
 "vars": {
 "account": "UA-XXXXX-Y"
 },
 "triggers": {
 "trackPageview": {
 "on": "visible",
 "request": "pageview"
 }
 }
}
</script>
</amp-analytics>
UA-XXXXX-Yの部分は、Google AnalyticsのトラッキングIDを入力してください。
Google Analyticsにて、《アナリティクス設定》→《プロパティ》→《プロパティ設定》→トラッキングID で確認できます。

入力は、以下の様な感じになります。別ソフトで開いた状態です。

Codaにて入力例

入力が終わったら《ファイルを更新》ボタンをクリックします。

《ファイルを更新》ボタンをクリック

AMP対応ページでアクセス解析が正常に動作しているか、Google Analyticsのリアルタイムで確認

AMP対応ページを確認する場合は、URLの末尾に「amp」を付けて確認します。

アクセス解析のリアルタイムで確認

AMPページのデザインは、超シンプル

AMPに対応したページのデザインは、超シンプルです!
不要なシェアボタンなんか表示されません。
ということで、「いいね」ボタンも表示されていないので、「いいね」できないですね^^;

  • 通常のページデザイン
    通常のページデザイン
  • AMP対応ページデザイン
    AMP対応ページ

シェアボタンや不要な装飾がなくなり、超絶シンプルになりましたね。
記事だけが表示されていますね。

AMP対応ページの全体

AMP対応のまとめ

記事だけのシンプルな構造になったので、爆速で表示されるようになるんですね。

まだ、恩恵はほとんどないと思うので、AMP対応させなくてもいいんじゃないかなと思っています。
SSL化も一緒に推奨されていて対応してみましたが、現時点でも恩恵受けている感じはしません(笑)

今は、AMPというものがあるんだなーという知識を入れておけばいいと思います。

【今回の記事作成のため参考にしたサイト】

この記事が気に入ったら
いいね!しよう

(Last Update:2016年10月8日)

私が書いています

株式会社イーシークリエイトホームページ運営コンサルタント吉田 穣
これまで広告代理店のグラフィックデザイナー、個人としてWebプロデュース&デザイナー、ネットビジネスでの経験を活かして、経営者、自営業者、一人Web担当者の悩みに「元ホームページ制作会社が教えるホームページ&ブログ運営術」を日々アドバイスしています。

【得意なこと】
・ビジネス内容を聞いて、ネットでどのようなテストや展開ができるかを考えながら話します
・初速を付けること
・WordPressを使ったホームページを一気に起ち上げる
・相談相手の背中を押すこと(自己責任がない方は、押さないですw)
・WordPressの一人運営方法
・ビジネスターゲット(ペルソナ)の選定方法を教えます
・ペルソナに合わせた、キーワードの選定方法を教えます
・他社で制作されたドメインを取り戻す
(制作会社との契約上、取り戻せないこともあります)
・他社制作会社の管理下から、自社で契約したレンタルサーバーへ移行します
(制作会社との契約上、移行できないこともあります)
・Facebookの投稿で、何を投稿すればいいのかをアドバイスします
・アイデアだけは、使えないようなアホなアイデアから、使えそうなアイデアまで幅広く会話から出します
・ネガティブ要素を、ポジティブ要素に変換できないか。を考えることもあります
などなど
Follow :