Breadcrumb NavXTでパンくずリストを構造化マークアップする方法

ブログやウェブサイトにおいてパンくずは重要な役割をもちます。ウェブサイトの階層構造を示しどこをどうやってたどってきたかを表示し、上層ページに戻りやすくするというユーザビリティ面だけでなく、SEO面でも検索エンジンにサイトの論理的な構造を伝える、また、内部リンクとしてGoogleのクローラーがクローリングしやすくする手段としてとても有用です。Wordpressで作っているサイトあればプラグインを利用して30分あればパンくずを設定できます。代表的なプラグインはBreadcrumb NavXTです。

Breadcrumb NavXT紹介ページへ

Breadcrumb NavXTなどのプラグインで、パンくずの設定が終わったら、今度はパンくずの構造化マークアップをおすすめします。Googleにサイトの論理的な構造を伝えるには、この構造かデータのマークアップ推奨されているためです。ここでは、パンくずプラグインBreadcrumb NavXTに絞り、構造化マークアップの設定方法を紹介します。

Breadcrumb NavXTの設定方法

Breadcrumb NavXTのパンくずリストの構造化はプラグインの設定画面から行います。まずはWordpress管理画面の左ナビゲーションより設定画面に移動します。

設定画面に移動し設定を変更

Breadcrumb NavXTの設定画面は複数のタブに分かれて存在しています。パンくずを構造化した状態で表示するにはそれぞれに対して設定が必要です。

一般タブ設定

ホームページ用テンプレート

<span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a title="%title%" href="%link%" itemprop="url">
<span itemprop="title">%htitle%</span></a></span>

ホームページ用（リンクなし）

<span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">%htitle%</span></span>

投稿タブ設定

投稿テンプレート

<span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a title="%title%" href="%link%" itemprop="url">
<span itemprop="title">%htitle%</span></a></span>

投稿テンプレート（リンクなし）

<span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">%htitle%</span></span>

ページ用テンプレート

<span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a title="%title%" href="%link%" itemprop="url">
<span itemprop="title">%htitle%</span></a></span>

ページ用テンプレート（リンクなし）

<span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">%htitle%</span></span>

タクソノミータブ設定

カテゴリー用テンプレート

<span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a title="%title%カテゴリのアーカイブ" href="%link%" itemprop="url">
<span itemprop="title">%htitle%</span></a></span>

カテゴリー用テンプレート（リンクなし）

<span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">%htitle%</span></span>

画面表示テンプレートにパンくずの設定

パンくずを表示したい場所に以下のコードを挿入します。

<ol class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</ol>

これで設定は完了です。あとはGoogleの反映を待つのみです。ウェブサイトの表示切り替えと異なり、検索結果の表示変更の反映には時間がかかります。早いときは数日で検索結果に反映されていますが、余裕を持って一週間程度反映に時間がかかると見ていただくのが良いと思います。