Shopifyでオンラインストアを運営する上で、ユーザビリティとSEOの観点から重要な要素の一つがパンくずリストです。パンくずリストは、ユーザーが現在サイト内のどこにいるかを示し、簡単に前のページに戻れるようにする便利な機能です。本記事では、Shopifyのブログ記事にパンくずリストを表示する方法を、ステップバイステップで解説します。
パンくずリストとは
パンくずリストはお客様が今どこにいるのかを示す道しるべのようなものです。例えば、「ホーム > 婦人服 > ドレス > 夏物」というように、現在の位置をわかりやすく表示します。これは、まるでお店の中で「婦人服売り場のドレスコーナーにある夏物コーナー」にいるようなものです。
このナビゲーション機能は、お客様がサイト内を迷わずに移動できるようサポートします。例えば、ドレスのページから婦人服全体のカテゴリーに戻りたい場合、パンくずリストの「婦人服」をクリックするだけで簡単に移動できます。
また、パンくずリストは検索エンジンにもサイトの構造を理解しやすくさせるため、SEO（検索エンジン最適化）の観点からも有益です。これにより、あなたのShopifyストアが検索結果で上位に表示される可能性が高まります。
下記のブログ記事ではパンくずリストのメリットやおすすめアプリを紹介しています。ご参考にしてください。
Shopifyでパンくずリストを出すメリット｜Shopifyアプリも紹介
ブログ記事にパンくずリストを表示する方法
アウトプット
本記事で紹介する方法は、「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ストアにも導入してみてください。
最後に下記のブログ記事では、パンくずリスト以外にもブログ記事のカスタマイズする方法を紹介しています。ご参考にしてください。
