パンくずリスト構造化マークアップで検索結果の視認性とクリック率を最大化

Posted on by web

第4章：実践手順

パンくずリストの構造化マークアップは、HTMLによる視覚的な表示と、JSON-LDによる検索エンジンへの意味付けの二段階で構成されます。ここでは、具体的な手順を追って解説します。

HTMLでのパンくずリスト実装

まず、ユーザーに表示されるパンくずリストをHTMLで実装します。セマンティックなマークアップを意識し、ナビゲーションであることを明確にするために nav 要素を使用し、リスト形式で階層を示すために ol および li 要素を用いるのが一般的です。

具体的なHTMLの例:
例えば、以下のような階層を持つページがあったとします。
トップページ > カテゴリA > サブカテゴリX > 商品詳細ページ

この場合のHTMLは以下のようになります。

ポイント：

  • nav 要素：ナビゲーションのセクションであることを明示します。aria-label=”Breadcrumb” を追加することで、スクリーンリーダーを使用するユーザーにも配慮します。
  • ol 要素：順序付きリストとしてパンくずの階層を示します。
  • li 要素：各階層の項目を表します。
  • a 要素：トップページから現在のページまでの各階層へのリンクを設定します。現在のページはリンクではなく span 要素などでテキストとして表示し、ユーザーが現在どこにいるのかを明確にすることが一般的です。

JSON-LDによる構造化マークアップの記述

次に、このHTMLで表現されたパンくずリストの意味を、検索エンジンが理解できるようにJSON-LD形式で記述します。JSON-LDはHTMLの セクション、または セクションの適切な場所に

各プロパティの詳細:

  • "@context": "https://schema.org"：Schema.orgの語彙を使用することを宣言します。
  • "@type": "BreadcrumbList"：この構造化データがパンくずリストであることを定義します。
  • "itemListElement"：パンくずリストの各項目を配列として格納します。各項目は @type: "ListItem" で定義されます。
  • "position"：リスト内での項目の位置を示します。トップページが1、次の階層が2、というように昇順で指定します。これは必須プロパティです。
  • "name"：リスト項目として表示されるテキストです。HTMLのリンクテキストと一致させることが推奨されます。これも必須プロパティです。
  • "item"：その項目が指すページの完全なURLです。最後の項目（現在のページ）は通常リンクがないため、item プロパティは省略します。これも必須プロパティですが、最後の項目のみ省略可能です。

異なるページのJSON-LD例

トップページのJSON-LD

トップページには通常、パンくずリストは不要ですが、サイトによっては自己参照的にトップページのみを記述することもあります。

カテゴリページのJSON-LD

トップページ > カテゴリA

実装後のテストとデプロイ

コードをウェブサイトに組み込む前に、必ずGoogleのリッチリザルトテストツールを使用して検証します。

  • URLまたはコードスニペットを入力し、テストを実行します。
  • 「リッチリザルトとして有効です」と表示されれば成功です。警告やエラーが表示された場合は、メッセージに従って修正します。

テストが完了し、問題がなければ、ウェブサイトの該当するページにJSON-LDコードを組み込み、公開します。公開後、Google Search Consoleの「構造化データ」レポートで、パンくずリストの構造化データが正しく認識されているか、エラーがないかを確認します。

既存サイトへの導入手順と注意点

既存のサイトにパンくずリスト構造化マークアップを導入する場合、以下の点に注意が必要です。

  • CMSやフレームワークの活用：WordPressなどのCMSを使用している場合、SEOプラグイン（例: Yoast SEO, Rank Math）がパンくずリストの構造化マークアップ機能を備えていることが多いです。これらを活用すると、手動でコードを記述する手間を省けます。
  • テンプレートへの組み込み：動的に生成されるページの場合、各ページの階層構造に基づいてJSON-LDが自動生成されるように、サイトのテンプレートファイルに記述を組み込む必要があります。PHPやJavaScriptなどを用いて、ページのURLやタイトルからパンくずリストの情報を構築する方法を検討してください。
  • 既存のパンくずリストとの整合性：HTMLで既にパンくずリストが実装されている場合、その表示内容とJSON-LDで記述する内容が完全に一致するようにします。不一致は、検索エンジンの混乱やリッチスニペットの非表示につながる可能性があります。

第5章：注意点

