Googleの構造化データの標準が更新されていた。
Googleの構造化データのチェックツールで、毎回「必須プロパティの欠落」と表示されては更新してきたので、僕としては「またか…」と思ったのですが、今回は構造化データの標準が記されたページが用意されるようになっていました。
ええ、恐らくですが、これで漸くテーマの構造化データの出力をGoogleの標準に合わせることができそうです。
今回はその仕様について少し紹介しようと思います。
まずは「Testing Tool — Google Developers」でチェックしてみてください。
構造化データの標準
一応「Enabling Rich Snippets for Articles | Structured Data | Google Developers」にて確認できます。
よくエラーが出されるのが、コンテンツのページに関する構造化データです。
その要素１つ１つについて紹介していきます。
リンク先にあった使用例は以下の通りです。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://google.com/article"
},
"headline": "Article headline",
"image": {
"@type": "ImageObject",
"url": "https://google.com/thumbnail1.jpg",
"height": 800,
"width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "Google",
"logo": {
"@type": "ImageObject",
"url": "https://google.com/logo.jpg",
"width": 600,
"height": 60
}
},
"description": "A most wonderful article"
}
</script>
恐らくこれがGoogleで用いられる標準になるんでしょう。
もう変更されないと信じ、これに沿っていきます。
注意点
「image」と「”publisher”の”logo”」という２カ所にイメージファイルに関する情報が要求されるのですが、ここで用いられるべきデータに注意点があります。
「image」は各ページのサムネイルイメージを使用すればいいと思いますが、「width」が「696以上」であることが要求されます。また「logo」の方のサイズには、「width」が「600以下」、「height」が「60以下」であることが要求されます。
サイズが企画に沿わない場合、チェックツールで確認してみると「警告」とオレンジ色が出力されますので、設定し直しましょう。
ワードプレスで簡単に設定する方法
まぁ１ページずつにこれをヘッダーに出力設定するのは非常に面倒ですが、ワードプレスで簡単に出力できるように設定してみましょう。
テーマ「ShapeShifter」は既に設定可能なテーマに編集しましたので、「ShapeShifter」の設定例を紹介していきます。
if( is_singular( 'post' ) ) {
if ( have_posts() ){
while ( have_posts() ){
the_post();
$page_title = get_the_title();
$author_name = get_the_author();
$date_published = esc_attr( get_the_date( 'Y-n-j' ) );
$date_modified = esc_attr( get_the_modified_time( 'Ymd' ) );
$image_id = get_post_thumbnail_id();
$image = ( $image_id
? wp_get_attachment_image_src( $image_id, 'full' )
: array(
'http://your_blog.com/your_images/your_default_thumbnail.jpg',
150,
150
)
);
// ※ ロゴに使用するイメージファイルのidを使ってください。
$logo_image = wp_get_attachment_image_src( get_option( 'your_logo_image_id' ) );
$article_body = get_the_content();
$url = get_permalink();
$json_post = array(
'@context' => 'http://schema.org',
'@type' => 'Article',
'mainEntityOfPage' => array(
'@type' => 'WebPage',
'@id' => $url,
),
'name' => $page_title,
'author' => array(
'@type' => 'Person',
'name' => $author_name
),
'datePublished' => $date_published,
'dateModified' => $date_modified,
'image' => array(
'@type' => 'ImageObject',
'url' => $image[ 0 ],
'width' => ( $image[ 1 ] > 696 ? $image[ 1 ] : 696 ),
'height' => ( $image[ 1 ] > 696 ? $image[ 2 ] : 696 )
),
'articleBody' => $article_body,
'url' => $url,
'publisher' => array(
'@type' => 'Organization',
'name' => SITE_NAME,
'logo' => array(
'@type' => 'ImageObject',
'url' => $logo_image[ 0 ],
'width' => ( $logo_image[ 1 ] <= 600 ? $logo_image[ 1 ] : 600 ),
'height' => ( $logo_image[ 1 ] <= 60 ? $logo_image[ 2 ] : 60 ),
)
),
'headline' => $page_title,
);
$article_section = array();
$cats = get_the_terms( $post->ID, 'category' );
if( ! empty( $cats ) ) {
foreach( $cats as $cat ) {
$article_section[] = $cat->name;
}
}
$tags = get_the_terms( $post->ID, 'post_tag' );
if( ! empty( $tags ) ) {
foreach( $tags as $tag ) {
$article_section[] = $tag->name;
}
}
$json_post[ 'articleSection' ] = $article_section;
$json_post = json_encode( $json_post );
echo '<script type="application/ld+json">' . $json_post . '</script>' . PHP_EOL;
}
}
rewind_posts();
}
こんな感じでしょうか。
これを「wp_head」にフックして出力しておけば、JSON-LDによる構造化データを認識してくれるようになります。
「articleSection」にカテゴリーとタグを使用していますが、メタデータなどをテーマやプラグインで設定している場合は、そちらを適用してもいいんじゃないでしょうか。
必須プロパティにはありませんので、別に不要かもしれませんけどね。
