WordPressのAMP対応

またもGoogleのある意味独善的な提案によってウェブサイト提供者は振り回されている。今度はAMP (Accelerated Mobile Pages)だ。HTMLのサブセットみたいなタグでページを適切に記述するとGoogleがキャッシュしてモバイル端末に高速に表示してくれるらしい。使えるタグは制限されるけどCSSは使えるので装飾面では極端に不自由することはない。PHPなどで動的に出力することは可能だが、Javascriptなどは使えないのでページ表示後にその一部または全体を更新表示するような意味での動的な表示は行えない。

WordPressを使っているならAutomatticが出してるAMPプラグインを使えば自分で1から作るよりは苦労せずにAMP対応できるようになっている。でも、現在のAMPプラグインはまだ「簡単」といえる程にはなっていない。

2016年12月18日追記
AMP for WP - Accelerated Mobile Pagesというプラグインが人気になりかけてるみたい。管理画面からいろいろできるのでこの記事で紹介しているAMPプラグイン単独より取っ付きやすいかも。開発も活発みたいだし。なお、AMP for WPはAMPプラグインを必要とするのでAMPプラグインの代替になるものではないので勘違い無く。
追記の追記: AMP for WPのVer.0.8から全く別物になっていてAMPプラグインを必要としません。というか混ぜるな危険レベルになってます。

このプラグインを使うにはphp.iniでallow_url_fopen = Onにする必要がある。これ個人的には微妙に嫌。
AMPプラグイン用の管理者メニューの設定項目は無いけど「設定」から「パーマリンク設定」の(設定内容自体は変えずに)「保存」ボタンを一回押してやる必要があるらしい。
2016年4月末現在は投稿ページのみ対応で固定ページは非対応。
AMP用のURLは元の投稿ページが例えば数字形式のhttp://example.com/archives/1234ならhttp://example.com/archives/1234/amp/ (または末尾が/amp/じゃなくて/?amp=1)になる。
プラグインを有効にしたらすぐにAMP用URLが使える。

AMP対応 1
ブラウザで表示してみるとこんな感じ。凄くシンプルなページが表示されている。

ただし、一見正常そうなこのページはまだ問題がある。
Google DevelopersのStructured Data Testing Toolで仮対応したAMPページのURLを入力してテストしてみた結果。

AMP対応 2
「必須プロパティの欠落」というエラーが2つ表示されている。

/WordpressのPath/wp-content/plugins/amp/readme.mdを見るといろいろ書いてある。でも、読みにくいのでGitHub上のreadme.mdを見る方が良いかも。

AMPプラグインは管理者画面にこのプラグイン用のメニュー設定無いので簡単に済まそうと思ったら基本的にはAMP用のテーマを弄ることになる。wp-content/themes/plugins/amp/templateの下にAMP用のテーマの雛形がある。これはAMPプラグインを更新すると上書きされるファイルなので直接触らずに、テンプレートディレクトリ内のファイルの全てまたは変更するファイルだけを現在使用中の非AMPテーマディレクトリ下にampというディレクトリを作成してそこにコピーする。触るのはコピー先のファイルの方。スタイルシートはstyle.cssではなくstyle.phpなので注意。

つまり
% cd /WORDPRESS/wp-content/themes/使用中テンプレート
% mkdir amp
% cd amp
% cp -pR ../../../plugins/amp/templates/*.php ./  #管理関係以外全て
wp-content/themes/使用している通常テーマ/amp/style.php (追記または変更)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
nav.amp-wp-title-bar {
    padding: 12px 0;
    background: #000;
}
nav.amp-wp-title-bar a {
    background-image: url( 'https://example.com/path/to/logo.png' );
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 28px;
    width: 94px;
    margin: 0 auto;
    text-indent: -9999px;
}

例えばこのサイトの一番上にある「がとらぼ」みたいにサイトロゴを文字で表示しているだけなら不要だけど、サイトロゴを画像にしている場合、上のreadme.mdに従うならこういうのをfunctions.phpの最後にでも追記する。作成したampディレクトリ内のファイルを変更したり追記する。もちろん画像URLなど各項目の値は自分のサイト用に変更する。なお、先に挙げたエラーになっていたロゴではないので念の為。

構造側のパブリッシャーのロゴのエラーを解決するならreadme.mdの「Schema.org (JSON) Metadata」の項目にあるメタデータロゴ用コードをfunctions.phpの最後にでも追記する。もちろん画像URLなど各項目の値は自分のサイト用に変更する。なお、画像サイズは600 x 60px程度にしておかないとサイズでエラーになる。2018年後半から(少なくともGoogleさんに気に入ってもらうには)幅1200px以上に変更になった模様。下は1280x720pxの画像を指定するように変更した。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
add_filter( 'amp_post_template_metadata', 'amp_schema_images_addition', 10, 2 );

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

    $metadata['publisher']['logo'] = array(
        '@type' => 'ImageObject',
        'url' => get_template_directory_uri() . '/images/my-amp-metadata-logo.jpg',
        'height' => '60',
        'width' => '600',
    );

    if(empty($metadata['image'])) {
      $metadata['image'] = array(
        '@type' => 'ImageObject',
        'url' =>  get_template_directory_uri() . '/images/my-amp-metadata-logo2.jpg',
        'height' => '720',
        'width' => '1280',
      );
    }

    return $metadata;
}

この例ではスキーマがNewsArticleになっているけどブログならBlogPosting、ニュースでもブログでもない記事(どんなの？)ならArticleを指定する。

もうひとつStructured Data Testing ToolでエラーになっていたImageの必須プロパティが無い件については2016年4月現在のAMPプラグインがそもそも対応できていないみたい。
既に仮対応して公開している方がいたので「AMPページのエラーを修正してください」に対応してみる。のページを参考にさせて貰う。
そもそもこのImageプロパティが何を目的としたものか(一応「記事の画像」ということだが)なぜ画像が必須なのかよく理解できていないので透明のダミーPNGファイルにした。もしかしたらWordpressの日本語訳でいうところの「アイキャッチ画像」でも付けてやれば良いのだろうか？こちらの画像も大きさがある程度決まっているらしく少なくとも700x200px程度2018年後半より幅1200px以上になったで作らないとStructured Data Testing Toolではサイズエラーになる。

これでStructured Data Testing Toolのエラーは何とかなったが、そもそもAMP対応ページの見た目がショボすぎる。そこで使用中のテーマディレクトリにampというディレクトリを作成し、そこに/WordpressのPath/wp-content/plugins/amp/templatesにあるファイルをコピーする。全部コビーしても良いし変更するファイルだけでも構わない。おそらく最低でもstyle.cssはコピー&編集することになる筈。プラグインのディレクトリ内のファイルを直接編集するとプラグインを更新したときに上書きされて泣くことになる。

AMP対応 3
stlye.cssをちょろっと弄ったらなんとなく元々のモバイル用ページに似せた感じになったので取り敢えずはこれで良しとする。

で、AMP対応ページをGoogleにインデックスして貰う方法だけどAMPプラグインを使っているなら非AMPページのソースのHTMLヘッダ内に下のような行が追加されている筈なので確認できればOK。Googleはこの情報でAMPページをインデックスしてくれる筈。

<link rel="amphtml" href="https://example.com/archives/nnnnn/amp" />
関連記事: