Clipkitでパンくずリストの構造化データを修正する

Google Search Consoleで「data-vocabulary.org schema deprecated」という警告が出た際の修正方法です。

# 「data-vocabulary.org schema deprecated」について
「data-vocabulary.org schema deprecated」は
「data-vocabulary.org というスキーマは推奨されていません」という意味です。

Google Search Consoleの仕様変更があり、data-vocabulary.orgが構造化データの対象外になったため、警告が出るようになりました。

「schema.org」へ切り替えずともページとしては問題なく表示されますが、検索結果でパンくずリストが出なくなるなど、表示に影響がでる可能性があるため、対応されることをおすすめします。

# 修正方法
修正箇所は、テーマにより変わるため、ご利用中のテーマをご確認ください。
ここでは「default」「carosello」「dropdown」テーマを例に説明します。
下記の流れで進み、該当箇所を修正してください。1～3までは全テーマ共通の流れとなります。

※テーマの編集前にバックアップを取ることをおすすめします。
　下記手順 3 の画面の「ダウンロード」から現行テーマのダウンロードが可能です。

1. 「マイページ」から「サイト管理」へ進み、「テーマ」をクリック

2. 使用しているテーマ（下図のような青枠が表示されているもの）を選択
![使用しているテーマ（下図のような青枠が表示されているもの）を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397446/17f39635-077d-e8ac-8557-f8227e98c918.png)

3. 右上の「テンプレート」をクリック
![右上の「テンプレート」をクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397446/3c52fac4-72f9-b86c-cef5-07603393ce2d.png)

4. 画面遷移後、該当のテンプレートを選択
　default　→　PC：全体レイアウト　SP：記述なし
　carosello　→　PC：全体レイアウト　SP：全体レイアウト
　dropdown　→　PC：記述なし　SP：全体レイアウト（スマホ向け）

5. 下記記述を修正
※HTMLタグやclassなどはご利用中のテーマに合わせて適宜調整してください。

###【default】

```html:「全体レイアウト」編集前
<div class="header-breadcrumb hidden-xs">
  <div class="container">
    <ul class="breadcrumb">
      {% for element in controller.breadcrumbs %}
        <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
          <a itemprop="url" href="{{ element[0] }}">
            <span itemprop="title">
              {% if element[0] == site.path %}
                <i class="fa fa-lg">&#xf015;</i><span class="sr-only">{{ site.title }}</span>
              {% else %}
                {{ element[1] }}
              {% endif %}
            </span>
          </a>
        </li>
      {% endfor %}
      <li><strong>{{ page_title }}</strong></li>
    </ul>
  </div>
</div>
```

```html:「全体レイアウト」編集後
<div class="header-breadcrumb hidden-xs">
  <div class="container">
    <ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
      {% assign count == 1 %}
      {% for element in controller.breadcrumbs %}
      	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          <a itemprop="item" href="{{ element[0] }}">
	    {% if element[0] == site.path %}
	      <span itemprop="name">
	        <meta itemprop="position" content="{{ forloop.index }}" />
	          <i class="fa fa-lg">&#xf015;</i><span class="sr-only">{{ site.title }}</span>
	      </span>
	    {% else %}
	      <span itemprop="name">
	        <meta itemprop="position" content="{{ forloop.index }}" />{{ element[1] }}
	      </span>
	    {% endif %}
	  </a>
	</li>
	{% assign count = count | plus: 1 %}
      {% endfor %}
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <strong itemprop="name">
          <meta itemprop="position" content="{{ count | plus: 1 }}" />{{ page_title }}
        </strong>
      </li>
    </ul>
  </div>
</div>
```

###【carosello】

```html:「全体レイアウト」編集前
<!--breadcrumb-->
<div id="breadcrumb">
  <div class="container">
    <ul>
      {% for element in controller.breadcrumbs %}
        <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
          <a itemprop="url" href="{{ element[0] }}">
            <span itemprop="title">
              {% if element[0] == site.path %}
                HOME
                <span class="sr-only">{{ site.title }}</span>
              {% else %}
                {{ element[1] }}
              {% endif %}
            </span>
          </a>
        </li>
      {% endfor %}

      {% if request.path == "/" %}
        <li><strong>HOME</strong></li>
      {% else %}
        <li><strong>{{ page_title }}</strong></li>              
      {% endif %}
     </ul>
  </div>
</div>
```

```html:「全体レイアウト」編集後
<!--breadcrumb-->
<div id="breadcrumb">
  <div class="container">
    <ul itemscope itemtype="http://schema.org/BreadcrumbList">
      {% assign count == 1 %}
      {% for element in controller.breadcrumbs %}
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
          <a itemprop="item" href="{{ element[0] }}">
            {% if element[0] == site.path %}
              <span itemprop="name">
                <meta itemprop="position" content="{{ forloop.index }}" />HOME
                <span class="sr-only">{{ site.title }}</span>
              </span>
            {% else %}
              <span itemprop="name">
                <meta itemprop="position" content="{{ forloop.index }}" />{{ element[1] }}
              </span>
            {% endif %}
          </a>
        </li>
        {% assign count = count | plus: 1 %}
      {% endfor %}

      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="{{ request.url }}">
          <span itemprop="name">
            <meta itemprop="position" content="{{ count | plus: 1 }}" />{{ page_title }}
          </span>
        </a>
      </li>
    </ul>
  </div>
</div>
```

###【dropdown】

```html:「全体レイアウト（スマホ向け）」編集前
<ul class="breadcrumb">
  {{ controller.render_breadcrumbs }}
</ul>
```

```html:「全体レイアウト（スマホ向け）」編集後
<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  {% assign count == 1 %}
  {% for element in controller.breadcrumbs %}
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="{{ element[0] }}">
        {% if element[0] == site.path %}
          <span itemprop="name">
            <meta itemprop="position" content="{{ forloop.index }}" />
            <i class="fa fa-lg">&#xf015;</i><span class="sr-only">Home</span>
          </span>
        {% else %}
          <span itemprop="name">
            <meta itemprop="position" content="{{ forloop.index }}" />{{ element[1] }}
          </span>
        {% endif %}
      </a>
    </li>
    {% assign count = count | plus: 1 %}
  {% endfor %}
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <strong class="breadcrumb-title" itemprop="name">
      <meta itemprop="position" content="{{ count | plus: 1 }}" />{{ page_title }}
    </strong>
  </li>
</ul>
```

6．右上の「保存する」をクリックしてテンプレートを保存する

スマートフォン用のテンプレートも上記手順で修正・保存してください。
「テンプレート名（スマホ向け）」がスマートフォン用のテンプレートです。