パンくずリストの構造化マークアップは強力なツールですが、その効果を確実に得るためには、いくつかの重要な注意点を遵守する必要があります。これらの点を怠ると、期待する効果が得られないだけでなく、ウェブサイトのSEOに悪影響を及ぼす可能性もあります。

Googleの構造化データガイドラインの厳守

Googleは構造化データに関する明確なガイドラインを提示しています。これらを遵守することは最も重要です。

  • 品質に関するガイドライン：コンテンツと構造化データが一致していること、隠しコンテンツに構造化データを使用しないこと、関連性のないデータを含めないことなど、基本的な品質要件があります。特に、ユーザーに表示されるパンくずリストと、構造化データでマークアップされた内容が完全に一致している必要があります。
  • 技術に関するガイドライン：JSON-LDなどの記述形式における構文の正確性、必須プロパティの網羅、URLの正規化などが含まれます。例えば、URLは完全な絶対URLで指定する必要があります。
  • スパム行為の回避：検索ランキングを操作するためだけに構造化データを使用する、または不正確な情報をマークアップするなどの行為は、スパムとみなされ、手動ペナルティの対象となる可能性があります。これにより、リッチスニペットが表示されなくなるだけでなく、サイト全体の検索ランキングにも悪影響が及ぶ可能性があります。

モバイルフレンドリーなデザイン

今日のウェブサイトトラフィックの多くはモバイルデバイスから来ています。パンくずリストも、モバイル環境で適切に表示され、操作できることが不可欠です。

  • 視認性：小さい画面でもパンくずリストのテキストが読みにくくならないように、適切なフォントサイズと行間を設定します。
  • 操作性：タップしやすいように、各項目のクリック領域を十分に確保します。狭すぎると誤タップの原因となります。
  • レイアウトの最適化：横に長いパンくずリストはモバイル画面からはみ出す可能性があるため、必要に応じて省略表示（例: 「... > サブカテゴリX > 現在のページ」）や、特定のブレークポイントでデザインを変更するなどの工夫が必要です。

Googleのモバイルフレンドリーテストツールで、モバイル環境での表示と操作性を定期的にチェックすることが推奨されます。

常に最新のサイト構造との同期

ウェブサイトは生き物であり、コンテンツの追加、カテゴリの変更、ページの移動や削除などが日常的に発生します。

  • 定期的な更新：サイト構造の変更があった場合、パンくずリストのHTML表示とJSON-LDの記述も速やかに更新し、常に最新のサイト構造と同期させる必要があります。
  • 自動生成の検討：特に大規模なサイトや頻繁に構造が変更されるサイトでは、手動での更新は非効率的です。CMSやカスタムスクリプトを活用し、パンくずリストとその構造化マークアップが自動的に生成される仕組みを導入することを検討してください。これにより、情報の不整合を防ぎ、管理コストを削減できます。

誤った階層構造の回避

パンくずリストは、ユーザーがサイト内でたどった、またはたどることが推奨される論理的なパスを示すべきです。

  • 論理的なパス：各ページがどの親カテゴリに属しているのか、ユーザーがどのような順序でページに到達したのかを正確に反映させます。SEO目的で不自然なキーワードを盛り込んだり、存在しない階層を作成したりすることは避けるべきです。
  • 重複するパスの回避：例えば、ある商品が複数のカテゴリに属する場合、パンくずリストではその商品への「主要なパス」を一つだけ示すようにします。重複するパスをマークアップすると、検索エンジンが混乱する可能性があります。

URLの正規化との関連

パンくずリストの item プロパティで指定するURLは、そのページの「正規URL（Canonical URL）」と一致している必要があります。

  • 正規URLの使用：同じコンテンツが複数のURLでアクセスできる場合（例: パラメータ付きURLやwwwあり/なし）、rel="canonical" タグで指定した正規URLをパンくずリストの item プロパティに使用します。
  • 一貫性の確保：これにより、検索エンジンがどのURLを主要なものとして認識すべきか混乱することなく、パンくずリストの情報も正確に紐付けられます。

これらの注意点を常に意識し、定期的な確認とメンテナンスを行うことで、パンくずリスト構造化マークアップは、サイトの視認性とクリック率を最大化するための信頼できる資産となります。

Pages: 1 2 3
Category: SEO(検索エンジン最適化)