2026年10月11日

WordPressでレシピサイトを構築する方法：レシピカード・分類設計・構造化データ

テーマ・デザイン

WordPressでレシピサイトを作るなら、材料・手順・調理時間を決まった形で入力できる「レシピカード」を用意し、料理の種類や主な食材で探せる分類を設計し、Googleが読み取れるRecipeの構造化データを出力する、の3点が土台になります。この記事では、レシピプラグインを使う方法と自作する方法の違い、分類の決め方、構造化データの出し方、写真と表示速度の扱いまでを順に説明します。

レシピプラグインを使うか、自作するか

レシピカードの作り方は2通りあります。

レシピプラグインを使う：WP Recipe Maker、Tasty Recipes（有料）、Create by Mediavineなどは、材料・手順の入力画面、印刷用表示、分量の変更、構造化データの出力をまとめて提供します。記事の途中にレシピカードを差し込む形なので、通常の投稿の中でレシピを紹介するブログ型のサイトに向いています
カスタム投稿タイプで自作する：レシピそのものを1件ずつのデータとして管理したい、独自の検索や一覧を作り込みたい場合に向きます。その代わり、構造化データや印刷表示も自分で用意する必要があります

迷ったら、まずプラグインで始めるのがおすすめです。どのプラグインも無料版と有料版で使える機能が異なり、その範囲は更新で変わるため、（2026年10月現在）の機能一覧を公式サイトで確認してから選んでください。

プラグインを使う場合の注意点は、SEOプラグインとの重複です。SEOプラグイン側でもRecipeのスキーマを出力する設定になっていると、同じページに構造化データが二重に出力されることがあります。どちらで出力するかを1つに決めてください。

分類（タクソノミー）を設計する

レシピサイトの使いやすさは「どう探せるか」で決まります。投稿のカテゴリーだけで済ませず、探し方ごとにタクソノミーを分けると、一覧ページと絞り込みが作りやすくなります。

料理の種類：主菜、副菜、汁物、お弁当、おやつ
主な食材：鶏肉、豚肉、卵、豆腐、キャベツ
ジャンル：和食、洋食、中華、エスニック
シーン・特徴：時短、作り置き、子ども向け、レンジだけ

食材のタクソノミーは、表記ゆれ（「鶏もも肉」「とりもも」など）を放置すると一覧が分散します。代表の表記を決め、運用ルールとして共有しておきます。また、すべての材料をタームにするとページ数ばかり増えて中身の薄い一覧ができるため、探す人が多い主要な食材に絞るのが現実的です。

自作する場合の構造化データ

Googleの検索結果では、Recipeの構造化データを持つページが、写真や調理時間付きのリッチリザルトとして表示されることがあります。Googleのガイドラインでは name（料理名）と image（写真）が必須で、材料（recipeIngredient）、手順（recipeInstructions）、調理時間、分量なども推奨されています。リッチリザルトとして表示されるかどうかはGoogleが判断するもので、マークアップをしても表示が保証されるわけではありません。

カスタム投稿タイプ recipe に、材料を1行1つで入れる recipe_ingredients、手順を1行1つで入れる recipe_steps、合計時間（分）の recipe_total_minutes、分量の recipe_yield というカスタムフィールドを持たせている場合、次のように JSON-LD を出力できます。専用プラグインかmu-pluginに置き、作業前にバックアップを取ってステージング環境で試してください。

