パンくずリストをプラグインなし・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> ><span itemscope="itemscope" itemtype="(2階層目のURL)" itemprop="url" target="_top"><span>(2階層目のタイトル)</span></span> > <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> > <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> > <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> > <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階層目以降もパンくずリストを設置することができます。
試してみてください。
お役に立てれば幸いです。
お得なおすすめ情報に関連したページは、次の通りです。。
- お得なおすすめ情報 はこちら
- ◎パソコンを売る時のお勧め買取先紹介
- ◎リモート会議専用|MeePetの評判・レビュー
- ◎なんでも買取!エコリング利用のポイント
- ◎「スマホが遅い」への対策方法
- ◎フォルダにパスワードをかける方法
- ◎ノートパソコンを2画面構成にする方法
- ◎お得なパソコンメーカー直販サイトの紹介
- ◎静音タイプのキーボード5選
- ◎カスタマイズPC購入のすすめ
- ◎スティックPCとは?
- ◎自動でふたが開閉する衛生的なごみ箱紹介
- ◎パンくずリストをHTML形式で作る方法
- ◎パワーポイントデータの容量を減らす方法
- ◎ITパスポートに合格できる勉強方法
- ◎基本情報技術者に合格できる勉強法
- ◎エクセルの使い方を簡単に学習できる方法