パンくずリストの概要と簡単に設置できるプラグインBreadcrumb NVXTの使い方

本記事ではパンくずリストの説明と、導入したワードプレスのテーマにパンくずリスト機能が備わっていなかった場合の導入方法です。

是非参考にしてください。

パンくずリストとは?

パンくずリストとは下の画像のようにWebサイト内で自分が今どのページにいるのかを示すナビゲーションの事です。

↓これ

名前の由来は、童話「ヘンデルとグレーテル」の主人公が森で迷子にならないように、自分が通った道にパンくずを置いていったエピソードに由来するらしいです。

絶対パンくずを道において行ったぐらいじゃ100%迷うでしょ。

気になって調べたらやっぱり鳥に食べられ帰り道が分からず迷子になったらしい。

そりゃそうだ。。

童話と違い、Webサイトのパンくずリストは鳥ごときに乱されないよう正しく設置する必要があります。

ちなみにGoogleはパンくずリストの設置を推奨しているので、可能であれば設置しておくようにしたい。。

パンくずリストの効果

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

  1. 視認性を高め、ユーザーのユーザビリティを上げる
  2. 検索エンジンに正しく情報を与え、クローラーの巡回率を高めSEOを強化する

詳しく説明していきましょう。

ユーザビリティの向上

小さい個人運営のサイトレベルではあまり気にならないかもしれませんが、基本的にコンテンツの多いサイトであればあるほど、ユーザーは現在どのページにいるか分かりにくくなります。

また、基本的に検索エンジンからのアクセスはサイトのトップページではなく、サイトの1つ1つのページに直接アクセスしてきます。

その場合も当然自分がこのサイトのどこにいるのかが分かりませんが、パンくずリストがあれば「自分がこのサイトのどこの階層のどこのページにいるのか」「トップページからどんな経由で今いるページに辿り着けるのか」「自分が今いるページが、どのカテゴリーに分類されているのか」を一目で理解することができます。

 

SEO対策の強化

パンくずリストは検索エンジンにサイトの階層構造、階層構造に準じたリンク構造を伝えます。

その結果クローラーと呼ばれるGoogleのロボット(常にインターネットを巡回し、各サイトをチェックしているロボット)に正しい情報を伝える事ができ、結果としてSEO効果が上がります。

また、アンカーテキスト(パンくずリストの文字の部分)は、そのリンク先のページがどういった内容かを伝える効果があり、これもSEO効果を高める事ができます。

パンくずリストの導入方法

最近のワードプレスのテーマならデフォルトでパンくずリスト機能が備わっている事が多いですが、このサイトで採用している「MH Magazine lite」のように備わっていないテーマもあります。

そんな時はパンくずリストを導入できるプラグイン「Breadcrumb NavXT」を使ってサイト内にパンくずリストを設置しましょう。

Breadcrumb NavXTのインストール

WordPress管理画面 > プラグイン > 新規追加 >「Breadcrumb」で検索し、まずはインストールしましょう。

この茶色のBマークのアイコンのプラグインです。

Breadcrumb NavXTの設定方法

インストールが完了して有効化したら、設定 > Breadcrumb NavXTで設定画面に飛べます。

設定画面に飛べますが、基本的にデフォルトの状態でOKです。

パンくずリストをアイコンで表示したい人などはここから編集可能ですが、テキストで表示させないとSEO効果は下がるのでオススメはしません。

パンくずリストをウィジェットから設置する方法

さていよいよパンくずリストを設置していきます。

外観 > ウィジェット からウィジェット編集画面へ行くと Breadcrumb NavXTという項目が追加されています(緑枠線)。

それを記事の上に来るように該当箇所へドラッグしましょう。

「MH Magazine lite」の場合は水色枠線で囲った部分が該当箇所になります。

水色部分へドラッグし保存すると下記の部分にパンくずリストが表示されます。

 

パンくずリストをテーマの編集から設置する方法

こちらは上級者向きです。

外観 > テーマの編集からテーマの該当するphpファイルに直接下記コードを入力します。


1
2
3
4
5
6
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

(引用元:Breadcrumb NavXT公式ページ

 

編集するファイルやコードを挿入する箇所は、各テーマによって異なります。

大体にheader.phpの一番下あたりにに張り付ければいいと思いますが、早速「MH Magazine lite」だと綺麗に表示されなかったので、「MH Magazine lite」の場合は記事ページの一番上に来るよう下の画像のようにcontents-single.phpの上部に張り付けました。

※【注意】テーマの編集はかならず元のデータをコピーしてから編集、保存してください。もし誤った記述をして保存してしまうと、サイトが表示されなくなったり不具合が出たりする可能性があり、復旧させるのが大変になります。

テーマにコードを記述し保存すると上記画像のようにパンくずリストが表示されます。

 

パンくずリストの文字の大きさや色を変える

Breadcrumb NavXTで導入したパンくずリストのデザイン(文字の大きさや色)を変えたい場合はCSSを弄ってカスタマイズするしかありません。

CSSとはHTMLで作った要素を装飾するスタイルを指定する言語です。

よく分からない人も多いと思いますが、サイトの外観のデザインを作るプログラムみたいなもんだと思ってください。

こちらも外観 > テーマの編集から直接スタイルシートを編集するか、「MH Magazine lite」を使っている場合は 外観 > カスタマイズ  > 追加CSSでデザインを編集できます。

ブラウザがchromeの場合、右クリック > 検証をすると、Webサイトのデータを見る事ができるので、パンくずリストがどういった内容で書かれているか確認します。

緑の部分がパンくずリストの内容です。

ここに「もっとパンくずリストのデザインを○○しろ」とCSSで命令します。

今回私はパンくずリストの文字サイズが気になったので文字サイズを8pxにしてみました(画像は1になっていますが気にしないで)。

その場合は下記のように記述します。

.breadcrums {
font-size: 8px;
}

これでパンくずリストの文字サイズが小さくなります。

ただこれはCSSを知っていない人には結構厳しいかもしれません。

よく分からなかった人はCSSを勉強してみるのも良いかもしれませんね。

パンくずリストのまとめ

パンくずリストはSEO的にも読者のユーザビリティ向上にもとても有効なので是非導入しましょう。

自分が使っているテーマにパンくずリストが備わっていなかったらBreadcrumb NavXTをつかって導入しましょう。

コメントを残す