Googleの構造化データの標準が更新されていた。

Googleの構造化データのチェックツールで、毎回「必須プロパティの欠落」と表示されては更新してきたので、僕としては「またか…」と思ったのですが、今回は構造化データの標準が記されたページが用意されるようになっていました。
ええ、恐らくですが、これで漸くテーマの構造化データの出力をGoogleの標準に合わせることができそうです。
今回はその仕様について少し紹介しようと思います。
まずは「Testing Tool — Google Developers」でチェックしてみてください。
構造化データの標準
一応「Enabling Rich Snippets for Articles | Structured Data | Google Developers」にて確認できます。
よくエラーが出されるのが、コンテンツのページに関する構造化データです。
その要素1つ1つについて紹介していきます。
リンク先にあった使用例は以下の通りです。
<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”」という2カ所にイメージファイルに関する情報が要求されるのですが、ここで用いられるべきデータに注意点があります。
「image」は各ページのサムネイルイメージを使用すればいいと思いますが、「width」が「696以上」であることが要求されます。また「logo」の方のサイズには、「width」が「600以下」、「height」が「60以下」であることが要求されます。
サイズが企画に沿わない場合、チェックツールで確認してみると「警告」とオレンジ色が出力されますので、設定し直しましょう。
ワードプレスで簡単に設定する方法
まぁ1ページずつにこれをヘッダーに出力設定するのは非常に面倒ですが、ワードプレスで簡単に出力できるように設定してみましょう。
テーマ「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」にカテゴリーとタグを使用していますが、メタデータなどをテーマやプラグインで設定している場合は、そちらを適用してもいいんじゃないでしょうか。
必須プロパティにはありませんので、別に不要かもしれませんけどね。