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

構造化データ
構造化データ

Googleの構造化データのチェックツールで、毎回「必須プロパティの欠落」と表示されては更新してきたので、僕としては「またか…」と思ったのですが、今回は構造化データの標準が記されたページが用意されるようになっていました。

ええ、恐らくですが、これで漸くテーマの構造化データの出力をGoogleの標準に合わせることができそうです。

今回はその仕様について少し紹介しようと思います。

まずは「Testing Tool — Google Developers」でチェックしてみてください。

  • Table of Contents

構造化データの標準

一応「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」にカテゴリーとタグを使用していますが、メタデータなどをテーマやプラグインで設定している場合は、そちらを適用してもいいんじゃないでしょうか。

必須プロパティにはありませんので、別に不要かもしれませんけどね。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください