構造化マークアップとは？
構造化マークアップとは、Googleなどの検索エンジンにわかりやすく伝えるためのHTMLコード記述方法です。
これにより、検索エンジンがページの内容を正確に理解しやすくなります。
基本知識はこちらの記事で解説しています。
レシピの構造化マークアップ
レシピのページに構造化マークアップを追加する場合、以下のようなコードを使います。
サンプルコード
<html>
<head>
<title>ノンアルコール ピニャコラーダ</title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe", // マークアップのタイプを指定。ここでは「レシピ」（必須項目）
"name": "ノンアルコール ピニャコラーダ", // レシピの名前を指定（必須項目）
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
], // レシピのイメージ画像のURLをリストで指定（推奨項目）
"author": {
"@type": "Person",
"name": "メアリー・ストーン" // レシピの著者の名前を指定（推奨項目）
},
"datePublished": "2024-03-10", // レシピが公開された日付を指定（推奨項目）
"description": "このノンアルコールのピニャコラーダはみんなの大好きなドリンクです！", // レシピの説明を指定（推奨項目）
"recipeCuisine": "アメリカン", // レシピの料理の種類を指定（推奨項目）
"prepTime": "PT1M", // 準備時間をISO 8601形式で指定（推奨項目）
"cookTime": "PT2M", // 調理時間をISO 8601形式で指定（推奨項目）
"totalTime": "PT3M", // 総調理時間をISO 8601形式で指定（推奨項目）
"keywords": "ノンアルコール", // レシピに関連するキーワードを指定（推奨項目）
"recipeYield": "4人分", // レシピが何人前かを指定（推奨項目）
"recipeCategory": "ドリンク", // レシピのカテゴリを指定（推奨項目）
"nutrition": {
"@type": "NutritionInformation",
"calories": "120 カロリー" // レシピの栄養情報を指定（推奨項目）
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5", // レシピの評価値を指定（推奨項目）
"ratingCount": "18" // 評価の数を指定（推奨項目）
},
"recipeIngredient": [
"パイナップルジュース 400ml",
"ココナッツクリーム 100ml",
"氷"
], // レシピの材料をリストで指定（必須項目）
"recipeInstructions": [
{
"@type": "HowToStep",
"name": "ブレンド", // 手順の名前を指定（推奨項目）
"text": "パイナップルジュース 400mlとココナッツクリーム 100mlを滑らかになるまでブレンドします。", // 手順の詳細な説明を指定（必須項目）
"url": "https://example.com/non-alcoholic-pina-colada#step1",
"image": "https://example.com/photos/non-alcoholic-pina-colada/step1.jpg" // 手順に関連する画像のURLを指定（推奨項目）
},
{
"@type": "HowToStep",
"name": "グラスに氷を入れる", // 手順の名前を指定（推奨項目）
"text": "グラスに氷を入れます。", // 手順の詳細な説明を指定（必須項目）
"url": "https://example.com/non-alcoholic-pina-colada#step2",
"image": "https://example.com/photos/non-alcoholic-pina-colada/step2.jpg" // 手順に関連する画像のURLを指定（推奨項目）
},
{
"@type": "HowToStep",
"name": "注ぐ", // 手順の名前を指定（推奨項目）
"text": "パイナップルジュースとココナッツの混合物を氷の上に注ぎます。", // 手順の詳細な説明を指定（必須項目）
"url": "https://example.com/non-alcoholic-pina-colada#step3",
"image": "https://example.com/photos/non-alcoholic-pina-colada/step3.jpg" // 手順に関連する画像のURLを指定（推奨項目）
}
], // レシピの手順をリストで指定（必須項目）
"video": {
"@type": "VideoObject",
"name": "ノンアルコール ピニャコラーダの作り方", // ビデオの名前を指定（推奨項目）
"description": "ノンアルコールのピニャコラーダの作り方を紹介します。", // ビデオの説明を指定（推奨項目）
"thumbnailUrl": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
], // ビデオのサムネイル画像のURLをリストで指定（推奨項目）
"contentUrl": "https://www.example.com/video123.mp4", // ビデオのコンテンツURLを指定（推奨項目）
"embedUrl": "https://www.example.com/videoplayer?video=123", // ビデオの埋め込みURLを指定（推奨項目）
"uploadDate": "2024-02-05T08:00:00+08:00", // ビデオがアップロードされた日付を指定（推奨項目）
"duration": "PT1M33S", // ビデオの再生時間をISO 8601形式で指定（推奨項目）
"interactionStatistic": {
"@type": "InteractionCounter",
"interactionType": { "@type": "WatchAction" },
"userInteractionCount": 2347 // ビデオの視聴回数を指定（推奨項目）
},
"expires": "2024-02-05T08:00:00+08:00" // ビデオの有効期限を指定（推奨項目）
}
}
</script>
</head>
<body>
</body>
</html>
このように記述することで、検索エンジンはこのページが「ノンアルコール ピニャコラーダ」であることを理解しやすくなります。
まとめ
構造化マークアップは、ウェブページの内容をGoogleなどの検索エンジンにわかりやすく伝えるための方法です。
対応することで検索結果で追加項目が表示され目立つようになり、クリック率が上がる可能性が高まります。
構造化マークアップに対応しておきたいですね。
Discussion