WordPressで投稿ごとにJSON-LDを出力するコードを書いたので紹介。
目次
JSON-LDの書き方
サイト上の記事で、schema.org/NewsArticle形式で、AMP向けに情報を指定してやれば、検索結果に意図したように情報を表示することができます。
例えば、JSON-LDで表記したとすると以下のような感じになります。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://nelog.jp/wordpress-amp-json-ld/"
},
"headline": "WordPressでAMPに対応した記事向けJSON-LDを出力する方法",
"image": {
"@type": "ImageObject",
"url": "https://nelog.jp/wp-content/uploads/2016/10/Wordpress-AMP-JSON-LD.jpeg",
"width": 890,
"height": 594 },
"datePublished": "2016-10-05T01:44:51+00:00",
"dateModified": "2016-10-05T01:46:12+00:00",
"author": {
"@type": "Person",
"name": "わいひら"
},
"publisher": {
"@type": "Organization",
"name": "Instant WordPress",
"logo": {
"@type": "ImageObject",
"url": "https://nelog.jp/wp-content/uploads/2016/10/nelog-logo.png",
"width": 128,
"height": 60
}
},
"description": "Wordpressで投稿ごとにJSON-LDを書き出すコードの紹介です。"
}
</script>
このように書くことで、タイトルや、サムネイル、投稿時間、ロゴなどが反映されて、Googleの検索結果のAMP部分に以下のように出力されます。
こういった、schema.orgについて詳しくは、以下を参照してください。
WordPressの投稿ごとにJSON-LDを出力する
で、Wordpressの場合だと、投稿ごとにいちいちJSON-LDを書くわけにはいかないので、Wordpress側から取得できる情報で、構造化データを出力してやる必要があります。
以下では、その方法について説明します。
functions.phpに関数を貼り付ける
まずは、functions.phpに以下のコードをコピペで追記してください。
//画像URLから幅と高さを取得する（同サーバー内ファイルURLのみ）
function get_image_width_and_height($image_url){
$wp_upload_dir = wp_upload_dir();
$uploads_dir = $wp_upload_dir['basedir'];
$uploads_url = $wp_upload_dir['baseurl'];
$image_file = str_replace($uploads_url, $uploads_dir, $image_url);
$imagesize = getimagesize($image_file);
if ($imagesize) {
$res = array();
$res['width'] = $imagesize[0];
$res['height'] = $imagesize[1];
return $res;
}
}
これは、投稿に割り当てられているアイキャッチ画像から、画像の幅と高さを取得する関数です。
JSON-LDでは、画像を指定する際は、幅と高さも指定する必要があるので、この関数を作成しました。
headタグ内にJSON-LD出力コードを貼り付ける
あとは、ヘッダーにある<head></head>内に、以下のコードを貼り付けます。
headタグは、大抵のテーマの場合は、header.phpにあるかと思います。
<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",
<?php
// アイキャッチ画像URLを取得
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($image_id, true);
if ($image) {
$image_url = $image[0];
//アイキャッチから画像の幅と高さを取得
$size = get_image_width_and_height($image_url);
$width = $size ? $size['width'] : 800; //画像の幅
$height = $size ? $size['height'] : 800;//画像の高さ
} else {
$image_url = 'アイキャッチが設定されていない時用の画像のURL';//画像URLの指定
$width = 696; //画像の幅
$height = 450;//画像の高さ
} ?>
"url": "<?php echo $image_url;?>",
"width": <?php echo $width; ?>, //画像の幅（（少なくとも696ピクセル以上が望ましい）
"height": <?php echo $height; ?> //画像の高さ
},
"datePublished": "<?php echo get_the_time('c'); ?>", //記事投稿時間
"dateModified": "<?php echo get_the_modified_time('c'); ?>", //記事更新時間
"author": {
"@type": "Person",
"name": "<?php the_author_meta('nickname'); ?>" //投稿者ニックネーム
},
"publisher": {
"@type": "Organization",
"name": "<?php bloginfo('name'); ?>", //サイト名
"logo": {
"@type": "ImageObject",
"url": "ロゴ画像のURL", ////画像URLの指定
"width": 600, //ロゴ画像の幅（幅600px以下）
"height": 60 //ロゴ画像の高さ（高さ60px以下）
}
},
"description": "<?php echo mb_substr(strip_tags($post->post_content), 0, 110); ?>…" //通常のテーマでは投稿から説明文は取得できないので本文の抜粋を取得する
}
</script>
「アイキャッチが設定されていない時用の画像のURL」や「ロゴ画像のURL」は自前でアップロードして、画像の幅と高さも併せて指定してください。
imageのurlは、幅が696px以上ないと、警告が出ます。ですので、696px以上のアイキャッチを設定する必要があるようです。
logoのwidthは600px以下である必要があります。また、logoのheightは60px以下である必要があります。
descriptionに関しては、通常のテーマの場合、Wordpressの投稿情報からだけでは、記事の説明文は取得できないため、本文の抜粋で代用しています。
schema.org/NewsArticleについて詳しくは、以下を参照してください。
まとめ
こんな感じで、2回コピペするだけで、Wordpress投稿情報からJSON-LDを出力できるようになりました。
とりあえず、この書き方でGoogle Search ConsoleのAMP（Accelerated Mobile Pages）の構造化エラーも出なくなりました。
というわけで、「GoogleのAMP検索結果に意図通りの情報を表示したい」という場合は、JSON-LDを使った出力を試してみると良いかもしれません。