<?php
add_action( 'wp_head', function () {
	if ( ! is_singular( 'recipe' ) ) {
		return;
	}
	$id    = get_queried_object_id();
	$image = get_the_post_thumbnail_url( $id, 'full' );
	if ( ! $image ) {
		return; // image は必須なので、写真がなければ出力しない
	}

	$lines = function ( $key ) use ( $id ) {
		$raw = (string) get_post_meta( $id, $key, true );
		return array_values( array_filter( array_map( 'trim', explode( "\n", $raw ) ) ) );
	};

	$steps = array();
	foreach ( $lines( 'recipe_steps' ) as $text ) {
		$steps[] = array( '@type' => 'HowToStep', 'text' => $text );
	}

	$data = array(
		'@context'           => 'https://schema.org',
		'@type'              => 'Recipe',
		'name'               => get_the_title( $id ),
		'image'              => array( $image ),
		'author'             => array(
			'@type' => 'Person',
			'name'  => get_the_author_meta( 'display_name', get_post_field( 'post_author', $id ) ),
		),
		'datePublished'      => get_the_date( 'c', $id ),
		'description'        => wp_strip_all_tags( get_the_excerpt( $id ) ),
		'recipeIngredient'   => $lines( 'recipe_ingredients' ),
		'recipeInstructions' => $steps,
	);

	$minutes = absint( get_post_meta( $id, 'recipe_total_minutes', true ) );
	if ( $minutes ) {
		$data['totalTime'] = 'PT' . $minutes . 'M';
	}
	$yield = get_post_meta( $id, 'recipe_yield', true );
	if ( $yield ) {
		$data['recipeYield'] = sanitize_text_field( $yield );
	}

	echo '<script type="application/ld+json">' . wp_json_encode( $data, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG ) . '</script>' . "\n";
} );

ポイントは3つあります。調理時間は PT30M（30分）のようなISO 8601の期間形式で書くこと。JSONは文字列を連結せず wp_json_encode() で作ること。JSON_HEX_TAG を付けて、本文に < などが含まれても script 要素が途中で閉じないようにすることです。

出力したら、GoogleのリッチリザルトテストでURLを検証し、エラーと警告を確認します。公開後はSearch Consoleのレシピのレポートで、問題のあるページが増えていないかを定期的に見ます。また、構造化データの内容はページに表示されている内容と一致させる必要があります。画面にない材料や評価を構造化データにだけ書くのはガイドライン違反です。

写真と表示速度

レシピサイトは写真が多く、表示速度の問題が起きやすい種類のサイトです。

**画像は wp_get_attachment_image() で出力する**：WordPressが srcset と sizes を付けるため、スマートフォンには小さい画像が配信されます。テンプレートで <img> を直書きするとこの仕組みが効きません
先頭の写真は遅延読み込みしない：ページ上部のメイン写真はLCP（最大の要素が表示されるまでの時間）に直結します。WordPressは最初の画像に遅延読み込みを付けない調整をしていますが、テーマやプラグインの設定で上書きされていないか確認します
手順写真はサイズをそろえる：縦横比をそろえ、width と height を持たせるとレイアウトのずれ（CLS）を防げます
アップロード前に圧縮する：撮影したままの大きな写真をそのまま載せず、表示サイズに見合った解像度にしてから登録します

PageSpeed Insightsで、写真の多いレシピページを実際に計測して判断してください。

使いやすさのための工夫

調理中の読者は、スマートフォンを片手に、油や水で濡れた手で画面を操作しています。

記事冒頭に「レシピへ移動」のリンクを置き、前置きを読まずに材料と手順へ飛べるようにする
材料は箇条書き（ul）、手順は番号付きリスト（ol）でマークアップし、読み上げソフトでも順番が伝わるようにする
分量は「大さじ」「小さじ」「g」の表記をサイト内で統一する
アレルギー表示や栄養成分を載せる場合は、根拠と計算方法を明記し、誤りが健康被害につながりうる点を意識して確認体制を作る

まとめ

レシピカード、探しやすい分類、Recipeの構造化データの3点が土台になる
ブログ型ならWP Recipe Makerなどのプラグイン、データとして管理したいならカスタム投稿タイプで自作する
構造化データは1か所からだけ出力し、wp_json_encode() で作ってリッチリザルトテストで検証する
写真は wp_get_attachment_image() で出し、先頭画像の遅延読み込みとレイアウトのずれに注意する
調理中の読者を想定し、レシピへのジャンプ、リストのマークアップ、表記の統一を整える