Shopifyでオンラインストアを運営する上で、ユーザビリティとSEOの観点から重要な要素の一つがパンくずリストです。パンくずリストは、ユーザーが現在サイト内のどこにいるかを示し、簡単に前のページに戻れるようにする便利な機能です。
本記事では、Shopifyのブログ記事にパンくずリストを表示するメリットやデメリット、実装方法を解説します。
パンくずリストとは
パンくずリストはお客様が今どこにいるのかを示す道しるべのようなものです。例えば、「ホーム > 婦人服 > ドレス > 夏物」というように、現在の位置をわかりやすく表示します。これは、まるでお店の中で「婦人服売り場のドレスコーナーにある夏物コーナー」にいるようなものです。
このナビゲーション機能は、お客様がサイト内を迷わずに移動できるようサポートします。例えば、ドレスのページから婦人服全体のカテゴリーに戻りたい場合、パンくずリストの「婦人服」をクリックするだけで簡単に移動できます。
また、パンくずリストは検索エンジンにもサイトの構造を理解しやすくさせるため、SEO（検索エンジン最適化）の観点からも有益です。これにより、あなたのShopifyストアが検索結果で上位に表示される可能性が高まります。
パンくずリストを出すメリット
ユーザービリティが向上する
パンくずリストを出すことで、訪問者は現在地を把握でき、現在地の親階層へすぐにアクセスでき、探しているShopifyサイト内の商品やブログ記事を見つけやすくなります。
たとえば、「iPad Air 第5世代」の商品ページに「Apple > iPad > iPad Air 第5世代」というパンくずリストを表示した場合、「iPad Air 第5世代」の商品ページにアクセスした訪問者はサイト内の「他のiPad商品」も確認したい場合に、パンくずリスト内の「iPad」をクリックすることで、「他のiPad商品」の一覧情報へアクセスすることができます。
SEOに良い効果を期待できる
上述のとおり、他の情報へアクセスしやすくなることで回遊率やPVが伸びたり、botのクローラビリティーも向上するためSEOへ良い効果を期待できます。
下記の記事では、SEOのメリットやShopifyで出来るSEO対策について解説しています。参考にしてください。
SEOのメリット・デメリット｜Shopifyで出来るSEO対策
パンくずリストを出すデメリット
サイトが見にくくなる可能性がある
文字数が多かったり、構造が深すぎるとパンくずリストが１行で収まらない場合、訪問者がスマホなど画面が小さい端末で閲覧していると、サイトが見にくくなる可能性がでてきます。
誤タップする可能性がある
パンくずリストはサイトの上部に表示させるケースが多く、スマホでページスクロールさせる際に誤ってパンくずリストをタップし、別のページへ遷移してしまう可能性があります。
Shopifyでパンくずリストを出す方法
パンくずリスト対応のShopifyテーマを利用する
まずはじめに、パンくずリストに対応しているShopifyテーマを利用する方法もあります。一例としてExpanseなどはブログ記事にパンくずリストを出すことが出来ます。
メリットとしては、簡単にパンくずリストを出すことができることです。
デメリットとしては、デザインやパンくずリスト内の情報を自由にカスタマイズできないことです。また、対応しているテーマを探すのにも時間がかかります。
Shopifyアプリを利用する
次に、Shopifyアプリを利用する方法です。
メリットとしては、簡単に導入ができ、好みのデザイン（色味）にカスタマイズができることです。また、細かな調整や動作テスト等に貴重なエンジニアのリソースを割かなくて済むのも大きなメリットと言えます。
デメリットとしては、日本語対応のアプリが少ないことや5ドル前後ではありますが月額費用が発生することです。
後述の「Shopifyのパンくずリストアプリ3選」でもおすすめのパンくずリストアプリを紹介しています。ご参考にしてください。
ソースコードをカスタマイズする
最後に、Shopifyのソースコードをカスタマイズして導入する方法です。
メリットとしては、無料で作ることができることと自由にデザインなどをカスタマイズ出来ることです。
デメリットとしては、HTMLやCSS、JavaScriptなどのプログラミング知識が必要になることです。また、開発だけでなく、意図したとおりに動くかテストする時間も発生するのがデメリットです。
後述の「 ソースコードをカスタマイズしてパンくずリストを表示する方法」で、アプリを利用せずにパンくずリストを表示する方法を紹介しています。ご参考にしてください。
Shopifyのパンくずリストアプリ3選
PH Breadcrumbs
出典：PH Breadcrumbs｜Shopifyアプリストア
「PH Breadcrumbsは、あなたのShopifyストアに簡単にパンくずリストを追加できる便利なアプリです。セットアップが非常に簡単で、直感的に使用できます。このアプリを使えば、ウェブサイトのナビゲーションが改善され、ユーザーエクスペリエンスが向上します。ユーザーからの高評価を得ており、5つ星の評価を多数獲得しています。迅速で丁寧なサポートも好評です。
PH Breadcrumbsの特徴
- 簡単なセットアップ
- カスタマイズ可能なパンくずリスト
- SEOの改善
- 優れたカスタマーサポート
PH Breadcrumbsの料金プラン
Basicプラン 月額 4.98ドル
Schema & Breadcrumbs by Bogdan
出典：Schema & Breadcrumbs by Bogdan｜Shopifyアプリストア
Schema & Breadcrumbs by Bogdanは、あなたのShopifyストアのSEOとナビゲーションを大幅に改善する強力なツールです。このアプリを使用することで、ウェブサイトの構造を簡単に最適化し、検索エンジンでの可視性を向上させることができます。
Schema & Breadcrumbs by Bogdanの特徴
- SEOに効果的なスキーママークアップの実装
- 使いやすいパンくずリストの追加
- ウェブサイト構造の改善
- 迅速で専門的なサポート
Schema & Breadcrumbs by Bogdanの料金プラン
Standardプラン 月額 4.99ドル
Category Breadcrumbs
出典：Category Breadcrumbs｜Shopifyアプリストア
Category Breadcrumbsは、Shopifyストアのナビゲーションを簡単かつ効果的に改善するアプリです。このアプリを使用することで、顧客の買い物体験を向上させ、SEOにも貢献します。
Category Breadcrumbsの特徴
- 簡単なセットアップと使用
- カスタマイズ可能なパンくずリスト
- SEO向上のためのBreadcrumbList schema対応
- 迅速で親身なカスタマーサポート
Category Breadcrumbsの料金プラン
Basicプラン 月額5ドル
ソースコードをカスタマイズしてパンくずリストを表示する方法
アウトプット
本記事で紹介する方法は、「TOPページ > ブログ一覧ページ > メインのタグで絞り込んだブログ一覧ページ > ブログ記事ページ」の順にパンくずリストを表示する方法になります。また、メインタグが設定されていない場合は、「TOPページ > ブログ一覧ページ > ブログ記事ページ」の順にパンくずリストを表示します。
スマホの場合は、長すぎるテキスト部分が「…（三点リーダー）」へ自動で変換されます。
今回紹介するサンプルコードは、パンくずリストを表示するだけで、パンくずリストの構造化データは含みません。構造化データに関しては、下記のページを参考にしてください。
参考：パンくずリスト（BreadcrumbList）の構造化データ｜Google 検索セントラル
※ Dawnテーマを対象にしたパンくずリストの表示方法になります。サンプルコードが正常に動かない場合もありますので、ご了承ください。
ステップ1．ブログ記事にメタフィールドを作成する
まず初めに、ブログ記事にパンくずリスト用のメタフィールドを作成します。
(1)Shopify管理画面より「設定 」をクリック
(2)カスタムデータ > ブログ記事の順に遷移
(3)「定義を追加する」をクリック
(4) 名前（任意の名称）とネームスペースキー（custom.main_tag）を入力
(5) 単一行のテキストを選択
(6)「保存」をクリック
ステップ2．ブログ記事にタグを設定する
次に、ブログ記事に「タグ」と「ステップ１で作成したメタフィールドの値」を設定します。
(1)Shopify管理画面 > ブログ記事の順に遷移
(2)タグを設定するブログ記事をクリックし詳細ページを開く
(3)タグセクションにて、タグを追記
(4)「保存」をクリック
(5)メタフィールドセクションの「すべて表示」をクリック
(6)ステップ1で作成したメタフィールドにメインのタグを入力
(7)「保存」をクリック
ステップ3．カスタムLiquidでパンくずリストを表示する
最後に、ブログ記事テンプレートにカスタムLiquidを利用して、パンくずリストを表示するコードを挿入します。
(1)オンラインストア > テーマの順にアクセス
(2)パンくずリストを表示したいShopifyテーマの「カスタマイズ」をクリック
(3)画面中央上部のセレクトボックスより「ブログ記事テンプレート」を選択
(4) プラスアイコン（または、セクションを追加する）をクリック
(5)カスタムLiquidを選択
(6)カスタマイズされたLiquidの入力フォーム内にサンプルコードを挿入
(7)「保存する」をクリック
サンプルコード
<nav aria-label="breadcrumbs" class="page-width page-width--narrow">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ routes.root_url }}">TOP</a></li>
<li class="breadcrumb-item"><a href="{{ blog.url }}">{{ blog.title }}</a></li>
{%- assign main_tag = article.metafields.custom.main_tag -%}
{%- unless main_tag == blank -%}
{%- capture url %}{{ blog.url }}/tagged/{{ main_tag | handle }}{% endcapture -%}
<li class="breadcrumb-item"><a href="{{ url }}">{{ main_tag }}</a></li>
{%- endunless -%}
<li class="breadcrumb-item">{{ article.title }}</li>
</ol>
</nav>
<style>
.page-width .breadcrumb {
list-style: none;
margin: 0;
padding: 8px 0;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
overflow-x: auto;
}
.page-width .breadcrumb a {
color: #3cb48c;
text-decoration: none;
}
.page-width .breadcrumb a:hover {
text-decoration: underline;
}
.page-width .breadcrumb-item {
display: inline;
color: #6c6c6c;
}
.page-width .breadcrumb-item + .breadcrumb-item:before {
content: ">";
padding: 0 8px;
color: #6c6c6c;
}
@media (max-width: 767px) {
.page-width .breadcrumb {
display: flex;
overflow-x: hidden;
}
.page-width .breadcrumb-item {
flex: 0 0 auto;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page-width .breadcrumb-item:last-child {
flex: 1;
max-width: none;
}
}
</style>
番外編. パンくずリストをカスタマイズする
パンくずリストの親階層を「TOP」以外の名称にしたい
サンプルコードの下記該当箇所の「TOP」の記載を好きな名称へ変更してください。
たとえば、ホームやサイトトップなど好きな名称に置き換えてください。
<li class="breadcrumb-item"><a href="{{ routes.root_url }}">TOP</a></li>
テキストリンクの色を変更したい
サンプルコードの下記該当箇所の「color」を好きな色へ変更してください。
.page-width .breadcrumb a {
color: #3cb48c;
text-decoration: none;
}
パンくずリストの上下余白を調整したい
カスタムLiquidを開き、セクションの余白の値を変更することで、余白調整が可能です。
パンくずリスト以外の内部リンク施策
目次
目次はブログ記事の「読みやすさの向上（利便性向上）」など様々なメリットがある内部リンク施策の１つです。下記の記事で目次のメリットを解説していますので、ご参考になさってください。
目次を入れるメリット｜Shopifyの目次作成アプリもご紹介
また、下記のページではShopifyストアに無料で目次生成してくれるShopifyアプリ「RuffRuff 目次作成」に関して紹介していますので、ご参考になさってください。
【日本初】Shopifyに目次を自動生成するアプリ「RuffRuff 目次作成」とは？
タグ一覧
タグ一覧は「情報を探しやすさ向上（利便性向上）」など様々なメリットがある内部リンク施策の１つです。下記の記事でタグ一覧のメリットを解説していますので、ご参考になさってください。
タグ一覧を入れるメリット｜Shopifyのタグ一覧アプリもご紹介
また、下記のページではShopifyストアに無料でタグ一覧を生成しくれるShopifyアプリ「RuffRuff タグ一覧」に関して紹介していますので、ご参考になさってください。
【無料】Shopifyサイトにタグ一覧を出すアプリ「RuffRuff タグ一覧」とは？
最後に
パンくずリストは、ユーザービリティの向上やSEO効果を期待できる便利な機能であり、Shopifyサイトの運営において重要な役割を果たします。本記事では、パンくずリストの導入方法として、Shopifyテーマやアプリの活用、さらにはカスタムLiquidを用いたカスタマイズ手順を紹介しました。それぞれの方法にはメリットとデメリットがあるため、自身のサイトに合った方法を選択することが大切です。
また、パンくずリスト以外にも目次やタグ一覧などの内部リンク施策を活用することで、さらにユーザー体験を向上させることができます。これらの施策を取り入れ、より魅力的なShopifyサイトを構築していきましょう。
最後に下記のブログ記事ではパンくずリスト以外にもブログ記事を拡張する方法を紹介しています。ご参考にしてください。
