【WordPress】構造化データのマークアップに対応させる【予約投稿にも】

公開日:2024年2月20日

Categoryweb制作

Contents

1 Googleに正しく内容を伝える
2 基本的なマークアップ
3 WordPressの「予約投稿」機能に注意
4 まとめ

Googleに正しく内容を伝える

2024年現在、若干の「自分に対する今更感」も否めないが、各ページの情報を正しくGoogleに伝えるべきだと思い、構造化データのマークアップ方法を少し調べてみた。WordPressにはプラグインもあるようだが、自分の場合は何の記事で、いつ書かれて、いつ更新されたか程度がわかればそれで良いので、function.phpとfooter.phpに少し書くだけで終わらせた。そんな時の備忘録。

基本的なマークアップ

まずはGoogleの公式ドキュメントを確認しよう。

https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja
構造化データマークアップとは | Google 検索セントラル | ドキュメント | Google for Developers

というか、もうこの内容で完結する話なので、公式を読み終わったら、WordPressで各投稿を構造化データに対応させる準備をしよう。なお、自分のWordPress運用は基本的に予約投稿のみで公開をしている。今回はget_the_time()関数、get_the_modified_date()関数辺りを使って投稿日の日時を取得した。のだが…

WordPressの「予約投稿」機能に注意

WordPressに「予約投稿」の機能があるが、どうも、get_the_modified_date()関数で取得すると、「予約投稿を準備した日=最終更新日」になってしまい、そのまま取得すると「投稿日」と「最終更新日」が逆転してしまう現象が起こる。つまり、「投稿日=一般公開された日」「最終更新日=予約投稿をした日」という具合になり、どうにも気持ち悪いので、「予約投稿日」が「投稿日」よりも前になる場合(単純に予約投稿した場合)は、構造化データのプロパティ「dateModified」を表示させないような形を目標に、以下の様な記述で構造化データを表示させる。

まずはfunciton.phpに、記事の更新日を取得させるように追記。

function get_mtime($format) {
	$mtime = get_the_modified_time('Ymd');
	$ptime = get_the_time('Ymd');
	if ($ptime > $mtime) {
		return get_the_time($format);
	} elseif ($ptime === $mtime) {
		return null;
	} else {
		return get_the_modified_time($format);
	}
}

で、テーマのfooter.php辺りに下記内容を元に追記。各プロパティやその値は公式を参照。WordPress各関数の取得内容等は割愛。Y/m/dじゃなくて、cとかでも行けるかどうかは未確認。

<?php if (is_single() && (get_mtime('c') == null)) : ?>
<script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "Article",
		"headline": "<?php the_title(); ?> - <?php bloginfo('name'); ?>",
		"image": "<?php echo(get_the_post_thumbnail_url( get_the_ID() )); ?>",
		"datePublished": "<?php the_time('c'); ?>",
		"author": {
			"@type": "Person",
			"name": "#",
			"url": "#"
		}
	}
</script>
<?php elseif (is_single() && (get_mtime('c') != null) && (get_the_time('Y/m/d') > get_the_modified_date('Y/m/d'))) : ?>
<script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "Article",
		"headline": "<?php the_title(); ?> - <?php bloginfo('name'); ?>",
		"image": "<?php echo(get_the_post_thumbnail_url( get_the_ID() )); ?>",
		"datePublished": "<?php the_time('c'); ?>",
		"author": {
			"@type": "Person",
			"name": "#",
			"url": "#"
		}
	}
</script>
<?php elseif (is_single() && (get_mtime('c') != null) && (get_the_time('Y/m/d') < get_the_modified_date('Y/m/d'))) : ?>
<script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "Article",
		"headline": "<?php the_title(); ?> - <?php bloginfo('name'); ?>",
		"image": "<?php echo(get_the_post_thumbnail_url( get_the_ID() )); ?>",
		"datePublished": "<?php the_time('c'); ?>",
		"dateModified": "<?php if ($mtime = get_mtime('c')) echo $mtime; ?>",
		"author": {
			"@type": "Person",
			"name": "#",
			"url": "#"
		}
	}
</script>
<?php endif; ?>

こんな形で、記事ページのみに、アイキャッチ画像を含む記事の構造化データを追記する事ができた。もう少しシンプルに書ける気がしないてもないが、今回はこれで。もちろん、各項目は任意の値を記述しよう。構造化データは便利なプロパティもあったり、入れ子で色々書けるようなので、ガシガシ使っていきたい。 ※アイキャッチ画像自体の取得については割愛。