パンくずリストの作り方、意味、WordPressサイトへの導入、プラグイン、

はじめに

　HTML＆CSS入門講座の第二十二弾として、パンくずリストの作り方、意味、位置、cssデザイン、WordPressサイトへの導入、プラグインなども解説について紹介します。

　この記事を読むと次の疑問について知ることができます。

パンくずリストとは？

　調べ物をしていてネットであるサイトを訪れ、その際に見ているページのグローバルメニューの下のほうに小さな文字とアイコンであなたがいる場所を示すメニューが示されることがあります。

　このメニューのことをパンくずリスト（breadcrumb list）と呼びます。

　例えば、「サルワカ」さんのページなどを見ると以下のようなパンくずリストを見ることができます。

　行ってみれば、あなたが迷子にならないようにこのサイトのどの部分を参照しているかがわかる道標がパンくずリストです。

パンくずリストの由来

　サイトなどの道しるべが「パンくずリスト」という名称で呼ばれるようになったのか不思議に思われる方も多いと思います。

　これは童話の「ヘンゼルとグレーテル」の中に出てくるヘンゼルとグレーテルの兄弟が森に入る際に通った道にパンくずを置き、それを目印として迷子にならないようにしたという内容の話（エピソード）が書かれていたのが由来となっています。

　したがって、Webサイトでも同様にあなたがいるサイトの位置や辿った道筋がわかるようにするのが「パンくずリスト」と言うわけです。

パンくずリストの役割

　パンくずリストには3つの役割があります。

サイトの訪問者が迷いにくくする

　サイトを訪問してくれた方の居場所がわかることは、他の知りたい場所。興味のある場所をパンくずリストから類推でき、また、パンくずリストはリンクになっていますので、そこをクリックすることによりリンクしたページに瞬時に飛ぶことができ、訪問者のユーザービリティーが向上することにつながります。

SEOの効果が期待できる

　SEO（検索エンジン最適化）をするには、サイト内のカテゴリー構造をだれが見てもわかりやすい明確な分類をすることにより、「パンくずリスト」が生きてきます。

　つまり、カレゴリーにキーワードを含めることができるわけで、検索エンジンがサイトを訪れた際に「パンくずリスト」にキーワードが含まれていれば、このサイトの内容を明確に検索エンジンに知らしめることができるわけです。

　そのためにも、サイトのカテゴリ分けが大事であり、理想的なカレゴリー構造にすることが必要になります。

内部リンクとしての働きもある

　パンくずリストのそれぞれはリンクになていますので、内部リンクとしての働きもあります。

　このことは、内部SEOとして有効に働きます。

パンくずリストの作り方

　パンくずリストを作るには、もっとも簡単な方法は。パンくずリストに対応したテーマ（例えば、Cocoon）を選べば、パンくずリストの部分にチェックを入れるだけで済みます。

　2つ目は、WordPressプラグインを利用する方法です。

　3つ目は、実際にパンくずリストを書いて、自分のサイトに設定する方法になります。

Cocoonテーマを利用してる場合のパンくずリストの導入

　無料のテーマCocoonを利用していれば、パンくずリストを導入するのは簡単です。

　WordPressの左メニューから「Cocoon設定」⇒「投稿」⇒「パンくずリスト設定」でパンくずリストをどこに配置するかの設定と記事のタイトルを入れるかどうかを設定するだけでOKです。

　設定手順とおすすめ設定を次に載せておきます。

WordPressプラグインでパンくずリストを導入

　WordPressプラグインを利用するといろいろなプラグインで「パンくずリスト」を導入することができます。

　例えば、SEO関係のプラグインをインストールしているならば、Yoast SEOには「パンくずリスト」を設定できる項目もあります。

　また、「パンくずりリスト」のみをWordPressプラグインでやりたいとなれば、かなりいろいろなプラグインがあります。

　いくつか例を挙げると、次のようなものがあります。　

　いずれにしても、これらを利用するためには短いコードをテーマに追記する必要があります。

構造化データによるパンくずリストの導入

 　パンくずリストを構造化データとして書き表すには、2つの形式があります。

　JSON-LD形式やmicrodata形式の詳細については、ここでは省略します。

　別の機会に、詳細な解説をしたいと思います。

<nav>タグによる簡単なパンくずリストの作成例

　ナビゲーションタグである<nav>で横並びの「植物」、「花」、「オレンジ色の花」のメニューを作ってみましょう。

　ここで使ったタグなどを次の載せておきます。

おわりに

　如何だったでしょうか？

　パンくずリストとは？、パンくずリストの由来、パンくずリストの役割は？、サイトの訪問者が迷わにくくなる、SEOの効果が期待できる、内部リンクとしての働きもある、パンくずリストの作り方はどうするの？、Cocoonテーマを利用してる場合のパンくずリストの導入、WordPressプラグインでパンくずリストを導入、構造化データによるパンくずリストの導入、<nav>タグによる簡単なパンくずリストの作成例とはどのようなもの？などについてかいせつしてきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。