Shopify！パンくずリストでSEOアップ！ECサイト集客を増やすテクニック
パンくずリストってご存知ですか？
パンくずリストを設置するだけでShopifyのSEOに効果があるため、必ずと言っていい程やった方がいいECサイトの施策の１つです。
今回のブログでは「パンくずリストって何？」「どんな効果があるの？」「どうやってShopifyに設置するの？」というお悩みを解決いたします。
PCとスマホ（SP）どちらも対応していますのでご安心ください。
ShopifyのSEOに効果がある「パンくずリスト」って何？
パンくずリストというのはWebサイトやECサイトの下層ページに遷移した際に画面上部に表示される下記のようなテキストが並んでいるものをパンくずリストと言います。
パンくずリストはパンくずとも呼ばれます。
…パンのくず？
そうなんです。英語でもbreadcrumbsと呼ばれるようにパンのくずのことです。
パンくずとは？由来を紹介
パンくずというのはヘンゼルとグレーテルの童話に由来しています。
物語の中で兄妹が家に帰るためにパンをちぎってパンのくずを道にまいていくシーンがあります。
今自分がいる場所を軸に、家に帰るためのその仕組みを、Web業界ではパンくずリストと呼ぶようになりました。
TOPページから下層ページへ画面が遷移することで、自分が現在どこにいるのか不明になるケースがあります。それを防ぐための仕組みです。
パンくずはGoogleに評価されるの？
Googleは1つのShopifyのECサイトで、複数のページを管理しています。
小規模サイトでは、数十ページを管理し、大規模サイトでは数千ページを管理。たくさんのページを管理しています。そのために、Googleはきちんとパンくずを使って分かりやすく管理されているかどうかを高く評価します。結果、パンくずリストをしっかりと作っているShopifyのECサイトを検索上位に表示させます。
ただし、どんな書き方でも上位表示ができるということではありません。
Googleのための書き方、伝え方があります。
私たち福岡ECサイトが上位表示できるためのやり方をお伝えしますので最後まで読んでいただけたら幸いです。
ShopifyのECサイトで、ブログ記事や商品ページにパンくずリストを追加する方法
追加する方法を説明する前に２つほど注意点があります。必ず注意点を読んでから進んでください。
そして、この追加方法はPCとスマホ（SP）どちらも対応していますのでご安心ください。
❶. htmlとcssの操作に関して
パンくずリストを操作する場合、テーマの中やhtmlやcssを操作する必要があります。
この作業は自己責任となりますので、サイトが崩れたとしてもご自身で修正する必要があります。ご了承ください。もし、操作が不安であったり、難しく自分たちで操作できないと判断された際は福岡ECサイトにぜひご依頼ください。
ここで利用するhtml、cssのコードはShopifyが提供しているものを利用します。福岡ECサイトが独自に作るものではありませんのでご安心ください。
❷. Shopifyのテーマに関して
Shopifyのテーマはriseを利用しています。
rise以外のdawnなどの無料テーマでも基本的に可能ですが、このブログ内で表記している場所や段数などに差分が出ますのでご了承ください。
①パンくずリストを格納するファイルをShopifyのテーマの中に作る
Shopifyの管理画面、左サイドバーにある販売チャネルの下の「オンラインストア」を選択するとメニューがその下に表示されます。そのメニューの中から「テーマ」を選択してください。
画面が切り替わったら現在利用しているテーマが表示されています。
その右側にある「カスタマイズ」のボタンのすぐ左に「…」のメニューがあります。
「…」を選択すると「コードを編集」のメニューが表示されるので選択してください。
画面が切り替わると下記のような画面になっていると思います。
もし操作中の画面が表示されている場合は、タブの「×」を押すことで閉じることができます。
左サイドバーにある「snippet（スニペット）」というフォルダを選択してください。
左サイドバーを下にスクロールすると英語で「snippet」と表記されているフォルダのマークがあります。
その中にある「＋新しいスニペットを追加する」のボタンを選択してください。
新しいスニペットを追加すると下記のようなイメージになります。
そのテキスト入力エリアのファイル名に「breadcrumbs」と入力してください。
すると現在入力している画面上部に「breadcrumbs.liquid」と表示されます。
②パンくずリストのhtmlとcssのコードを入力
htmlとcssというコードを使いShopifyのECサイト上にパンくずを表示させます。
Shopifyが提供しているパンクズのhtmlとcssのコードがあります。
それを利用しShopifyのECサイト上にパンくずを表示させます。
URL：https://shopify.github.io/liquid-code-examples/example/breadcrumb-navigation
また、下記に上記のShopify公式サイトから抽出したデータをそのまま抽出していますので、下記を利用していただいてもかまいません。
<style>
.breadcrumbs {
margin: 0 0 2em;
}
.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
}
.breadcrumbs__item {
display: inline-block;
}
.breadcrumbs__item:not(:last-child):after {
border-style: solid;
border-width: .10em .10em 0 0;
content: '';
display: inline-block;
height: .20em;
margin: 0 .20em;
position: relative;
transform: rotate(45deg);
vertical-align: middle;
width: .20em;
}
.breadcrumbs__link {
text-decoration: underline;
}
.breadcrumbs__link[aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}
.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
text-decoration: underline;
}
</style>
{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}
<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="/">Home</a>
</li>
{%- case t -%}
{%- when 'page' -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
</li>
{%- when 'product' -%}
{%- if collection.url -%}
<li class="breadcrumbs__item">
{{ collection.title | link_to: collection.url }}
</li>
{%- endif -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
</li>
{%- when 'collection' and collection.handle -%}
{%- if current_tags -%}
<li class="breadcrumbs__item">
{{ collection.title | link_to: collection.url }}
</li>
<li class="breadcrumbs__item">
{%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
</li>
{%- endif -%}
{%- when 'blog' -%}
{%- if current_tags -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
{%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
</li>
{%- endif -%}
{%- when 'article' -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
</li>
{%- endcase -%}
</ol>
</nav>
{%- endunless -%}このコードの中にhtmlとcssが両方書かれています。このコードをコピーしたら先ほど①で作成した「breadcrums.liquid」に貼り付けてください。
＜貼り付ける際の注意点＞
コピーしたらそのまま「breadcrums.liquid」に貼り付けてください。メモ帳やテキストなどに一度貼り付けることはNGです。
一度別の場所に貼り付けてしまうと、リッチテキストという書体に変わる可能性があります。リッチテキストになった時点で崩れる原因となりますのでご注意ください。
③Googleに評価されるようにパンくずの仕組みを変更
貼り付けたbreadcrums.liquidの中のコードを編集したものを下記に再度表記します。
こちらを入れ替えることで完了しますが、入れ替えが怖い方は編集せずに④に進んでもらってかまいません。
ここで編集を行うことでGoogleの評価が高まり、より検索結果でより上位に表示されるようになります。
このコードは福岡ECサイトが作ってもので、Shopifyの公式が発信しているコードではありません。何らかの原因で崩れても保証は致しかねます。そして検索結果の上位表示の保証もしておりませんのでご自身の責任の範囲でご利用ください。
また、他のブログなどでの商用利用は一度福岡ECサイトへご連絡ください。
また、操作が不安であったり、難しく自分たちで操作できないと判断された際は福岡ECサイトにぜひご依頼ください。
<style>
.breadcrumbs {
margin: 0 0 2em;
}
.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
}
.breadcrumbs__item {
display: inline-block;
}
.breadcrumbs__item:not(:last-child):after {
border-style: solid;
border-width: .10em .10em 0 0;
content: '';
display: inline-block;
height: .20em;
margin: 0 .20em;
position: relative;
transform: rotate(45deg);
vertical-align: middle;
width: .20em;
}
.breadcrumbs__link {
text-decoration: underline;
}
.breadcrumbs__link[aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}
.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
text-decoration: underline;
}
</style>
{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}
<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
<ol class="breadcrumbs__list" itemscope="" itemtype="http://schema.org/BreadcrumbList">
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" class="breadcrumbs__link" href="/">Home</a>
</li>
{%- case t -%}
{%- when 'page' -%}
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
</li>
{%- when 'product' -%}
{%- if collection.url -%}
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
{{ collection.title | link_to: collection.url }}
</li>
{%- endif -%}
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
</li>
{%- when 'collection' and collection.handle -%}
{%- if current_tags -%}
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
{{ collection.title | link_to: collection.url }}
</li>
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
{%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
</li>
{%- endif -%}
{%- when 'blog' -%}
{%- if current_tags -%}
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
{%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
<a itemprop="item" class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
</li>
{%- endif -%}
{%- when 'article' -%}
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
</li>
{%- endcase -%}
</ol>
</nav>
{%- endunless -%}④breadcrumbsで作ったコードをShopifyのECサイト上の任意の場所で表示
①②で作ったファイルを今からテーマに挿入し実際のECサイト上で表示させます。
下記のコードを入力することでパンくずを表示することができます。
{% render 'breadcrumbs' %}
入力する場所を今からお伝えします。
コードの操作をするため事前にバックアップをとることをおすすめします。
①と同じように「コードの編集」を選択してください。
左サイドバーの中に「レイアウト」というフォルダがあります。
その中にあるtheme.liquidというファイルを選択してください。
右側に表示されたコンテンツの中にコードがたくさん書かれていると思います。
その左側に1〜順に数字が縦に並んでいます。
その数字の313行目まで下にスクロールしてください。
そこに{{ content_for_layout }}というテキストが表示されています。
その真上に先ほど説明した下記のコードを入力します。
そのために、一つ上の<main id=“MainContent” class=“content-for-layout focus-none” role=“mail” tabindex=“-1”>というコードの後ろで改行を入力して１行開けてください。
1行空いたらその空いた空欄に下記のコードをコピペで入力してください。
{% render 'breadcrumbs' %}
その後右上の「保存」のボタンを選択し、保存してください。
次に、実際のECサイトの画面に表示されているか確認するため、右上にある「ストアをプレビュー」のボタンを選択してください。
そしてECサイトが表示されたら、ECサイト画面上部のメニューにあるcatalogを選択してください。
すると画面の左上にパンくずが表示されているはずです。
もちろん商品詳細ページや他のページに遷移しても表示されています。
これでパンくずの表示が完了になります。
けど、画面の左に寄りすぎだなー…
と感じた方はこの次の章で動かし方を説明します。気にならない方はそのまま完了してください。
ズレていてもSEO効果は変わらないのでご安心ください。
Shopifyでパンくずの表示場所や余白を調整する方法
やり方を２つ紹介します。①は少しだけ難しく、②は簡単です。両方をやる必要はなくどちらか片方だけの対応で完了となります。
①枠の中にパンくずを揃えるやり方
パンくずを入れただけではズレが生じるため、気になる方もいらっしゃると思います。この赤枠の中に綺麗に揃えるやり方を説明いたします。
もう一度、breadcrumbs.liquidのファイルを開きます。
そこの48行目の＜nav class=”breadcrumbs” role=”navigation” aria-label=”breadcrumbs”＞と一番下にある108行目の＜/nav＞を下記の2つのコードで囲みます。
まずは48行目と108行目のnavの場所を下記に記します。
この２つのnavを下記のタグで囲みます。そのために、上の48行目のnavのすぐ上に<div class=”page-width”>を入れ、下の108行目のnavのすぐ下に</div>を入れます。
divのコピーは下記から１つずつ行なってください。
<div class="page-width">
</div>48行目の１つ上の47行目が空欄だったのでそこに<div class=”page-width”>を入れました。もし空欄がない場合は1行改行しコードを入れてください。
108行目のnavの下には{%- endunless -%}このコードが入っていたので1行改行しそこに</div>を入れました。
入力が終わったら右上の「保存」ボタンを選択し保存してください。
実際の画面で確認すると下記のように表示されています。
上下の隙間が気になる場合の調整方法
同じliquidファイルのbreadcrumbs.liquidの一番上に記載されている2行目〜4行目。
ここに書かれているmargin: 0 0 2em;をmargin: 2em 0 0 0;に変更すると調整が可能です。
2emの後ろの0は3つになっているので注意してください。
margin: ;の中の数値を「2em 0 0 0」と入力してもらって構いません。もしくは下記のコードをコピーで入れ替えてください。必ず「2em 0 0 0」の前後に「:」「;」が入っていることを確認してください。
margin: 2em 0 0 0;
margin: 2em 0 0 0;に変更後保存し、実際のECサイトの画面を表示すると下記のように変わっていることが確認取れます。修正されていない場合、キャッシュというものが残っている場合があります。ページ自体を更新すると修正後が表示されますので、修正が反映されていない場合はECサイトの画面の方を更新してみてください。
もちろんスマホでもしっかりと表示されていますのでご安心ください。
これでパンくずの調整は完了となります。①の枠の中に入れるやり方で完了した方は②の調整に進む必要はありません。
②枠の中に入れずに左から少しずらしたり余白を調整するやり方
①の枠の中に入れるやり方の続きではないので注意してください。
breadcrums.liquidのファイルの2行目〜4行目にある.breadcrumbsというコードを変更します。
このコードの中にあるmargin: 0 0 2em;をmargin: 2em 0 0 2em;と変更するだけで完了です。
0 0 2emの前に2emを追加するだけです。
直接2emを追加してもらって構いませんが、コピーが必要な方は下記をコピーして入れ替えてください。
margin: 2em 0 0 2em;
保存しECサイトの画面を表示すると下記のように表示されます。
スマホでもしっかりと見えていますのでご安心ください。
以上がShopifyでパンくずリストを使ってSEO効果をアップする方法になります。
福岡ECサイトではパンくず以外にも様々な手法でShopifyサイトをサポートすることができます。
制作や集客でお困りの方は一度福岡ECサイトにご相談ください。
