Share on FacebookTweet about this on TwitterShare on Google+

いつのまにか、Googleさんがどしどし進めて検索にも反映されたAMP – ACCELERATED MOBILE PAGES PROJECT。

Googleウェブマスターにも項目が追加され「まだやってないの?」感の圧をかけてきます。

amp01

以前D2Dという勉強会でキックオフをやりました。
http://www.pictron.net/2015/11/02/d2d-amp-workshop-v1-0-note-2015113%EF%BC%88%E7%81%AB%EF%BC%89/

※D2Dとは”Dev & Design Draft” 特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズです。
http://d2draft.net/

これに対応する現実的な手法として提供されているのがWordpressの開発元であるautomaticからリリースされているWordpressのAMPプラグインでカノニカルタグで指定する別ページを自動生成するという手法です。
このプラグインの0.1をテストサイトに入れていたのですが、知らない間に0.3.1になっていました。いつものプラグインのようにバージョンアップ出てこない……
中身もだいぶ変わっている……
https://wordpress.org/plugins/amp/

このプラグインをインストールして、ダッシュボード見ても設定も何もありませんので、とりあえずこれだけでいいのかな?と思ってしばらくしてGoogleウェブマスター見ると

AMPのエラーを修正してください。

との事。
Google Developers データ構造の確認ページでampページのURLを入れて確認します。

https://developers.google.com/structured-data/testing-tool/

そうすると

amp02

logo 必須プロパティの欠落

と出ています。
原因を調べるとPluginフォルダの中にあるマークダウンファイルに記述がちゃんと書いてありました、このプラグインは管理画面の設定などはなくfunction.phpにフィルター追記で設定していくというデザイナーには目頭が熱くなる仕様なのです。
開発がどんどん進んでいる過程だからかもしれませんけどね。

このマークダウンは
https://github.com/Automattic/amp-wp
でも見れます。

そこでまずエラーを回避するために最低限いれないといけないのが、メタデータのロゴ指定

add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );

function xyz_amp_modify_json_metadata( $metadata, $post ) {
	$metadata['@type'] = 'NewsArticle';

	$metadata['publisher']['logo'] = array(
		'@type' => 'ImageObject',
		'url' => '指定のロゴURL',
		'height' => 41,
		'width' => 164,
	);
	return $metadata;
}

ページのテンプレートはプラグインのフォルダのtemplatesのフォルダにはいっています。

amp04
このテンプレートファイルを自分のテーマ内で上書きするためには、この中のsingle.phpを自分のテーマ内に任意の名前で複製します。仮にmy-amp-theme.phpとします。

add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );

function xyz_amp_set_custom_template( $file, $type, $post ) {
if ( 'single' === $type ) {
$file = テーマのパス. '/my-amp-theme.php';
}
return $file;
}

で、カスタムテンプレートを使います。
カスタムテンプレート内でヘッダーに表示されるアイコン画像は$site_icon_urlで呼び出していますが、これは

add_filter( 'amp_post_template_data', 'xyz_amp_set_site_icon_url' );

function xyz_amp_set_site_icon_url( $data ) {
// Ideally a 32x32 image
$data[ 'site_icon_url' ] = '指定のロゴURL';
return $data;
}

で指定します。

ここまで指定しました。

amp03
これでデータ構造の確認ページで確認すると問題がないようなので、とりあえずこれで進めてみます。

他にもCSSやFeatured Imageなどマークダウンファイルにfunction.phpへの追記のコードがあるので、また試してみます。

一番下部にAMPページのGoogle Analyticsのトラッキングコードの追加のコードが記述してあります。
WP Total hackなどで入れているトラッキングコードはAMPページには追記されませんので、自分でamp_post_template_analyticsフィルターで追記します。

この中で

‘apikey’ => ‘YOUR APIKEY GOES HERE’,

となっているところは、
https://developers.google.com/

でAnalyticsのAPI KEYを取得して入力します。

前回のイベントはあまり人が集まりませんでしたが、今度やったら少しは集まるかな?