構造化マークアップに対応したパンくずリストを設置するチュートリアル

はじめに パンくずリストの実装方法はShopifyの公式でも紹介されておりますし、多くのサイトでも紹介されていますが、パンくずリストの「構造化マークアップ」については少ないと思います。 「構造化データ」自体は最新のShopify2.0対応テーマにはほとんど実装されていますが、「パンくずリスト」に対応しているものは今のところ見たことはありません。 構造化データをショップに実装することで、よりユーザーの興味をひく検索結果を表示できるようになり、クリック率が向上すると言われています。 つまり、サイトの回遊性の為だけでなく、検索結果にもパンくずリストをつけてSEOを良くするカスタマイズ方法ということす。 本カスタマイズは、Shopifyの公式でも紹介されているコードをベースにご紹介していきます。 Breadcrumb navigation | Shopify Liquid code examples アセットファイルを作成 「新しいアセットを追加する」より「breadcrumb.css」を作成し、以下のCSSをコピペします。 .breadcrumbs { width: 100%; } .breadcrumbs__list { display: flex; align-items: center; flex-wrap: nowrap; gap: .5em; list-style: none; line-height: 1.4; padding: 1.5rem 0 1.5rem 1.5rem; margin: 0; overflow-x: scroll; } .breadcrumbs__list::after { content: ""; display: inline-block; width: 1.5rem; padding-right: 1.5rem; } .breadcrumbs__item { display: inline-block; } .breadcrumbs__item:not(:last-child)::after { content: ""; display: inline-block; width: .5em; height: 1em; background: linear-gradient(to top left, transparent calc(50% - .5px), #ccc calc(50% - .5px), calc(50% + .5px), transparent calc(50% + .5px)) 0 0 / 100% 100% no-repeat; } .breadcrumbs__link { text-decoration: none; } @media (min-width: 750px) { .breadcrumbs__list { padding: 1.5rem; } .breadcrumbs__list::after { content: none; } } 公式のスタイルをDawn用に若干修正していますので、ご利用テーマに合わせて編集してください。 ポイントだけ簡単に説明していきます。 横スクロール 13行目の「overflow-x: scroll;」を追加しました。パンくずリストがモバイル時にはみ出した場合、領域を「横スクロール」させるためです。 横スクロール以外にも「改行」や「省略」等の方法も考えられますが、スクリーンリーダーを使用しているユーザーを考慮し、アクセシビリティの観点から横スクロールが最も最適だと考えられます。 また、横スクロール時に右側のパディングが効かなくなるので、疑似属性（.breadcrumbs__list::after）でスペースを設けてあります。 セパレーター 24行目からの「.breadcrumb-item:not(:last-child)::after」はリストアイテムの区切りです。スラッシュを採用していますが、デザインに合わせて設定してください。 「content: "/";」とすれば手っ取り早いですが、疑似属性のテキストもスクリーンリーダーの読み上げ対象となるため、アクセシビリティの観点から「linear-gradient」で描画しています。 テキストカラー 上記スタイルでは定義していませんが、こちらもアクセシビリティの観点から濃色が推奨されています。 カレントページのテキストを薄いグレーでデザインしているサイトも多いですが、アクセシビリティ評価が下がりますので、リンクカラーも同様にWCAG（Webコンテンツアクセシビリティガイドライン）で推奨されるコントラスト比で設定してください。 WebAIM: Contrast Checker 言語ファイルを編集 「ロケール」より「en.default.json」を開き、以下のJSONデータを挿入します。 "breadcrumb": { "label": "Breadcrumb", "home": "Home" }, 本カスタマイズはDawnテーマベースで構築しており「general」下に配置しておりますので、{{ general.breadcrumb.labal | t }}で「Breadcrumb」と出力されます。 他テーマの場合は構造に合わせて配置し、後のLiquidコードの編集を忘れないでください。 続けて「ja.json」を開き、同じ位置に以下のJSONデータを挿入します。 "breadcrumb": { "label": "パンくずリスト", "home": "ホーム" }, ちなみに「ホーム」は、日本では「トップ」や「トップページ」と表記することが多いですが、メインページとページ上部の扱いが被っていますし、完全に和製英語なので「ホーム」を推奨しています。 国際 日本 サイト全体 ウェブサイト、ウェブページ ホームページ メインページ ホームページ、ホーム トップページ、トップ ページ上部 ページ上部、トップ ページトップ、トップ マルチリンガルサイトの場合は、サイトの言語に合わせて他のファイルを編集するか、管理画面のコンテンツ編集画面で追加してください。 スニペットファイルを作成 「新しいスニペットファイルを追加」より「breadcrumb.liquid」を作成し、以下のコードをコピペしてください。 {%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%} {{ 'breadcrumb.css' | asset_url | stylesheet_tag }} {%- assign t = template | split: '.' | first -%} {{ 'general.breadcrumb.home' | t | link_to: routes.root_url, class: 'breadcrumbs__link' }} {%- case t -%} {%- when 'page' -%} {{ page.title }} {%- when 'product' -%} {%- if collection.url -%} {{ collection.title | link_to: collection.url, class: 'breadcrumbs__link' }} {%- endif -%} {{ product.title }} {%- when 'collection' and collection.handle -%} {%- if current_tags -%} {{ collection.title | link_to: collection.url, class: 'breadcrumbs__link' }} {{ current_tags | join: ' + ' }} {%- else -%} {{ collection.title }} {%- endif -%} {%- when 'blog' -%} {%- if current_tags -%} {{ blog.title | link_to: blog.url, class: 'breadcrumbs__link' }} {{ current_tags | join: ' + ' }} {%- else -%} {{ blog.title }} {%- endif -%} {%- when 'article' -%} {{ blog.title | link_to: blog.url, class: 'breadcrumbs__link' }} {{ article.title }} {%- else -%} {{ page_title }} {%- endcase -%} { "@context": "http://schema.org", "@type": "BreadcrumbList", "name": "{{ 'general.breadcrumb.label' | t }}", "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "{{ shop.url }}", "@type": "ListItem", "name": "{{ 'general.breadcrumb.home' | t }}" } }, {%- case t -%} {%- when 'page' -%} { "@type": "ListItem", "position": 2, "item": { "@id": "{{ page.url }}", "@type": "ListItem", "name": "{{ page.title }}" } } {%- when 'product' -%} {%- if collection.url -%} { "@type": "ListItem", "position": 2, "item": { "@id": "{{ collection.url }}", "@type": "ListItem", "name": "{{ collection.title }}" } }, { "@type": "ListItem", "position": 3, "item": { "@id": "{{ product.url }}", "@type": "ListItem", "name": "{{ product.title }}" } } {%- else -%} { "@type": "ListItem", "position": 2, "item": { "@id": "{{ product.url }}", "@type": "ListItem", "name": "{{ product.title }}" } } {%- endif -%} {%- when 'collection' and collection.handle -%} { "@type": "ListItem", "position": 2, "item": { "@id": "{{ collection.url }}", "@type": "ListItem", "name": "{{ collection.title }}" } } {%- if current_tags -%} {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+" }}{%- endcapture -%} ,{ "@type": "ListItem", "position": 3, "item": { "@id": "{{ tag_url }}", "@type": "ListItem", "name": "{{ current_tags | join: " + " }}" } } {%- endif -%} {%- when 'blog' -%} { "@type": "ListItem", "position": 2, "item": { "@id": "{{ blog.url }}", "@type": "ListItem", "name": "{{ blog.title }}" } } {%- if current_tags -%} {%- capture tag_url -%}{{ blog.url }}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%} ,{ "@type": "ListItem", "position": 3, "item": { "@id": "{{ tag_url }}", "@type": "ListItem", "name": "{{ current_tags | join: " + " }}" } } {%- endif -%} {%- when 'article' -%} { "@type": "ListItem", "position": 2, "item": { "@id": "{{ blog.url }}", "@type": "ListItem", "name": "{{ blog.title }}" } }, { "@type": "ListItem", "position": 3, "item": { "@id": "{{ article.url }}", "@type": "ListItem", "name": "{{ article.title }}" } } {%- else -%} { "@type": "ListItem", "position": 2, "item": { "@id": "{{ request.path }}", "@type": "ListItem", "name": "{{ page_title }}" } } {%- endcase -%} ] } {%- endunless -%} 構造は公式のコードをベースにカスタマイズしておりますので、順にご説明いたします。 HTML + Liquid 1行目のunless分岐は、パンくずを表示させないテンプレートです。サイトデザインに合わせて編集してください。 2行目で最初に作成したCSSファイルを読み込みます。公式は で記述してありますが、個人的にはファイル化した方が管理も編集も楽なのでこの設計にしてあります。 3行目はテンプレートファイル名を「t」として定義しています。テンプレートファイルが「page.contact.json」だった場合、「.」で分割し最初の要素である「page」のみが出力される設計です。 4〜8行目は タグに対し「role="navigation"」と「aria-label="パンくずリスト"」属性を追加しアクセシビリティに考慮しています。 9行目は タグには同じくアクセシビリティ対策でリスト項目のコンテナであることを示す「role="list"」属性を追加してあります。また、パンくずリストに使用するリスト要素は タグが推奨されています。 要素は、リスト項目の順序が明確に決まっている場合に使用します。パンくずリストは、サイト内の階層関係を示すものであるため、順序が重要です。そのため、 要素でマークアップすることで、ユーザーがパンくずリストの意味を正しく理解しやすくなります。 10行目などリストアイテムの タグにはリスト項目であることを識別させる「role="listitem"」属性を追加してあります。 他、カレントリンクの タグは不要なので、現在のページを指す「aria-current="page"」属性を付与した タグに変えてあります。 JSON-LD 構造化マークアップには「JSON-LD」を採用しています。 他にも「RDFa」や「microdata」などHTMLに直接マークアップする方法もありますが、JSON-LDに比べて記述量が多く、人間にとって読みにくい場合があります。また、Googleの検索エンジンはmicrodataを完全に理解していないため、SEOの観点からもJSON-LDが推奨されています。 68〜208行目が構造化マークアップにあたりますが、HTMLと同様の分岐で出力しています。 ただし、アクセシビリティを考慮したHTMLのパンくずリストとは別の用途なので、必ずしも同じ構造じゃないといけない訳ではありません。 サンプルはShopifyの構造に基づいて出力していますが、例えば商品ページの場合は「ホーム/コレクション/商品タイプ/商品ページ」としても、アクセシビリティやJSONの書き方さえ気をつければ、回遊性やSEO的にプラスはあってもマイナスは無いと考えます。 編集する場合はListItemの「position」の数値とカンマだけ気を付けてください。 テーマファイルを編集 「レイアウト」より「theme.liquid」を開き、ヘッダー下あたりに以下のコードを追記してください。 {% render 'breadcrumb' %} 以上で、テーマ編集は終わりです。実装後はHTMLの出力確認と、構造化マークアップのテストをお忘れなく！ リッチリザルトテスト

カートにアイテムが追加されました

構造化マークアップに対応したパンくずリストを設置するチュートリアル

パンくずリストを構造化マークアップに対応させて、SEO強化を図るカスタマイズ。

2024年4月

2024年5月