planet-green.com

[開発/備忘録] WordPressでSchema.org用JSON-LDを出力(複数画像対応)



WordPressで構造化データ(schema.org用)のJSON-LDを<head>内に出力する関数です。function.phpに追記してください。

ネットで調べてみると似たようなコードはいくつかありましたが、複数の添付画像・複数のカテゴリーに対応したものが無かったので自作しました。

function insert_json_ld_for_schema_org()
{
	if( !is_single() || !have_posts() ) {
		return;
	}
	
  //あなたのサイトのロゴ画像をここで設定してください
  $logo = array(
		'@type' => 'ImageObject',
		'url' => 'http://*****/****.jpg',
		'width' => '240',
		'height' => '80'
	);
	
	while (have_posts()) {
		the_post();
		$category_info = get_the_category();
		if( count($category_info) > 1 ) {
			$articleSection = array();
			foreach( $category_info as $ct )
			{
				$articleSection[] = $ct->name;
			}
		} else 	{
			$articleSection = $category_info[0]->name;
		}
		
		//添付画像を取得
		$attachments = get_children( array( 'post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
		
		$images = array();
		foreach($attachments as $image) {
			$src = wp_get_attachment_image_src( $image->ID, 'medium' );
			$images[] = array(
				'@type' => 'ImageObject',
				'url' => $src[0],
				'width' => strval($src[1]),
				'height' => strval($src[2])
			);
		}
		
		//添付画像が無い場合はアイキャッチ画像を取得
		if( !count($images) ) {
			if( has_post_thumbnail() ) {
				$thumbnail_id = get_post_thumbnail_id(); 
				$src = wp_get_attachment_image_src( $thumbnail_id , 'medium' );
				$images = array(
                                	'@type' => 'ImageObject',
                                	'url' => $src[0],
                                	'width' => strval($src[1]),
                                	'height' => strval($src[2])
				);
			} else {
				//それも無い場合はロゴ画像をセット
				$images = $logo;
			}
		}
		$data = array(
			'@context' => 'http://schema.org',
			'@type' => 'Article',
			'headline' => get_the_title(),
			'author' => array(
					'@type' => 'Person',
					'name' => get_the_author(),
			),
			'datePublished' => get_the_date('Y-m-d'),
			'dateModified' => get_the_modified_time( 'Y-m-d' ),
			'articleSection' => $articleSection,
			'url' => get_permalink(),
			'mainEntityOfPage' => array(
				'@type' => 'WebPage',
				'@id' => get_permalink()
			),
			'publisher' => array(
				'@type' => 'Organization',
				'name' => get_bloginfo('name'),
				'logo' => $logo,
			),									
			'image' => $images,
		);
		
		//php5.4以前のバージョンではオプション引数(JSON_UNESCAPED〜)を削除すれば大丈夫だと思います。
		echo '<script type="application/ld+json">'
			.json_encode($data, JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT)
			.'</script>'.PHP_EOL;
	}
	rewind_posts();
}
add_action('wp_head','insert_json_ld_for_schema_org');

出力サンプル。

<script type="application/ld+json">{
    "@context": "http://schema.org",
    "@type": "Article",
    "headline": "[Photo] 幌見峠のラベンダー園",
    "author": {
        "@type": "Person",
        "name": "tomoya"
    },
    "datePublished": "2017-04-08",
    "dateModified": "2017-04-08",
    "articleSection": "Photo",
    "url": "https://planet-green.com/horomitouge-lavender/1501",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://planet-green.com/horomitouge-lavender/1501"
    },
    "publisher": {
        "@type": "Organization",
        "name": "planet-green.com",
        "logo": {
            "@type": "ImageObject",
            "url": "https://planet-green.com/wp-content/uploads/2017/03/Twenty-Seventeen-capture-2017-03-28-.jpg",
            "width": "640",
            "height": "573"
        }
    },
    "image": [
        {
            "@type": "ImageObject",
            "url": "https://planet-green.com/wp-content/uploads/2017/04/horomitouge-7399-720x480.jpg",
            "width": "720",
            "height": "480"
        },
        {
            "@type": "ImageObject",
            "url": "https://planet-green.com/wp-content/uploads/2017/04/horomitouge-7418-720x480.jpg",
            "width": "720",
            "height": "480"
        },
        (略)
    ]
}</script>

そのSchema.orgなんですが、仕様についてネット上の情報が錯綜している上に、公式サイトの説明も曖昧で、いまいちよくわからない部分が多いのですよね。

例えば、記事タイトルはnameプロパティで指定すると書いてあるサイトもあれば、headlineプロパティで指定すると書いてあるサイトもあります。
Schema.org公式サイトでは簡素にnameはname、headlineはheadlineと書いてありますが言葉の定義についての説明が無いのです。

しかもgoogleまで錯綜していて、Search Console(webmasterツール)の 〔その他のリソース〕 にある 〔構造化データ マークアップ支援ツール〕 を使って画像タグのマークアップをしても、〔構造化データ テスト ツール〕を使ってチェックするとエラーになるという状態です。

そこで上記のPHP関数は、私が調べた範囲において最大公約数的な解釈をして実装しました。
間違いがありましたらコメントでご指摘していただけると幸いです。

コメント