WordPress AMPプラグインを使って サイトをAMP対応にする

WordPress AMPプラグインを使って サイトをAMP対応にする
Googleは、モバイルページを高速化する AMP(Accelerated Mobile Pages) に対応したサイト検索を開始しました。
AMP は AMP HTML 仕様に沿って作成する必要があります。サイトをAMPに対応させる場合、独自のタグの記述方法や 使えるタグの制約が多いので、自分で対応させるのは大変なのですが WordPressではサイトをAMP対応にするプラグインがあります。

この AMPプラグイン を使うと 自動で変換してAMP対応してくれますのでとても楽になります。ここではさっそくAMPプラグインを使用してAMP対応する方法を紹介します。

WordPress AMPプラグイン(Automattic)
https://wordpress.org/plugins/amp/
※この記事は WordPress AMPプラグイン ver0.3.1 を使ってテストしています。
 

AMPプラグインインストール

AMPプラグインインストール
WordPress管理画面より、「プラグイン」→「新規追加」をクリックします。
テキストボックスの「プラグインの検索」の所に「AMP」と入れて検索すると今なら1番最初に出てきます。
「今すぐインストール」ボタンを押してダウンロードが終わりインストールが完了したら「プラグインを有効化」をクリックします。
これで、サイトは AMP対応になりました。

 
 

表示の確認

表示

AMPプラグインをインストールしたら表示の確認をしましょう。
記事のページに行き、URLの後ろに /amp を追加します。(又は &amp=1 ?amp=1 )
記事のAMPページ
例えば記事の URL が http://nendeb.com/369 でしたら http://nendeb.com/369/amp になります。
また、http://nendeb.com/?p=369 でしたら http://nendeb.com/?p=369&amp=1 になります。

 

構造化の確認

次に、構造化の確認をします。「Google Structured Data Testing Tool」では URLを張り付けると構造化データの確認をしてくれます。
Google Structured Data Testing Tool
ここでエラーが出ている場合は、元々使っているテーマ自体がエラーを出していてる場合がありますので そちらからチェックして直してください。

Google Structured Data Testing Tool
https://developers.google.com/structured-data/testing-tool/

※logo でエラーが出ている場合は管理画面の「外観」→「カスタマイズ」で サイト基本情報をクリック。サイトアイコン(ファビコン)を登録してみてください。
※image でエラーが出ている場合は記事のアイキャッチ画像を登録、又は変更してみてください。

2016/03/05 追記
サイトアイコン(ファビコン)でなく別の画像にしたい場合はこちらが参考になります。
wordpress AMP Pluginは入れただけではダメ。functions.phpにフィルター追記を忘れずに
http://www.pictron.net/2016/03/04/wordpress-amp-plugin0-3-1/

 

AMPソースのチェック

構造化データがOKでしたらAMPソースのチェックを行います。ここでは Google Chorome の Developer Tools を使います。
Google Chorome で記事のAMPページを開きます。
記事のAMPページ

キーボードの「Ctrl」と「Shift」と「i」キーを同時に押します。
記事のAMPページ Developer Tools

URLの末尾に「#debelopment=1」と追記して再ロードしてください。
記事のAMPページ Developer Tools

Consoleタブをクリックして「AMP validation successful.」てでれば合格です。

もしエラーが出てる場合はだいたい記事内のHTMLタグ(タイプミス)に問題がありますので1つ1つ対策(記事修正)してください。
また、記事(HTMLタグ)を修正したくない場合は「記事本文(content)の修正」を参照してください。

あとは Google Search Console(Googleサーチコンソール) で Googleにインデックス登録されていくのを見てムフフしましょう。

 



 

※↓ここから、難しくなってきます。

カスタマイズ

AMPプラグインはアクションフックを利用する事でさまざまなカスタマイズができます。
カスタマイズの説明はこちらに載っています。以下、その中の一部を紹介します。

GitHub Automattic/amp-wp
https://github.com/Automattic/amp-wp/blob/master/readme.md

またアクションフックのコードは my-plugin.php に張り付けてテストすると簡単です。
 

記事本文(content)の修正

AMPでは使用できるHTMLタグが制限されています。記事本文(content)内に入れているタグを修正しないとエラーがでる場合があります。
しかし通常表示の時は使いたいタグもあるので AMPで表示する時だけ消す例を紹介します。

【例】 a タグ内の rel=”lightbox[xxx]” を消したい。
AMP エラー例
WP jQuery Lightbox」を使っていると a タグ内に rel=”lightbox” とか rel=”lightbox[xxx]” と入りますが AMPではこれでエラーが出ますのでAMP表示の時だけ取り除きます。

