AMPプラグイン有効後のエラー対策

knishika

8年前

AMP Plugin
Wordpressで作ったサイトを簡単にAMP（Accelerated Mobile Pages）化できるAMPプラグイン。有効にしてテストサイトで確認するとエラーだらけ。どうもBJ Lazy Loadプラグインとmod_pagespeedが合わないようだ。対策は…。

まずmod_pagespeedをOFFにしなければならないが、OFFにすると全てのページに影響するので、/ampのあるurlだけOFFにする。以下を.htaccessへ追加。

ModPagespeedDisallow “*/amp/*”

次に、BJ Lazy Loadプラグインも無効にすると全ての画像に影響するので、function.phpへ以下のコードを追加。AMPプラグインが生成したページのみ無効とする。

function bjll_compat_amp() {
  if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {
    add_filter('bjll/enabled','__return_false');
  }
}
add_action('bjll/compat','bjll_compat_amp');

function bjll_compat_amp() {

if (function_exists('is_amp_endpoint') && is_amp_endpoint()) {

add_filter('bjll/enabled','__return_false');

}

add_action('bjll/compat','bjll_compat_amp');

これで取りあえず投稿ページのみがAMP対応となる（urlの後ろへ/ampを付ける）。

構造化データでもlogoとショートコードshareを使った時のimageでエラーがあったのでコードを追加。

add_filter('amp_post_template_metadata','amp_modify_metadata',10,2);
function amp_modify_metadata($metadata,$post) {
  global $share_image_url;

  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => 'http://blog.iwh12.jp/wp/wp-content/uploads/2017/02/amp_logo.jpg',
      'height' => 60,
      'width' => 600
  );

 if(empty($metadata['image'])) {
    $image_info = getimagesize($share_image_url);
    $metadata['image'] = array(
      '@type' => 'ImageObject',
      'url' => $share_image_url,
      'height' => $image_info[1],
      'width' => $image_info[0]
    );
  }

  return $metadata;
}

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

function amp_modify_metadata($metadata,$post) {

global $share_image_url;

$metadata['publisher']['logo'] = array(

'@type' => 'ImageObject',

'url' => 'http://blog.iwh12.jp/wp/wp-content/uploads/2017/02/amp_logo.jpg',

'height' => 60,

'width' => 600

);

if(empty($metadata['image'])) {

$image_info = getimagesize($share_image_url);

$metadata['image'] = array(

'@type' => 'ImageObject',

'url' => $share_image_url,

'height' => $image_info[1],

'width' => $image_info[0]

);

}

return $metadata;

}

logoは元々無いので作ってアップロード（幅600px以下、高さ60px以下）。ショートコードでshareした時の画像urlはglobal $share_image_urlに入っているので、そこから値をセット。これでエラーは無くなった。余談になるが、このコード、あっちこっちで同じものを見かけるが、arrayの最後は,不要。

この他、Google AnalyticsとGoogle AdSense、フォントの設定なども別途必要となるものの、これはググれば山のように出てくるので省略。

AMP化したこのページはこちら。しかし、古のiモード時代ならともかく、4G回線とパフォーマンスやメモリ、パネル解像度などが一般的なPCに追いつけ・追い越せ状態のスマホで、少し速いだけの（画像を数枚貼れば誤差の範囲）こんな味も素っ気もないページを見る（もしくは作る）必要あるのだろうか？