【個人ブログ用】JSON-LDによる 構造化データ の作成 - kimgonblog
2021年11月3日

【個人ブログ用】JSON-LDによる 構造化データ の作成

【個人ブログ用】JSON-LDによる 構造化データ の作成のアイキャッチ画像

こんにちは、キムゴンです。

今回はWordPressで個人ブログを運営している人用にJSON-LDによる構造化データ作成について紹介します。

プログラム経験が全くない人用にほとんどコピペで対応できるようにしているので挑戦してみてください。

目次

  1. 構造化データ って必要なの?
  2. 作成した 構造化データ
  3. 構造化データ をテストしよう!
  4. まとめ

1. 構造化データ って必要なの?

構造化データのマークアップはどのようなサイトを作成するかによって内容が全く異なってきます。

なので、今回は「個人ブログ」を対象に考えた場合のマークアップについて話します。

1.1 構造化データ ってなに?

構造化データとはwebページの内容を検索エンジンに詳細に伝えるためのコードです。

構造化データ前
 ・タイトルタグ、meta description, keyphrace などでざっくりとした内容を検索エンジンへ提供。

構造化データ後
 ・サイト名、作成者は誰か、作成者は個人?組織?、どのような内容か、文脈としての追加情報を提供。

追加情報により検索エンジンに正確な内容が伝わることがSEO対策に繋がります。

したがって、ブログ運営者にとって構造化データ作成は積極的に行うべき作業と言えます。

1.2 どのようにして作成するの?

構造化データの作成にはマークアップする際の仕様、書き方がいくつかあります。

今回はその中でもgoogleが推奨(こちら参照)していることもあり「JSON-LD」を用います。

この辺りの詳細な内容について興味がある方は下記記事の前半部分をご覧ください。

【初心者向け】構造化データとは?メリット・書き方・種類・ツールまとめ

JSON-LDを記述するときに便利なジェネレイターとして「Schema Markup Generator」があります。

パズルにピースを嵌めるような感覚で記述できるようになっています。

今後、新たに構造化マークアップを行う機会があれば是非使ってみてください。

2. 作成した 構造化データ

<script type="application/ld+json">
	{
		"@context": "http://schema.org",
		"@type": "BlogPosting",
		"mainEntityOfPage": {
			"@type": "WebPage",
			"@id": "<?php the_permalink(); ?>"
		},
		"headline": "<?php the_title();?>",
		"image": {
			"@type": "ImageObject",
			"url": "<?php $image=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium'); ?> <?php echo $image[0]; ?>",
			"width": "100px",
			"height": "100px"
		},
		"description": "<?php echo mb_substr(strip_tags($post-> post_content), 0, 60); ?>…",  //60文字まで表示させるようにしてます
		"datePublished": "<?php the_time('Y/m/d') ?>",
		"dateModified": "<?php the_modified_date('Y/m/d') ?>",
		"author": {
			"@type": "Person",
			"name": "各自のニックネーム",   //要変更
			"url": "プロフィールのURL"   //要変更
		},
		"publisher": {
			"@type": "Organization",
			"name": "<?php bloginfo('name'); ?>",
			"logo": {
				"@type": "ImageObject",
				"url": "各自のlogoのURL",   //要変更
				"width": "100px",
			"height": "100px"
			}
		}
	}
</script>

こちらが作成した構造化データです。

基本的にはコピペで大丈夫ですが、所々、各自で変更していただく箇所があるので対応してください。

記述位置に迷われる方はheadタグ内で大丈夫です。

3. 構造化データ をテストしよう!

テストには構造化データをテストから行います。

こちらを開くとリッチリザルトテストとスキーママークアップ検証ツールが表示されます。

構造化データ のテスト画像

どちらも同じようなことをチェックしていますが、厳格さや基準が少し異なるようなので念のため両方とも実施しましょう(私も細かいところは分かりません、、)。

どちらもサイトURLかコードを入力することでテストを開始してくれます。

結果画面は有効・無効、警告、エラーなどが分かりやすく表示されるので図説は省きます。

リッチリザルトテストとスキーママークアップ検証ツールの両方からエラーがなくなればOKです!

4. まとめ

今回は個人ブログ運営者用に構造化データの作成を行いました。

私自身、かなり構造化データを作成するのに時間を要してしまったため、少しでも構造化データ作成で詰まっている人の助けになれればと思いまとめました。

間違いなどありましたらTwitterお問い合わせでご指摘いただけたら幸いですm(_ _)m

今後、ブログ以外の構造化データ作成を担当されるかもしれません。

その時は、以下を参考に記述してみてください。非常に良質な記事です。