/*
 * AMP Replace the specific tags.
 *
 * If you want to change the content.
 * License: GPLv2 or later
 */
function nendebcom_filter_amp_tags( $content ){

	if ( function_exists( 'is_amp_endpoint' ) ) {
		//Are we currently on an AMP URL?
		if( is_amp_endpoint() ){
			$pattern = '/rel=\"lightbox(.*?)\"|rel=\'lightbox(.*?)\'/i';
			$content = preg_replace_callback( $pattern, function ($s) { return ''; }, $content );
		}
	}
	return $content;
}
add_filter( 'the_content', 'nendebcom_filter_amp_tags', 999 );

※if( is_amp_endpoint() )でAMP用に使ってるのかどうかを判別していますのでその中で変換処理をしています。

個別にタグを修正する場合は個別に以下のように1つ1つ「if( is_amp_endpoint() )」内に追加してみてください。

	$content = str_replace( '修正したい文字', '修正後の文字', $content );

 

カスタムテンプレート

記事の本文(content)以外の部分でカスタムフィールドや特別な表現をしている場合は独自のテンプレートを作って切り替える事ができます。

サンプル

/*
 * Custom Template
 * If you want complete control over the look and feel of your AMP content, 
 * you can override the default template using the  amp_post_template_file
 * filter and pass it the path to a custom template:
 */
function xyz_amp_set_custom_template( $file, $type, $post ) {
    if ( 'single' === $type ) {
        $file = dirname( __FILE__ ) . '/templates/my-amp-template.php';
    }
    return $file;
}
add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );

※AMP対応のHTMLタグで作ってください。

 

カスタム投稿タイプもAMP対応にできます

サンプル カスタム投稿タイプ名を「xyz-review」として。

/*
 * Custom Post Type Support
 * By default, the plugin only creates AMP content for posts. 
 * You can add support for other post_types like so (assume our post_type slug is `xyz-review`):
 */
function xyz_amp_add_review_cpt() {
    add_post_type_support( 'xyz-review', AMP_QUERY_VAR );
}
add_action( 'amp_init', 'xyz_amp_add_review_cpt' );

※設置後に管理画面で「設定→パーマリンク設定」で 変更しなくていいので一度「変更を保存」ボタンを押してください。
※パーマリンクの設定によっては カスタム投稿タイプ用の urlの末尾につく「/amp」に対応するコードを追加しなければいけない場合もありました。

 

AMPプラグインは 投稿(post)ページしか対応してませんが
nendeb.jpでは固定ページも対象にしたかったので以下のコードを追加しました。

/*
 * Custom Post Type Support
 * By default, the plugin only creates AMP content for posts. 
 * You can add support for other post_types like so (assume our post_type slug is `xyz-review`):
 */
function nendebcom_amp_add_review_cpt() {
	add_post_type_support( 'page', AMP_QUERY_VAR );
}
add_action( 'amp_init', 'nendebcom_amp_add_review_cpt', 99 );

※固定ページ(page)もやっていいのかどうかはわかりません。

 

CSSを追加する

CSSを追加する事もできます。CSSはインライン記述になってますので以下のアクションフックで標準のCSSの後に追加されます。

/*
 * CSS を追加する
 * use the `amp_post_template_css` action. 
 *
 * License: GPLv2 or later
 */
function nendebcom_amp_additional_css_styles( $amp_template ) {
	// only CSS here please...
	?>
	.amp-sample-hogehoge {
		padding: 12px 0;
		background: #000;
	}
	<?php
}
add_action( 'amp_post_template_css', 'nendebcom_amp_additional_css_styles' );

 

カスタム投稿タイプ用のテンプレートも作って読み込ませる事もできます

サンプル カスタム投稿タイプ名を「xyz-review」として。

/*
 * Custom Post Type template
 * If you want a custom template for your post type:
 */
function xyz_amp_set_custom_template( $file, $type, $post ) {
    if ( 'single' === $type && 'xyz-review' === $post->post_type ) {
        $file = dirname( __FILE__ ) . '/templates/my-amp-review-template.php';
    }
    return $file;
}
add_filter( 'amp_post_template_file', 'xyz_amp_set_review_template', 10, 3 );

 

contentエリア内でカスタムフィールドを追加する

the_contentフィルターで予め、contentデータにカスタムフィールドデータを挿入しておきます。
このようにすると この後、AMPプラグインで contentデータ をAMP対応にうまく変換してくれます。

