がとらぼ

INTAA.NET

またしてもGoogleの独自路線により、多くのウェブサイト運営者が新しい提案に翻弄されています。今回の話題はAMP (Accelerated Mobile Pages) です。AMPは、特定のタグを使用してページを簡素化することで、Googleがキャッシュし、モバイル端末に高速で表示できるようにする仕組みです。HTMLのサブセットのようなタグで記述され、使えるタグが制限されているものの、CSSは使用可能なので、デザイン面では極端な制約は感じません。しかし、PHPを用いて動的に出力することはできても、JavaScriptは利用できないため、ページの一部や全体を動的に更新することはできません。

もしWordPressを使用しているなら、Automatticが提供しているAMPプラグインを導入することで、一から自分で作成するより手間をかけずにAMP対応が可能です。しかし、現在のところ、このプラグインはまだ「簡単」と呼べるほどの使い勝手ではありません。

2016年12月18日追記
最近人気が高まりつつあるのが、AMP for WP - Accelerated Mobile Pagesというプラグインです。このプラグインは管理画面から様々な設定が可能で、AMPプラグイン単独よりも扱いやすいかもしれません。開発も盛んに行われているようです。ただし、AMP for WPはAMPプラグインに依存しているため、AMPプラグインの代替品ではありませんのでご注意ください。
追記の追記: AMP for WPのバージョン0.8以降では、AMPプラグインを必要としなくなりました。それどころか、二つを同時に使用すると競合が発生するため、注意が必要です。

このプラグインを使うには、php.iniでallow_url_fopen = Onに設定する必要があります。個人的には少し気になる点です。
AMPプラグイン用の設定メニューはありませんが、「設定」内の「パーマリンク設定」を開き、変更せずに「保存」ボタンを一度押す必要があるようです。また、2016年4月現在、このプラグインは投稿ページのみ対応しており、固定ページには対応していません。AMP用のURLは、例えば投稿ページのURLがhttp://example.com/archives/1234の場合、http://example.com/archives/1234/amp/または/?amp=1という形式になります。プラグインを有効化すれば、すぐにAMP用のURLが使えるようになります。

ブラウザで表示すると、このようになります。とても、シンプルなページが表示されます。

ブラウザで表示してみると、ユーザーの見た目には以上はありませんが、AMPとしては実は問題を抱えています。
Google DevelopersのStructured Data Testing Toolを使って仮対応したAMPページのURLをテストした結果、以下のようなエラーが確認されました。

「必須プロパティの欠落」というエラーが2つ発生しています。

WordPressのパスにある/wp-content/plugins/amp/readme.mdファイルには、様々な情報が記載されていますが、少々読みにくい部分もあります。GitHub上のreadme.mdを見る方が分かりやすいかもしれません。

AMPプラグインには、専用の管理画面が用意されていないため、簡単に済ませたい場合はAMP用のテーマを編集する必要があります。AMP用テーマの雛形はwp-content/themes/plugins/amp/templateにありますが、プラグインの更新時に上書きされてしまうため、直接編集するのは避けましょう。代わりに、現在使用しているテーマディレクトリ内にampというフォルダを作成し、その中にテンプレートファイルをコピーしてから編集します。スタイルシートはstyle.cssではなくstyle.phpを編集する点に注意が必要です。

% cd /WORDPRESS/wp-content/themes/使用中テンプレート
% mkdir amp
% cd amp
% cp -pR ../../../plugins/amp/templates/*.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対応のためには、作成したampディレクトリ内のファイルを変更したり、必要に応じて追記することになります。もちろん、画像のURLなど、各項目の設定値は自分のサイトに合わせて変更してください。念のためですが、エラーになっていたロゴ自体は修正対象ではありません。

サイトの構造に関連する「パブリッシャーのロゴ」に関するエラーを解決するためには、readme.md内に記載されている「Schema.org (JSON) Metadata」セクションのコードをfunctions.phpの最後に追加します。ここでも、画像URLやその他の情報は必ず自分のサイトに合わせてカスタマイズしてください。なお、画像サイズは600x60px程度にしないとエラーになります。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」はコピーして編集する必要があるでしょう。プラグインのファイルを直接編集してしまうと、プラグインの更新時に上書きされてしまうため、注意が必要です。

style.cssを少しだけカスタマイズしたところ、元々のモバイルページに似た見た目になり、ひとまずはこれで満足できる状態になりました。

さて、AMP対応ページをGoogleにインデックスさせる方法ですが、AMPプラグインを利用している場合、非AMPページのHTMLヘッダー内に以下のようなコード行が追加されているはずです。これが確認できれば、Googleはこの情報を使ってAMPページをインデックスしてくれるはずです。

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

• WordPressのAMPプラグインを使う 2019年1月 後編
• WordPressのAMPプラグインを使う 2019年1月 前編
• AMP対応とは (おさらい)
• WordPressのAMP対応 ←いまここ