Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@n_tajima

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

More than 1 year has passed since last update.

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. 使用しているテーマ(下図のような青枠が表示されているもの)を選択
    使用しているテーマ(下図のような青枠が表示されているもの)を選択

  3. 右上の「テンプレート」をクリック
    右上の「テンプレート」をクリック

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

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

【default】

「全体レイアウト」編集前
<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>
「全体レイアウト」編集後
<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】

「全体レイアウト」編集前
<!--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>
「全体レイアウト」編集後
<!--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】

「全体レイアウト(スマホ向け)」編集前
<ul class="breadcrumb">
  {{ controller.render_breadcrumbs }}
</ul>
「全体レイアウト(スマホ向け)」編集後
<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.右上の「保存する」をクリックしてテンプレートを保存する

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ragru
Webメディア構築CMS「Clipkit(クリップキット)」を開発。コンテンツマーケティングのご相談から、システム構築、運用までサポート。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?