パンくずリストをプラグインなし・HTML形式で作るには

ここでは、プラグインが使えなくてもパンくずリストを設置できる方法を解説します。

 

パンくずリストは「今自分がそのサイトのどこにいるのか?」が一目で分かるものになっており、SEO的にも効果があるとも言われています。

 

覚えれば、グーグルサーチコンソールでの構造化リストのアイテム数を増やすことができますよ。

1.パンくずリストってなに?

 多くの人が知っているかもしれませんが、一応「パンくずリストとは?」について解説しておきます。

 

パンくずリストとは、サイトの訪問者が「自分が今どこにいるのか?」を把握するために有効なものとなっています。

実際には上の囲みのようなもので、クリックするとそのページの上の階層に飛ぶようリンクが設定されていて、「同じグループの別の記事」を探すときなどにも役立ちます。

 

また、SEO的にも効果があると言われており、設置することで例えばグーグルサーチコンソールの「構造化データ」にアイテム数がカウントされたりもします。

 

ちなみに設置場所は99.9%「サイトの上部」に置きます。

2.Jimdo Freeで以前できた方法

 続いてプラグインがなくても、例えばJimdo Freeでこれまでできた方法を確認してみましょう。

 

2-1.scriptを使う

 プラグインを使用しなくてもできる方法として、例えばJimdo Freeでは「独自レイアウトでパンくずリストを設置する」方法がありますが、正直面倒です。

 

ですから何とか既存のレイアウトで設置できないか?となるのですが、以前は簡単にできたようです。

 

【以前できた方法】

 

「設定」⇒「ヘッダー部分を編集」⇒ テキストボックスへ下記のコードを貼付ける

 

<script type="text/javascript" src="http://open-lab.jp/jimdo/breadcrumb.js">

</script>

 

しかしこの方法は、Jimdoの仕様変更でできなくなりました。なぜ出来なくしたんでしょうね…。

 

2-2.HTML形式で作る(data-vocabulary.org)

 続いてscriptを使わなくてもできたのが、以下の「ページ一つ一つにHTML形式で作る」方法です。

 

【Jimdoの既存レイアウトでパンくずリストを設置する方法】

 ① 「コンテンツの追加」をクリック

 ② 「文章」をクリック

 ③ 「HTMLを編集」をクリック

 ④ 「Source code」に次のHTMLを張り付ける

 

≪貼り付けるHTML(3階層目の記事にパンくずリストを付ける場合)≫

<p><span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/" itemprop="url"><span>トップページ</span></a></span> &gt;<span itemscope="itemscope" itemtype="(2階層目のURL)" itemprop="url" target="_top"><span>(2階層目のタイトル)</span></span> &gt; <span itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><span>(3階層目のタイトル)</span></span></p>

 

しかしこの方法も、グーグルサーチコンソールが「data-vocabulary.orgスキーマ」を利用できなくしたため、使えなくなりました…。

3.HTML形式でパンくずリストを設置する方法

 では現在はどのようにすれば、Jimdo Freeなどのプラグインが使えないホームページでもパンくずリストを設置できるのでしょうか?

 

色々と調べながら試した結果、HTML形式で1ページ1ページですが、手で追加すればできる方法がありました!

 

手間は掛かりますがグーグルサーチコンソールで「構造化リスト」のアイテム数が増えるとすれば、やる価値はあります。

まず共通手順は次の通りです。

 

例えばJimdo Freeでパンくずリストを作成する場合、共通手順は次の通りです。

 

【Jimdoの既存レイアウトでパンくずリストを設置する方法】

 ① 「コンテンツの追加」をクリック

 ② 「文章」をクリック

 ③ 「HTMLを編集」をクリック

 

 ④ 「Source code」に次のHTMLを貼り付ける

 

そして階層ごとにHTMLの書き方はちょっと変わってきます。

 

それぞれ見てみましょう。

 

3-1.1階層目の場合

 

 では1階層目に設置するパンくずリストの書き方からです。

 

【1階層目に設置する場合】

<p><span itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList"><span itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><span itemprop="position" content="1" itemtype="http://schema.org/ListItem"><span style="background: linear-gradient(transparent 80%, #FFE4B5 0%);"><span itemprop="name">(①)</span></span></span></span></span></p>

 

(①)には「トップページ」などのパンくずリストの1階層目として表示させたいタイトルを入れます。

 

これをトップページの一番上に設置すれば1階層目は完了です。

 

3-2.2階層目の場合

 次に2階層目の場合です。

 

2階層目のパンくずリストは次のように書きます。

 

【2階層目に設置する場合】

<p><span itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList" style="color: #025197;"><a href="/" itemprop="url" style="color: #025197;"><span itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><span itemprop="position" content="1" itemtype="http://schema.org/ListItem"><span style="background: linear-gradient(transparent 80%, #98FB98 50%);"><span itemprop="name">(①)</span></span></span></span></a></span> &gt; <span itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList"><span itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem" style="color: #000000;"><span itemprop="position" content="2" itemtype="http://schema.org/ListItem" style="color: #000000;"><span style="background: linear-gradient(transparent 80%, #E0FFFF 0%);"><span itemprop="name">(②)</span></span></span></span></span></p>

 

(①)には「トップページ」などのパンくずリストの1階層目として表示させたいタイトルを、(②)にはそのページの2階層目として表示させたいタイトルを入れます。

 

これを2階層目のページの一番上に設置すれば2階層目も完了です。

 

3-3.3階層目の場合

 続いて3階層目の場合です。

 

3階層目のパンくずリストは次のように書きます。

 

【3階層目に設置する場合】

<p><span itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList" style="color: #025197;"><a href="/" itemprop="url" style="color: #025197;"><span itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><span itemprop="position" content="1" itemtype="http://schema.org/ListItem"><span style="background: linear-gradient(transparent 80%, #98FB98 50%);"><span itemprop="name">(①)</span></span></span></span></a></span> &gt; <span itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList" style="color: #025197;"><a href="(②)" itemprop="url" target="_top" style="color: #025197;"><span itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><span itemprop="position" content="2" itemtype="http://schema.org/ListItem"><span style="background: linear-gradient(transparent 80%, #E0FFFF 0%);"><span itemprop="name">(③)</span></span></span></span></a></span> &gt; <span itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList"><span itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem" style="color: #000000;"><span itemprop="position" content="3" itemtype="http://schema.org/ListItem" style="color: #000000;"><span style="background: linear-gradient(transparent 80%, #FFE4B5 0%);"><span itemprop="name">(④)</span></span></span></span></span></p>

 

(①)には「トップページ」などのパンくずリストの1階層目として表示させたいタイトルを、(③)にはそのページの2階層目として表示させたいタイトルを、(④)には3階層目として表示させたいタイトルを入れます。

 

そして(②)には「2階層目のURL」をコピーして入れます。

 

これを3階層目のページの一番上に設置すれば3階層目も完了です。

 

このようにしていけば、4階層目以降もパンくずリストを設置することができます。

 

試してみてください。

 

お役に立てれば幸いです。

Top