iscle [イズクル] - あなたの生活に役立つネタを!

WPプラグイン『AMP』をカスタマイズしてGoogleテストツールで合格させる

竹中文人
執筆者:
[最終更新日]2016/10/17
[カテゴリ]SEO, Wordpress
このページの記事内容は古いため、最新版のこちらの記事をご覧ください。とても簡単にAMPに対応させることができます。

先日【コピペでGoogleのAMPに対応させるコード公開!】という記事で、GoogleのAMPに対応したWordPress用のコードをご紹介致しました。Googleの『構造化データテストツール』でも「問題ありません」と合格点をもらって満足していたのですが、これだけでは不十分であることを知りました。

AMP用コードを普段観覧できるWebページに入れているだけでは、下図のようにGoogleの検索結果表示されないようなのです。
2016seo-01

検索結果に表示させたければ、

  • AMP用のページを出力する必要があること
  • WordPressのAMP用プラグインがあること

海外SEO情報ブログのKenichi Suzukiさんに教えて頂きました。つまり普段観覧しているWebページとは別に表示するAMP用ページが必要なのです。

WPプラグイン『AMP』

AMP用のページを出力してくれるWordPressのプラグイン『AMP』がありますので、それをインストールしてみてください。(SSL化しているサイトでも対応しています。)

このページでご紹介しているカスタマイズ方法はプラグイン『AMP』のバージョン0.1(Development Version)を使用しています。理由はバージョン0.2でも不完全で、ファイル構造が複雑となってカスタマイズしにくいからです。
プラグイン『AMP』のページ

有効化すれば特に設定する画面はありません。有効化したら普段観覧しているURLの後に「?amp」か「/amp」を付けてアクセスしてください。AMP用のページが表示されます。※パーマリンクの設定によって異なるので、両方試してみてください。

このページのURLであれば

https://www.iscle.com/web-it/seo/google-amp-img.html?amp

のようにします。

このようなAMP用のシンプルなページが表示されると思います。
AMP用ページ

プラグインをインストールするだけなので簡単だ!と思われるかもしれませんが、実は完璧ではないのです。Googleの『構造化データテストツール』でチェックをしても「問題ありません」と表示されません。必須プロパティである「image」のデータが出力されていないのです。
amp-wp02

imageも出力されるようにカスタマイズ

まだリリースされたばかりのプラグインだからなのか、必須プロパティであるデータが出力されません。これを放置しておくわけにはいきませんので、プラグインのファイルにコードを自分で追加できないか確認しましたが、私には複雑すぎてよく分かりませんでした。

プラグインに記載されているコードに付け足すことはできませんでしたが、AMP用コードを出力する部分全てをオリジナルにカスタマイズして対応することができました。

※この記事作成時点でプラグインのバージョンが「0.1」で完全版ではありません。下記カスタマイズはプラグインのファイルを直接変更するため、バージョンアップによってカスタマイズ内容が上書きされてしまう可能性があります。また念の為にサイトのバックアップもとってから作業してください。

『AMP』カスタマイズ方法

AMPプラグインの[template.php]にある下記のコード(上から13行目あたり)を探してください。

<script type="application/ld+json"><?php echo json_encode( $amp_post->get_metadata() ); ?></script>

このコードを下記ページに記載したコードに変更します。

上記ページにあるコードの前後に下記phpを入れてください。

<?php if(is_single()||is_page()) { ?>
 <?php while (have_posts()) : the_post(); ?>

// ここにコードを入れる

 <?php endwhile; ?>
 <?php } else { ?>
 <?php } ?>

例えば、投稿にアイキャッチ画像を必ず設定している場合であれば下記のように変更します。
※ロゴのURLやauthorのnameの部分は、ご自身のサイトに合わせて変更してください。

 <?php if(is_single()||is_page()) { ?>
 <?php while (have_posts()) : the_post(); ?>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"<?php the_permalink(); ?>"
},
"headline": "<?php the_title();?>",
"image": {
"@type": "ImageObject",
"url": "<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
?>
<?php echo $image_url[0]; ?>",
"height": 800,
"width": 800
},
"datePublished": "<?php the_time('Y/m/d') ?>",
"dateModified": "<?php the_modified_date('Y/m/d') ?>",
"author": {
"@type": "Person",
"name": "<?php the_author_meta('nickname'); ?>"
},
"publisher": {
"@type": "Organization",
"name": "<?php bloginfo('name'); ?>",
"logo": {
"@type": "ImageObject",
"url": "<?php bloginfo('template_directory'); ?>/images/logo.png",
"width": 130,
"height": 53
}
},
"description": "<?php echo mb_substr(strip_tags($post-> post_content), 0, 60); ?>…"
}
</script>
 <?php endwhile; ?>
 <?php } else { ?>
 <?php } ?>

画像サイズの取得までできていないので、出来るようになったら追記したいと思います。

カスタマイズ後に『構造化データテストツール』でチェックすると・・・
amp-wp03

「問題ありません」が表示されました!まだ改善の余地がありますが、とりあえずAMPに対応しておきたいという方は利用してみてください。今後プラグイン自体が完全に対応してくれるようになってくれれば良いのですがね。