JSON-LDでschema.org v2.0対応の構造化データを出力する(パンくずリスト・AMP)

vector-wrench-and-screwdriver-xxl-icon_sizeXS.jpg

Google の AMP(Accelerated Mobile Pages)やリッチスニペット対応で必要になる、schema.org v2.0 準拠の構造化データを JSON-LD 形式で出力する方法です。

久しぶりに Google の構造化データテストツールでこのサイトを見てみたら色々とエラーが出てまして、そういえば、まだ schema.org v2.0 に対応していないことに気がついたので対処しました。

ついでなので、パンくずリストも JSON-LD で出力してみました。

WordPress 向けの「Articles」の JSON-LD 出力コードはこんな感じ。

global $post;
$post_data = $post;
$category = get_the_category();
$payload["@context"] = "http://schema.org/";

// JSON-LD for every signle article page.
if (is_single()) {
 $author_data = get_userdata($post_data->post_author);
 $post_url = get_permalink();
 $post_thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),"large");
 $payload["@type"] = "Article";
 $payload["mainEntityOfPage"] = array(
 "@type" => "WebPage",
 "@id" => $post_url
 );
 $payload["url"] = $post_url;
 $payload["author"] = array(
 "@type" => "Person",
 "name" => $author_data->display_name,
 );
 $payload["headline"] = $post_data->post_title;
 $payload["datePublished"] = get_the_time('c');
 $date_modified = tr_func_get_the_modified_date( TRUE ); // ISO-8601形式
 $payload["dateModified"] = $date_modified;
 $payload["image"] = array(
 "@type" => "ImageObject",
 "url" => $post_thumb[0],
 "width" => $post_thumb[1],
 "height" => $post_thumb[2]
 );
 $payload["ArticleSection"] = $category[0]->cat_name;
 $payload["Publisher"] = array(
 "@type" => "Organization",
 "name" => "TeraDas",
 "logo" => array(
 "@type" => "ImageObject",
 "url" => "http://example.com/YOUR_SITE_LOGO.png"
 )
 );
 $payload["articleBody"] = remove_published_date_from_content($post_data->post_content);
}
echo '<script type="application/ld+json">'.json_encode($payload).'</script>';

WordPress 向けの「BreadcrumbList(パンくずリスト)」の JSON-LD 出力コードはこんな感じ。

global $post;
$payload = array();

// breadcrumb payload
$payload["@context"] = "http://schema.org/";
$payload["@type"] = "BreadcrumbList";
$payload["itemListElement"] = array ();

if (is_single()) {
 $itemListArray = array();
 $i = 0;
 $categories = get_the_category($post->ID);
 $cat = $categories[0];
 if ($cat -> parent != 0) {
 $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
 foreach($ancestors as $ancestor){
 $itemListArray[$i] = array (
 "@type" => "ListItem",
 "position" => $i+1,
 "item" => array (
 "@id" => get_category_link($ancestor),
 "name" => get_cat_name($ancestor)
 )
 );
 $i++;
 }
 }
 $itemListArray[$i] = array (
 "@type" => "ListItem",
 "position" => $i+1,
 "item" => array (
 "@id" => get_category_link($cat -> term_id),
 "name" => $cat-> cat_name
 )
 );
 
 $payload["itemListElement"] = $itemListArray;
 echo '<script type="application/ld+json">'.json_encode($payload).'</script>';
}

実際にはこのほか、image プロパティの画像の幅は最低でも696ピクセル以上が必要、publisher.logo で指定する画像のサイズは 600×60px 以内でなければならない、など、画像サイズの規定もあるので要注意です。

それにしても、microdata の時代に比べると色々楽になりましたよね。

今回はとりあえず、自分用のメモとして書いておきました。

参考情報:

コメントを記入