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を使った出力を試してみると良いかもしれません。