/*
 * Insert custom field data to the Content.
 * License: GPLv2 or later
*/
function nendebcom_add custumdata_amp_tags( $content ){
	global $post;
	$custum_data = '';
	if ( function_exists( 'is_amp_endpoint' ) ) {
		//Are we currently on an AMP URL?
		if( is_amp_endpoint() ){
			$post_id = get_the_ID();

			//カスタムフィールドデータを抽出
			//	$custum_data .= $post_idを使ってカスタムフィールド1データを抽出
			//	$custum_data .= $post_idを使ってカスタムフィールド2データを抽出
			//	$custum_data .= $post_idを使ってカスタムフィールド3データを抽出
			//カスタムフィールドデータを抽出

			$content .= $custum_data;
		}
	}
	return '' . $content;
}
add_filter( 'the_content', 'fudo_in_filter_amp_tags', 9 );

※これが一番、簡単で安全なのかもしれません。

 
 

Google Search Console( Googleサーチコンソール )

Googleサーチコンソール
サイトがAMP対応になると Google は何もしなくてもチェックしてるようです。設置後2日くらいで「AMP ページのエラーを修正してください」てメールは来ますし「Search Console」にはインデックスに登録されたAMPページ数やエラーのあるAMPページ数がグラフで表示されます。

「・・当分、修正に追われる日々が続くかもしれない」と思った次に「新規で作った時も今までのPCブラウザ+モバイルチェック に さらに AMPチェック(構造化・文法) が追加されたのか・・」と気がついた私でした。

 
 

参考

AMP HTML Specification
https://www.ampproject.org/docs/reference/spec.html

GoogleSearchConsoleヘルプ AMPページのGoogle検索ガイドライン
https://support.google.com/webmasters/answer/6340290?hl=ja&ref_topic=4589289

Accelerated Mobile Pages プロジェクトについて — 導入ガイド日本語版を本日公開しました
http://googlewebmastercentral-ja.blogspot.jp/2016/01/accelerated-mobile-pages.html

GitHub ampproject/amphtml
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md

 
 

こんなエラーが出た場合

パーマリンクが「基本」になっている場合、「Structured Data Testing Tool」で どうしても合格しない

ソースコードを張り付けると合格するのにURLではエラーがでます。

パーマリンクが「基本」の時はAMP表示の際にはURLの後ろに「&amp=1」(エンドポイント)をつけるのですが、どうやら &amp;と まちがって認識しているようです。(憶測です)

例 http://○○○/?p=xx&amp=1 → http://○○○/?p=xx&=1 と認識。

当然、このままだと Google Search Console( Googleサーチコンソール )では「schema.org Article のエラー」になっています。
誤認識の件は いつの日か Google が対策してくれるかもしれませんが、待てない場合は amp(エンドポイント)自体 変更する方法があります。

例 エンドポイントを「fudou_amp」に変更する。

/*
 * AMP Endpoint
 *
 * If you don't want to use the default `/amp` endpoint, use the 
 * `amp_query_var` filter to change it to anything else.
 *
 */
add_filter( 'amp_query_var', function(){ return 'fudou_amp'; } );

※URLの後ろに「&fudou_amp=1」とつけるようになります。

 

AMPページを開いたら こんなエラーが出た場合。又は真っ白になってる場合

Notice: AMP_Post_Template::verify_and_include が誤って呼び出されました。テンプレート (xxxxxxx\wp-content\plugins\amp/templates/single.php) のパス検証に失敗しました。パスは横断不可で、`WP_CONTENT_DIR` に設置する必要があります。

Windows等でのローカルでテストすると出てきます。その場合は wp-content/plugins/amp/includes/class-amp-post-template.php 内、以下のコード(強調部分)を コメントアウトしてください。

	private function verify_and_include( $file, $template_type ) {
		$located_file = $this->locate_template( $file );
		if ( $located_file ) {
			$file = $located_file;
		}

		$file = apply_filters( 'amp_post_template_file', $file, $template_type, $this->post );
	//	if ( ! $this->is_valid_template( $file ) ) {
	//		_doing_it_wrong( __METHOD__, sprintf( __( 'Path validation for template (%s) failed. Path cannot traverse and must be located in `%s`.', 'amp' ), esc_html( $file ), 'WP_CONTENT_DIR' ), '0.1' );
	//		return;
	//	}

		include( $file );
	}

2016/03/05 追記
※AMPプラグイン ver0.3.2 になって対策されました。