サイトにパンくずリストナビゲーションを簡単に追加する方法をお探しですか？
パンくずリストナビゲーションを追加することには、SEOとユーザーの両方のメリットがあります。
このチュートリアルでは、パンくずリストナビゲーションの追加方法と、パンくずリストのカスタマイズオプションについて学びます。
この記事では
パンくずリストナビゲーションとは？
パンくずリストとは、ユーザーが現在いるページに至るまでの経路を示す小さなリンクのことです。
これらのリンクはパンくずリストの経路とも呼ばれます。
この用語は、ヘンゼルとグレーテルの童話に由来しています。ヘンゼルは、妹と一緒に森に入るときにパンくずを落とします。彼はそのパンくずを使って家に帰る方法を見つけたいと思っています。
パンくずリストのメリット
パンくずリストは、検索エンジンがページのトピックとサイトの階層を理解するのに役立ちます。
これらのパンくずリストは、ページがターゲットキーワードまたは関連キーワードでランク付けされるのに役立つ可能性があります。
また、パンくずリストの経路は内部リンクであるため、検索エンジンがサイトをクロールするのに役立ちます。
スキーママークアップ
ウェブページにパンくずリストスキーママークアップを追加することには、SEO上のメリットもあります。この種のHTMLコードは、Googleがページをよりよく理解するのに役立ちます。
All in One SEO（AIOSEO）のようなWordPress SEOプラグインは、このコードを自動的に追加します。
ユーザーエクスペリエンスの向上
パンくずリストは、ユーザーがブラウザの戻るボタンを使用せずにサイトをナビゲートするのに役立ちます。このため、パンくずリストはより良いユーザーエクスペリエンスを提供し、直帰率を減らし、エンゲージメントを高めることができます。
ネストされた階層を持つeコマースストアを含む複雑なサイトは、パンくずリストナビゲーションから大きな恩恵を受けます。
このチュートリアルでは、パンくずリストを追加し、表示およびカスタマイズする方法を説明します。
All in One SEO（AIOSEO）プラグインを使用します。
ステップ1：All in One SEO（AIOSEO）のダウンロードとインストール
まず、All in One SEO（AIOSEO）をダウンロードしてインストールします。
このプラグインにはパンくずリストジェネレーターが含まれています。また、SEOに必要なすべてが含まれています。そして、初心者にも使いやすいです。
All in One SEO（AIOSEO）は、WordPress.orgで数千件の5つ星レビューを持つ実績のあるプラグインです。現在、300万以上のサイトオーナーがこのプラグインを使用しています。
ステップ2：パンくずリストを有効にする
プラグインをインストールしたら、AIOSEO » 一般設定 » パンくずリストに移動します。
パンくずリストを有効にするボタンをオンにします。
その下には、サイトにパンくずリストを追加するための4つのオプションが表示されます。
ステップ3：表示オプションを選択する
4つのオプションは以下の通りです。
- Gutenbergブロックまたはショートコード：これらを使用して、個々のページにパンくずリストを追加します。
- ウィジェット：これを使用して、ブログ記事のサイドバーまたはフッターにパンくずリストを追加します。
- PHPコード：これを使用して、サイト全体（すべてのページ）に即座にパンくずリストを追加します。
これらの方法はすべて使い方が簡単です。ステップバイステップで見ていきましょう。
方法1：Gutenbergブロック
ご存知かもしれませんが、WordPressにはGutenbergエディターが付属しており、クリック可能なブロックを使用してページに要素を追加します。
これらの要素は、段落、箇条書きリスト、画像、または表である可能性があります。
All in One SEOには、AIOSEO – Breadcrumbsブロックを含む、いくつかの特別なGutenbergブロックが用意されています。
このブロックを使用するには、ページを開き、パンくずリストを追加したい場所にカーソルを置きます。
- 黒い「+」記号をクリックして、新しいブロックを追加します。
- ポップアップウィンドウで「breadcrumbs」と検索すると、AIOSEO – Breadcrumbsブロックが表示されます。
- それをクリックして、ページにパンくずリストを追加します。
方法2：ショートコード
パンくずリストを追加するための、ユニークなAIOSEOショートコードもあります。
WordPressのショートコードは、目次のような要素を追加するために、ページにコピー＆ペーストする短いテキストです。
Gutenbergブロックと同様に、ショートコードは素早く簡単に使用できます。
パンくずリストのショートコードを取得するには、AIOSEO » 一般設定 » パンくずリストに戻ります。
- ショートコードアイコンをクリックします。
- そして、その下にあるAIOSEOパンくずリストショートコードをコピーします。
次に、パンくずリストを追加したいサイト上のページに移動します。
そして、記事にショートコードを貼り付けます。
ウェブページをプレビューすると、パンくずリストが追加されていることがわかります。
方法3：ウィジェット
WordPressウィジェットを使用すると、サイドバーやフッターなどのサイトの永続的な部分に機能を追加できます。
ウィジェットには、カレンダー、検索ボックス、アーカイブなどが含まれます。
ウィジェットオプションを使用してサイトにパンくずリストを追加するには、外観 » ウィジェットに移動します。
（テーマがウィジェットエリアをサポートしている場合、メニューに表示されます。）
これにより新しいウィンドウが開きます。右側にサイドバーのスクロール可能なレプリカが表示されます。
次に、Widgets の横にある “+” アイコンをクリックします。
検索ボックスが開きます。「breadcrumbs」と入力し始めると、AIOSEO パンくずリストウィジェットが表示されます。
ウィジェットをドラッグして、サイドバーの表示したい場所に移動させます。
この例では、フッター領域にドラッグします。
これで、パンくずリストがサイドバーのフッターに表示されます。
もちろん、サイドバーとページの上部にパンくずリストを配置することもできます。
方法 4: PHP コード
PHP コードスニペットを使用して、サイト全体に簡単にパンくずリストを追加できます。
このスニペットは、通常のテキストのようにコピーして貼り付けるだけです。
このオプションを使用する利点は、すべてのページに自動的にパンくずリストが追加され、この操作を繰り返す必要がなくなることです。
手順は次のとおりです。
- コードスニペットをコピーします。
- テーマエディターを開きます。
- header.php をクリックします。
- コードスニペットを貼り付けます。
これらの手順を順を追って説明します。
1. コードスニペットをコピーする
AIOSEO パンくずリスト ページで、
- PHP コードをクリックします。これにより、短いコード行が表示されます。
- コードスニペットの右側にある小さなコピーアイコンをクリックします。
そのコード行をコピーしたら、テーマに貼り付けます。
2. テーマエディターを開く
- WordPress の左側のナビゲーションで、外観 » テーマファイルエディターに移動します。
次のような新しいウィンドウが開きます。
3. header.php をクリックする
- 右側の列 (テーマファイル) で、header.php を見つけてクリックします。
これにより、左側に新しいコードウィンドウが表示されます。
4. コードを貼り付ける
- </head> タグを探します。
- その下に、PHPコードスニペットを貼り付けます。
- 次にファイル更新をクリックして変更を保存します。
ここに、</head>タグとPHPパンくずリストコードスニペットのクローズアップがあります。
ファイル更新をクリックすると、すべてのウェブページにパンくずリストが追加されます。
新しい投稿やページにも追加されます。
注意： </head>タグの前に、<head>タグ（スラッシュなし）があります。PHPコードスニペットは </head>タグの後に入れる必要があります。
WordPressウェブサイトにパンくずリストナビゲーションを追加する方法がわかったので、次に表示をカスタマイズする方法を説明します。
パンくずリストの設定
パンくずリストの設定を変更すると、パンくずリストの表示が変わります。
これらの設定には、次のオプションが含まれます。
- ホームページを含めるか除外するか。
- 異なる区切り文字スタイルを使用する。
- ユーザーがいる現在のページ（ページタイトル）を含めるか除外するか。
まず、パンくずリスト設定エリアの上部にあるプレビューが表示されます。
設定を調整すると、このプレビューが変更されます。
プレビューの下で、さまざまな区切り文字スタイルを試すことができます。
ホームページリンクをオフにするか、別のラベルを付けることができます。（「ホーム」がデフォルトのラベルです。）
少し下にスクロールします。
ここでは、さらに2つのカスタマイズオプションがあります。
- パンくずリストのプレフィックス：パンくずリストの先頭に表示したいテキストがある場合は、ここにに入力します。
- ブログホームを表示：「ブログ名」をパンくずリストに表示したくない場合は、「オフ」に切り替えます。
パンくずリスト設定についてさらに詳しく学ぶ。
Proパンくずリストテンプレートの使用
All in One SEO（AIOSEO）のProバージョンを使用している場合、AIOSEO » 一般設定 » パンくずリストの下部にパンくずリストテンプレートオプションが表示されます。
テンプレートを使用すると、パンくずリストの外観を変更できます。投稿タイプごとに異なるオプションを選択できます。
パンくずリストテンプレートについてさらに詳しく学ぶ。
パンくずリストナビゲーションの種類
上記で説明した階層ベースのパンくずリストに加えて、さらに2種類のパンくずリストナビゲーションがあります。
階層ベースのパンくずリストは、場所ベースのパンくずリストとも呼ばれます。
履歴ベースのパンくずリスト（パスベースのパンくずリスト）
このナビゲーションタイプは、サイトで訪問したページを表示します。
ユーザーが多くのページを訪問すると、扱いにくくなる可能性があります。
属性ベースのパンくずリスト
一部のeコマースウェブサイトでは、パンくずリストに色、仕上げ、サイズなどの商品属性が含まれています。
これらは階層ベースのパンくずリストと組み合わせることができます。
ベストプラクティス
Googleは、パンくずリストがサイトの階層と一致することを推奨しています。
ただし、メインナビゲーション項目を複製または置き換えるべきではありません。
概要
パンくずリストは、ウェブサイトのユーザビリティを向上させ、Google検索結果でのページのランクを向上させるのに役立ちます。
多くの商品ページを持つeコマースサイトや情報量の多いサイトは、パンくずリストナビゲーションから大きなメリットを得られます。しかし、どのサイトオーナーでも追加できます。
次にやること
パンくずリストの追加方法を学んだところで、次は？
WordPressウェブサイトにHTMLサイトマップを追加する方法を学ぶのは簡単です。また、初心者向けのDIY SEOプロジェクトもご覧ください。
この記事がお役に立った場合は、YouTubeチャンネルを購読してください。そこには、さらに多くの役立つチュートリアルがあります。最新情報を入手するには、X（Twitter）、LinkedIn、またはFacebookでもフォローできます。
AIOSEO を無料で試してみませんか？
AIOSEO Lite をインストールするには、WordPress ウェブサイトの URL を入力してください。
開示：当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみをお勧めします。
この記事は良いスタートを切っていますが、なぜ（そしてどのように）ウェブサイトで特定のパンくずリスト関連のアクションを取るべきなのかについての説明が私には不十分です。著者は私が持っていない知識を前提としています。そのため、自信を持ってアクションを取ることができません。全体として、この記事は初心者向けには十分ではありません。