WordPressでパンくずリストを簡単に設置する方法

SEOならSEOパック
ご利用実績9157件 (2017/06/24現在)
2016年05月19日 2016年09月09日

WordPressでパンくずリストを簡単に設置する方法

只今タイムセールを実施中です。

下記の記事にも書きましたが、パンくずリストを構造化データで設置するためには、手動で設置する方法やプラグイン、テンプレートを利用する方法など、いくつかの方法があります。
パンくずリストを構造化データで設定する方法とSEO効果

その中から今回はWordPressで簡単にパンくずリストを表示でき、しかも構造化データで設置するプラグインの紹介と、その使い方についてご説明したいと思います。

Breadcrumb NavXTでパンくずリストを設定する

WordPressのプラグインでパンくずリストを表示させるものは他にも色々あるようですが、設定がわかりやすく簡単に設置できることからこの記事に、この「Breadcrumb NavXT」というプラグインを導入してみました。

まずは、インストールしてみましょう。
プラグイン新規追加ページで「Breadcrumb NavXT」を検索してインストールします。
別途ダウンロードしてインストールする場合は、下記リンクから進めてください。
Breadcrumb NavXT

初めての場合で、「すぐに移行する」といったテキストリンクが出た場合は、クリックすることで、問題なく管理画面に遷移します。

パンくずリストを表示させたい場所にタグを設置する

インストールした後、パンくずリストを表示させたい箇所に下記のタグを記述します。

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>

※1行目の「vocab=”http://schema.org/” typeof=”BreadcrumbList”」は、プラグインでは自動で吐き出されません。この宣言が無いと正しく構造化データとして認識されないので、注意してください。

このプラグインを紹介して、さらに導入しているサイトが数多くありますが、テストツールで検証してみると構造化データを認識されていないサイトをかなり見かけました。

Breadcrumb NavXTの各種設定

このプラグインの設定は下記の4つのタブで管理されています。

  • 一般
  • 投稿タイプ
  • タクソノミー
  • その他

投稿ページ以外にも、カテゴリページや固定ページ、404ページなどにもパンくずリストを表示することができ、それぞれの表示をカスタマイズすることができます。
では、各種設定をご説明していきます。

一般

Breadcrumb NavXT 一般 設定

この項目では、以下の項目を確認してください。
デフォルトでも問題ありませんが、例えばトップページを「サイト名」とするのか?「トップ」にするのかなどです。

  • パンくずリストの区切り
  • 現在のページにリンクするかどうか
  • 分割されたページのパンくず表示
  • トップページの表示設定

トップページの表示を変更するには「ホームページテンプレート」というフォーム内を修正します。
デフォルトでは下記のようになっています。

<!--ホームページテンプレート-->
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="%title%へ移動" href="%link%" class="%type%"><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

ここで、「property」や「typeof」などのタグは構造化データに必要なタグなので、削除しないようにしてください。

デフォルトではアンカーテキストとほぼ同じ内容がtitle属性に設定されているので、削除しても良いでしょう。

「meta property=”position” content=”%position%”」は、パンくずリストの○番目を表しているので、ここも残しておきます。

投稿タイプ

Breadcrumb NavXT 投稿タイプ 設定

ここでは、以下の項目を確認してください。
パンくずリストなので、階層を非表示にすることはあまり考えられませんが、カテゴリ名や日付など表示する階層をカスタマイズすることが可能です。

  • 現在のページを表示方法
  • 階層を表示するかどうか
  • 固定ページの表示

下記はデフォルトの現在のページ(リンクなし)のタグです。
デフォルトのままでも良いでしょう。

<!--投稿テンプレート(リンクなし)-->
<span property="itemListElement" typeof="ListItem"><span property="name">%htitle%</span><meta property="position" content="%position%"></span>

パンくずリストで現在のページをリンクしていると、別ページと勘違いする場合を考慮して、ここではリンクなしで設定してみます。

タクソノミー

Breadcrumb NavXT タクソノミー 設定

ここでは、カテゴリーアーカイブや、タグアーカイブなどのパンくずリストの表示設定を行います。
ユーザーの使い勝手を考慮した上で、リンクさせるかどうか決めましょう。

<!--カテゴリーテンプレート-->
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="%title%のカテゴリーアーカイブへ移動" href="%link%" class="%type%"><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

カテゴリーのリンク設定はデフォルトで上記のようになっています。
ここもアンカーテキストとtitle属性がほぼ一緒のものが入っているため、削除しても良いでしょう。

その他

Breadcrumb NavXT その他 設定

ここでは、投稿者テンプレートや検索テンプレート、404ページなどのパンくずリストの設定をカスタマイズすることができます。
パンくずリスト自体必要ないページですので、デフォルトのままで良いでしょう。

<!--404テンプレート-->
<span property="itemListElement" typeof="ListItem"><span property="name">%htitle%</span><meta property="position" content="%position%"></span>

上記は404ページのデフォルトの表示タグです。
このページ自体にももちろんリンクも付いていません。

WordPressでパンくずリストを設置する方法まとめ

以上のようにWordPressをお使いの場合は、プラグインで簡単にパンくずリストを構造化データで設置することができるため非常に便利です。
色々と設定が多くありますが、実際に必要な箇所は少なく難しくありません。

また、パンくずリストは内部リンクにもなり、SEO内部対策としても有効ですので、必ず正しく設置されているかテストして動作確認するようにしましょう。

構造化データの検証について

構造化データは、正しく設定できているかどうかをこちらのテストツールで確認してからアップしましょう。
構造化データテストツール
※URLでもタグでもテストすることができます。

SEO内部対策 トップに戻る
「スマホのSEO対策お役立ち記事」MFIの今と、対応方法について
「スマホのSEO対策お役立ち記事」MFIの今と、対応方法について
無料コンテンツ対策支援窓口
SEOツールseodoor(せおどあ)に無料版が登場しました

LINEで友だちになる

キーワードの変動情報を中心に
SEOの「ちょうどいい」情報を配信中。

友だち追加