【AMP】スマホページが要らなくなる?WordPressとの連携方法

AMPとは、「Accelerated Mobile Pages」のことで
GoogleTwitterが協同で策定したプロジェクト。

詳細については、以下のサイトさんがよくまとまっている。

qiita.com

AMPについて検索してみると
AMPは「カルーセルのみに表示される」のように
書いているサイトさんも見受けられるが
現在は通常の検索結果でもAMPが表示されている。

「渋谷 イタリアン」で検索した例)
f:id:Thoames1212:20170829044205p:plain

AMPでは外部Javascriptが使用できないため
リッチなサイトの作成は難しそうだが

などのコンポーネントは使えるため、
オーソドックスなサイト作成には、問題ないと思われる。

AMPの広告対応も、Adsenseだけではなく

  • A8net
  • AccessTrade
  • ValueCommerce

なども対応しているようだ。

[参考]
amp-ad / amp-embed – AMP

WordPressでのAMP作成方法

AMPの作成方法には

の方法がある。手っ取り早く使いたい場合は
プラグインが良いだろう。

記事作成時点では以下のWordPressプラグインが存在するが
AMP」のプラグインがメジャーっぽい。
※記事作成時のGithubのスター数で比較。「AMP」が1009、「AMP for WP」が61

[AMP]
ja.wordpress.org

[AMP for WP]
wordpress.org

[AMP]を使用する前提で書くが
デフォルトのデザインは簡易なものなので
CSSの変更は必須。

<?php

add_action( 'amp_post_template_css', 'amp_base_css' );

function amp_base_css( $amp_template ) {
    echo file_get_contents(get_stylesheet_directory_uri() .'/amp-base.css');
}

その他以下のような変更がフィルターを設定するだけで可能だ。

Feature画像の非表示
<?php

add_filter( 'amp_post_template_data', 'xyz_amp_remove_featured_image' );

function xyz_amp_remove_featured_image( $data ) {
    $data['featured_image'] = false;
    return $data;
}
コンテンツ幅の変更
<?php

add_filter( 'amp_content_max_width', 'xyz_amp_change_content_width' );

function xyz_amp_change_content_width( $content_max_width ) {
	return 1200;
}
Schema.orgメタデータの変更
<?php

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' => get_template_directory_uri() . '/images/my-amp-metadata-logo.png',
		'height' => 60,
		'width' => 600,
	);

	return $metadata;
}

詳細は以下のリンクを参照
GitHub - Automattic/amp-wp: WordPress plugin for adding AMP support