Breadcrumbs

マークアップ

パンくずは、そのページがサイト階層内のどこに位置するかを示します。

  <nav class="breadcrumbs" aria-label="パンくず">

パンくずはナビゲーションになりますから、<nav>で囲みます。そのnav要素のaria-label属性値にパンくずと指定し、このナビゲーションがパンくずであることを伝えます。

  <nav class="breadcrumbs" aria-label="パンくず">
    <ol class="breadcrumbs__list" itemscope itemtype="http://schema.org/BreadcrumbList">
      <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a class="breadcrumbs__link" itemprop="item" href="/ja">
          <span class="breadcrumbs__label" itemprop="name">
            Home
          </span>
        </a>
        <meta itemprop="position" content="1">
      </li>

各ページへのリンクは順を付けて並ぶので、順番を表す<ol>と<li>を使います。microdataを使用して構造化データマークアップをしています。

<a class="breadcrumbs__link" itemprop="item" aria-current="page" href="/ja/markups/like-button">
  <span class="breadcrumbs__label" itemprop="name">
    いいねボタン
  </span>
</a>
<meta itemprop="position" content="2">

現在地のリンクには、aria-current="page"が付与されます。 CSSで見た目を調整する場合は、.breadcrumbs__link[aria-current="page"] { ... }というセレクタで見た目を調整してください。

microdataを使用した構造化データマークアップ

パンくずの階層構造を示すためにmicrodataを使用します。

microdataという方式でマークアップすることで、Googleなどのクローラーがページの内容を解析しやすくなります。そうすることで、検索エンジンにリッチスニペットを表示することができます。

パンくずリストのmicrodataを使用した記述方法については、パンくずリスト | 検索 | Google Developersで解説されていますので参考にしてください。

microdataを使用したマークアップでは、itemscope itemtype itempropの属性と値を適切に付与する必要があります。さらに、各リンクの、パンくずにおける位置を示すためにmeta要素を使います。meta要素は、itemprop属性がある場合はフローコンテンツおよび記述コンテンツになるため、head要素内でなくても問題ありません。

正しく構造化されているかは構造化データテストツールで確認することができます。

NuxtでWeb Componentsを使う方法

このコンポーネントはWeb Componentsとして作られています。NuxtでWeb Componentsを使用するには少し工夫が必要です。

nuxt.config.jsに追記する

まずnuxt.config.jsで、head内にCDNからJSを読み込む必要があります。

  head: {
    script: [
      { src: "https://unpkg.com/@markupcodes/[email protected]/src/markup-breadcrumbs.js?module", type: "module" }
    ]
  }

plugins/webcomponents.jsを作成する

次に、plugins/webcomponents.jsを作成し、次の内容を記述します。これを記述するとmarkup-から始まるタグが、Nuxt（Vue）のコンポーネントからは除外されるようになります。

// this works in `!process.browser` exclusively,
// since LitElement use window and DOM interface.

import Vue from 'vue'
Vue.config.ignoredElements = [/^markup-/]

これらを準備した状態で、各.vueで<markup-breadcrumbs>の要素を使うことができます。

Nuxtでの使用例

このサイトでもこのコンポーネントを利用しています。<markup-breadcrumbs>要素を扱いやすくするために、Breadcrumbコンポーネントを作っています。 下記の、実装例を参考にして、自陣のプロジェクトに組み込んでみてください。

<!-- components/Breadcrumb.vue -->
<template>
  <markup-breadcrumbs class="mc-Breadcrumb" label="パンくず" :breadcrumbs="breadcrumbsString" />
</template>
<script>
export default {
  name: 'Breadcrumb',
  props: {
    breadcrumbs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    breadcrumbsString() {
      return JSON.stringify(this.breadcrumbs)
    }
  }
}
</script>

<!-- pages/about/index.vue -->
<template>
  <Breadcrumb
    :breadcrumbs="[
      {
        label: 'Home',
        url: localePath('index')
      },
      {
        label: $t('about.title'),
        url: $route.path,
        current: true
      }
    ]"
  />
</template>

<script>
import Breadcrumb from '~/components/Breadcrumb.vue'

export default {
  components: { Breadcrumb },

  head() {
    return {
      title: this.$i18n.t('about.title')
    }
  }
}
</script>