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

SEOならSEOパック
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ページのデフォルトの表示タグです。
このページ自体にももちろんリンクも付いていません。

\無料診断の活用で課題を明確に/

外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。

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

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

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

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

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

SEOパーソナル診断
SEO内部対策 トップに戻る

SEOツール無料トライアル

プロも個人も、高機能なSEOツールを体験ください。

コンテンツ分析や内部SEO対策、競合分析ができるSEOツールが7日間体験可能!

seodoor by SEO Pack

登録申し込み後自動でログインされます。アカウント情報はご登録のメールアドレスへ自動送信されておりますのでご確認ください。

SEO Packキャンペーン
内部修正サービス

公式SNS

Twitter

facebook