【WordPress】プラグインなしでリッチリザルト対象の構造化データに対応する方法

当ブログをリッチリザルト対象の構造化データに対応したのでその方法をご紹介。

構造化データの形式はRDFa、microdata、JSON-LDがありますがGoogleが推奨しているJSON- LDで実装します。

コード

functions.php等に貼り付けてご利用ください。

ハードコーディングしている所や画像のURLなどご自身の環境に合わせて適宜変更してお使いください。
トップ、記事詳細・パンくずに対応してます。


class WP_footer {

	public function __construct() {
		// アクションフック（wp_footer）を登録してフッターに出力します。
		add_action( 'wp_footer', array( $this, 'structured_data' ), 1 );
	}

	public function structured_data() {

		$site_name        = get_bloginfo( 'name' );
		$site_description = 'フリーランスWeb制作者Simmonの技術情報ブログ';
		$site_icon        = THEME_IMAGE_URI . '/common/apple-touch-icon.png';
		$home_url         = home_url( '/' );
		$schema_org       = array();

		$publisher = array(
			'@context'    => 'http://schema.org',
			'@type'       => 'Organization',
			'name'        => $site_name,
			'description' => $site_description,
			'logo'        => array(
				'@type' => 'ImageObject',
				'url'   => $site_icon,
			),
		);

		// トップページ
		if ( is_home() ) {
			$schema_org['home'] = array(
				'@context'  => 'http://schema.org',
				'@type'     => 'WebSite',
				'name'      => $site_name,
				'url'       => $home_url,
				'publisher' => $publisher,
			);
		}

		// ブログ詳細
		if ( is_singular( 'post' ) ) {
			$post_type  = get_post_type();
			$post_ID    = get_the_ID();
			$og_url     = wp_upload_dir()['baseurl'] . '/og/';
			$image_name = "{$post_type}_{$post_ID}.png";

			$schema_org['blog_posting'] = array(
				'@context'         => 'https://schema.org',
				'@type'            => 'BlogPosting',
				'mainEntityOfPage' => array(
					'@type' => 'WebPage',
					'@id'   => get_the_permalink(),
				),
				'headline'         => get_the_title(),
				'image'            => array(
					$og_url . $image_name,
				),
				'datePublished'    => get_the_time( 'c' ),
				'dateModified'     => get_the_modified_time( 'c' ),
				'author'           => array(
					'@type' => 'Person',
					'name'  => 'Simmon',
				),
				'publisher'        => $publisher,
			);

			$schema_org['breadcrumb'] = array(
				'@context'        => 'https://schema.org',
				'@type'           => 'BreadcrumbList',
				'itemListElement' => array(
					array(
						'@type'    => 'ListItem',
						'position' => 1,
						'name'     => 'Home',
						'item'     => $home_url,
					),
					array(
						'@type'    => 'ListItem',
						'position' => 2,
						'name'     => 'Blog',
						'item'     => $home_url . 'blog',
					),
					array(
						'@type'    => 'ListItem',
						'position' => 3,
						'name'     => get_the_title(),
						'item'     => get_the_permalink(),
					),
				),
			);
		}

		$this->output_as_json( $schema_org );
	}

	private function output_as_json( $schema_org ) {
		foreach ( $schema_org as $data ) {
			echo '<script type="application/ld+json" class="json-ld">';
			echo json_encode( $data );
			echo '</script>';
		}
	}
}

new WP_footer();

出力例

トップページ

詳細ページ

テスト・確認方法

Googleがリッチリザルト テストというオンラインツールを提供しているので、そちらに対象URLもしくはコードを直接入力してテストすることが可能です。

リッチリザルト テスト - Google Search Console

参考