Shopifyストアで活用できる、「商品タイプページ」と「商品詳細ページ」設置用のシンプルなパンくずリスト(Breadcrumb)作成方法について考察してみました。
ECサイトのパンくずリスト（Breadcrumb Navigation）は、ユーザーが現在のページの位置を簡単に把握し、効率的にサイト内を移動できるようにするための重要なナビゲーション要素です。
単にユーザーだけではなく、検索エンジンがクローリングしやすくなるため、SEO(検索エンジン最適化)にも役立つと評されます。
このパンくずリスト、「こうであるべき！」という絶対的なルールはないものの、「王道」として紹介される設計とコードを見てみると少し難しい‥「有料アプリ」という選択肢もありますが、出費は抑えたい‥その思いでシンプルなパンくずリストを作成する事になりました。
今回の記事では、自分の備忘録を兼ねてシンプルなパンくずリスト作成を共有したいと思います。
こんなイメージ
今回パンくずリストを実装するのは「商品タイプページ」と「商品詳細ページ」になり、ストアサイト全体に使用できる汎用パンくずリストではありません。
パンくずリストのイメージとしては、
①商品タイプページ：トップページ(リンク付き) > 商品タイプページ(現在のページ)
②商品詳細ページ：トップページ(リンク付き) > 商品タイプページ(リンク付き) > 商品詳細ページ(現在のページ)
になります。
階層順でいうと、最上位に位置づけするのが「トップページ」その次が「商品タイプページ」最後に「商品詳細ページ」という順になります。
なぜ、商品タイプ？
以前の記事、【Shopify小技】商品タイプが一致する商品の「売れ筋ランキング」を作成でも解説しましたが、「商品タイプ」は「1商品＝１カテゴリー」しか定義ができない仕様になっているため、(個人的な偏見かもしれません)コレクションやタグよりは、商品の最上位分類に適しているのかと思います。
ただ、商品タイプは、コレクションやタグのように、直接一覧を表示する専用のページがありません。
そのため、ページとコレクションを用いて「商品タイプ一覧ページ」を作成する必要があります。
商品タイプ一覧ページを作成
商品タイプ一覧ページの作成については、以下のページにまとめています。（※本記事で説明する内容を理解するためにはご一読くいただく必要があります）
【Shopify小技】「商品タイプ」の一覧ページを作成してみた
（上記の記事でご確認いただけると思いますが）商品タイプ一覧ページのURLハンドルは、日本語の「商品タイプ名」になります。その理由は、以下のパンくずリストのサンプルコードでおわかりいただけると思います。
パンくずリスト
では、さっそくパンくずリストのサンプルコード(セクション)を見てみましょう。
上述したように、商品一覧ページと商品ページに設置する、至ってシンプルなコードです。
商品タイプ一覧ページ用
ビジュアル(テーマエディタ)で、「商品一覧ページ」専用のページテンプレートを開き、追加します。
{% schema %}
{
"name": "商品一覧パンぐずリスト",
"presets": [
{
"name": "商品一覧パンぐずリスト",
"category": "商品一覧パンぐずリスト"
}
]
}
{% endschema %}
<ol>
<li><a href="/">TOP</a></li>
<li>{{ page.matefields.product.type }}</li> //ページエディタで「商品タイプ名」を入力したメタフィールド
</ol>商品ページ用
ビジュアル(テーマエディタ)で、「商品ページ」を開き、追加します。
{% schema %}
{
"name": "商品パンぐずリスト",
"presets": [
{
"name": "商品パンぐずリスト",
"category": "商品パンぐずリスト"
}
]
}
{% endschema %}
<ol>
<li><a href="/">TOP</a></li>
<li><a href="/pages/product-type-{{ product.type }}">{{ product.type }}</a></li>
<li>{{ product.title }}</li>
</ol>このように、URLハンドルを日本語の「商品タイプ名」にしておくと、商品タイプ(ページ)リンクURLとリンクテキスト、どちらも使用できる利点があります。
構造化データマークアップ
では、Schema.orgのマークアップを施し、よりSEO親和性のあるパンくずリストにしてみたいと思います。
{% schema %}
{
"name": "商品一覧パンぐずリスト",
"presets": [
{
"name": "商品一覧パンぐずリスト",
"category": "商品一覧パンぐずリスト"
}
]
}
{% endschema %}
<ol>
<li><a href="/">TOP</a></li>
<li>{{ page.matefields.product.type }}</li> //ページエディタで「商品タイプ名」を入力したメタフィールド
</ol>{% schema %}
{
"name": "商品一覧パンぐずリスト",
"presets": [
{
"name": "商品一覧パンぐずリスト",
"category": "商品一覧パンぐずリスト"
}
]
}
{% endschema %}
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/" itemprop="item"><span itemprop="name">TOP</span></a><meta itemprop="position" content="1" /></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="name">{{ page.matefields.product.type }}</span><meta itemprop="position" content="2" /></li> //ページエディタで「商品タイプ名」を入力したメタフィールド
</ol>{% schema %}
{
"name": "商品パンぐずリスト",
"presets": [
{
"name": "商品パンぐずリスト",
"category": "商品パンぐずリスト"
}
]
}
{% endschema %}
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/" itemprop="item"><span itemprop="name">TOP</span></a><meta itemprop="position" content="1" /></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/pages/product-type-{{ product.type }}" itemprop="item"><span itemprop="name">{{ product.type }}</span></a><meta itemprop="position" content="2" /></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="name">{{ product.title }}</span><meta itemprop="position" content="3" /></li>
</ol>これらのコードに登場するitemscopeとitemtypeは、Schema.orgマークアップを使用するために必要な属性であり、ページの内容を検索エンジンに理解させる役割を果たします。
以上、Shopifyストアで活用できるシンプルなパンくずリスト作成方法でした。使用範囲が制限的はありますが、ぜひご参考・活用いただけると幸いです。
