SeachConsole パンくずリストのエラー「data-vocabulary.org スキーマのサポートは終了します」を改善

SeachConsoleのパンくずリストに表示されたエラー「data-vocabulary.org スキーマのサポートは終了します」は、itemtype属性にhttp://data-vocabulary.org/Breadcrumbを使用していることが原因です。最新の仕様に従ってhttps://schema.org/ListItemを使用すると解決します。

原因

itemtype属性にhttp://data-vocabulary.org/Breadcrumbを使用している。
http://data-vocabulary.org/Breadcrumbのサポートは2021年1月29日で終了しました。

例

<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="https://www.nowte.net" itemprop="url">
        <span itemprop="title">ホーム</span>
    </a>
</div>

解決方法

パンくずリストのテンプレートを参考にitemtype属性にhttps://schema.org/ListItemを使用します。

<ul class="breadcrumb" itemtype="https://schema.org/BreadcrumbList">
    <li class="breadcrumb-home" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="" itemprop="item"><span itemprop="name">ホーム</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="" itemprop="item"><span itemprop="name">カテゴリ</span></a>
        <meta itemprop="position" content="2" />
    </li>
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="" itemprop="item"><span itemprop="name">サブカテゴリ</span></a>
        <meta itemprop="position" content="3" />
    </li>
    <li class="breadcrumb-item">
        ページ
    </li>
</ul>

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選