1. HOME
  2. 開発・ブログ運営
  3. HTML/CSS
  4. モバイルページ表示が4倍速になる!? AMP(Accelerated Mobile Pages) 対応ページの作り方
2016年07月27日
モバイルページ表示が4倍速になる!? AMP(Accelera ...
2013年04月20日
ブログ記事執筆には欠かせない Chrome エクステンション「 ...
2016年07月29日
AMP ページに Google Analytics のトラッキ ...
2012年02月12日
フッターのレイアウトが崩れてちゃんと表示されない(泣) ...
2013年11月30日
Nexus 5 (Android4.4)でブログ記事を書いてみ ...
2016年07月14日
curl で WEB レスポンスヘッダ と リクエストヘッダの ...

モバイルページ表示が4倍速になる!? AMP(Accelerated Mobile Pages) 対応ページの作り方

WordPress で運用している人はほぼプラグインの導入だけで AMP ページを生成できちゃいます。

モバイル用のページとして Wptouch プラグインを利用していますが、それとは別に AMP(Accelerated Mobile Pages)用のページを作成しました。

これで、このブログは PC 用のページ、モバイル用のページ(WPtouch)、AMP 用のページの 3 種類になりました。


AMP の導入手順

AMP ページの Google 検索ガイドラインによると AMP ページを導入するための手順は以下のとおりです。


なにやら面倒臭そうですが WordPress で運用している WEB サイト(ブログ)であれば便利なプラグインがあるのでほぼプラグインの導入のみで OK です。


1. AMP 仕様に沿ってウェブページを作成する

Wordpress amp plugin

AMP HTML 仕様に沿ってページを作成します。って言うのは簡単で初めての AMP ページを作成するチュートリアルがあったりしますが、はっきり言って大変すぎる。

全然ムリ。

だけど WordPress な人は、その名もずばり AMP プラグインを導入すればプラグインを有効化するだけで AMP ページが生成されちゃいます。

AMP プラグインのインストール自体は通常のプラグインのインストールと同じです。管理ページの「プラグイン」>「新規追加」から「AMP」で検索すると、AMP プラグインが検索されますので「今すぐインストール」をクリックして「プラグインを有効化」するだけです。特にプラグインの設定は必要ありません。

AMP ページが生成されたら(AMP プラグインを有効化したら)モバイル記事の URL の後ろに /amp を追加してあげれば、AMP ページが表示されます。

例えばこのブログの場合、エックスサーバーから さくらVPS + Docker に引っ越しました という記事の URL は https://dev.ontheroad.jp/archives/13520 なので URL 末尾に /amp を追加して https://dev.ontheroad.jp/archives/13520/amp とすれば AMP 用のページが表示されます。



2. AMP を検出可能にする

AMP ページが生成されたら、Google などの検索エンジンなどが AMP ページを認識できるようにする必要があります。AMP ページの Google 検索ガイドライン によると、

非 AMP ページに、

を追加することによって、AMP ページの存在を認識させるようです。

また、AMP ページにも、

を追加して、オリジナルの(非 AMP ページの)URL を指定する必要があります。

なんですが、 AMP プラグインで AMP ページを導入している場合は、プラグインが AMP ページ、非 AMP ページそれぞれに必要なタグを自動的に追加してくれるので、結局のところ何もする必要はありません。

あら素敵。

一応、注意点としてはテーマファイルの single.php の <head> タグの中に、<?php wp_head(); ?> がないと、AMP ページに対するタグが出力されません。


WPTouch を導入している場合

WPTouch を導入しているとモバイル端末でアクセスした場合、通常の single.php ではなく WPTouch 専用の single.php が使われるので、

/wp-contents/plugins/wptouch/themes/bauhaus/default/single.php
/wp-contents/plugins/wptouch/themes/foundation/default/single.php

それぞれに(または使用するテーマのみに)手動でタグを追加する必要があります。



3. ページが有効な AMP HTML で作成されていることをテストする

テストする方法は、

1. ampproject.org のサイトでテストする方法
2. Chrome Developer Tools などのコンソールを使う方法
3. ブラウザエクステンションを使う方法(Chrome & Opera 限定)

があります。

ampproject.org のサイトでテストする方法が、エラーがある場合には該当箇所にエラー内容を表示してくれるなど、使い勝手が良いと思いますがお好みで。

WEB サイトで確認する

The AMP Validator 2

validator.ampproject.org のテストページ へアクセスして、AMP ページの URL を入力して「VALIDATE」をクリックします。

ページ下部に「Validation Status: PASS」と表示されれば OK です。エラーがある場合は、「Validation Status: FAIL」と表示され、上部の該当箇所にエラーが表示されます。

Chrome Developer Tools で確認する

Developer Tools AMP page

Google Developer Tools のコンソールタブを開いて、AMP ページの URL の末尾に「#development=1」を追加してアクセスします。

例えば、AMP ページの URL が https://dev.ontheroad.jp/archives/13520/amp の場合、https://dev.ontheroad.jp/archives/13520/amp#development=1 へアクセスします。

コンソールの最下部に「AMP Validation Success full.」と表示され、何もエラーが出なければ OK。


ブラウザエクステンションで確認する

Chrome extention amp page

Chrome と Opera 限定ですが、AMP Validator エクステンションをインストールすると、ブラウザで AMP  ページにアクセスした場合にアイコンの色で PASS か FAIL を表示してくれます。AMP ページにアクセスしてアイコンが緑色で表示されれば OK。エラーがある場合には赤色で表示されます。

AMP Validator の Cheome 版のダウンロード
AMP Validator の Opera 版のダウンロード


4. 構造化データでコンテンツをマークアップする

Google amp test page

直接 AMP ページには関係なかったりします。AMP ページの Google 検索ガイドラインから引用します。

構造化データのマークアップを使えば、Google 検索結果の目立つところにコンテンツを掲載できます。たとえば、AMP 記事に適切なマークアップ プロパティが追加されている場合、その記事はカルーセル内に表示されます(モバイル端末でのデモ)。

ただ Google 検索結果に表示されるには構造化データの設定が必要との話もあります。ちょっと正確にはわかりませんが、Google 検索結果に掲載されなければ AMP ページを作る意味もありませんから、一応、構造化データのマークアップをしておいた方が良いかもしれません。


5. Search Console の AMP レポートでエラーを確認する

Search Console  Accelerated Mobile Pages  https dev ontheroad jp

ここまでの設定を終えて 2, 3 日(?)で、Search Console にステータスが表示されます。

私のようにズラズラーっとエラーが検出された場合は、修正が必要です。

「エラー項目をクリック」して「エラーページ」をクリックするとダイアログが開くので「検証ツールを実行」をクリックすると、

Amp page validate 02

validator.ampproject.org のテストページのページが開いて、エラー内容とエラー場所を教えてくれます。


AMP ページの Analytics と Adsense

AMP ページにも Google Analytics と Adsense を設置することは可能です。

Analytics の設置方法は「AMP ページに Google Analytics のトラッキングコードを追加してアクセス数を記録する 」をご覧ください。

Adsense の設置方法は。。また記事書きます。


まとめ

AMP ページの導入自体は思ったよりも簡単でした。というか、ほぼプラグインをインストールするだけです。ただ、私のようにズボラに記事を作成しているとエラーを修正するのが面倒ですね。

ほとんどのエラーは、同じ類のミスだったりするので、文字列を一括置換できるようなプラグインなりを探してボチボチ修正していきたいと思います。

でわでわ。








この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.