【解説】パンくずリスト／構造化データの記述【microdata・JSON-LD】

記事内に広告を含みます

パソ君

・パンくずリストの構造化データの記述方法は？

こんな疑問にお答えします。

パンくずリストとは、Webサイト上の階層をわかりやすくするリスト。

「ホーム」＞「実績一覧」＞「実績詳細➀」とかのやつですね。

ただマークアップするときに、構造化データにしないと、Googleのロボットにたいして読み取らせることができません。

そのため構造化データにしたパンくずリストの記述方法を知っておくべし。

ジト

覚えておこう！

ということで、この記事では「パンくずリスト／構造化データの記述」について解説していきます！

この記事でわかること

・パンくずリスト／構造化データ【基本や種類】
・パンくずリスト／構造化データ【microdata】
・パンくずリスト／構造化データ【JSON-LD】
・パンくずリスト／構造化データ【チェック方法】

【解説】パンくずリスト／構造化データの記述【基本や種類】
【解説】パンくずリスト／構造化データの記述【microdata】
【解説】パンくずリスト／構造化データの記述【JSON-LD】
【解説】パンくずリスト／構造化データの記述【コードのチェック】
【解説】パンくずリスト／構造化データの記述【microdata・JSON-LD】：まとめ

【解説】パンくずリスト／構造化データの記述【基本や種類】

パンくずリストの構造化データの記述には、３種類あります。

それがこちら↓

Microdata（マイクロデータ）
RDFa（アールディーエフエー）
JSON-LD（ジェイソンエルディー）

今回はこのなかの「microdata」と「JSON-LD」について解説しますね。

「microdata」の特徴

シンプルで使いやすいのが「microdata」ですね。

HTMLで書ける
HTML５の構文
Googleの推奨でない（使用NGというわけではない）
Web上に表示される

「JSON-LD」の特徴

使い方を覚えれば便利なのが「JSON-LD」ですね。

JSON形式で記述する
データを1箇所にまとめれる
Googleが推奨してる
Web上に表示されない

構造化データの基本的なメモ

SEO効果が期待できる
設置場所はbodyタグ内
重複しないため片方使うのを推奨

ちなみにWordPressの場合は、プラグインを使えば簡単に実装できちゃいます。

下記記事をどうぞ↓

2023年3月20日【WordPress】Breadcrumb NavXTの使い方【パンくずリスト】

【解説】パンくずリスト／構造化データの記述【microdata】

まず「microdata」から紹介していきます。

例となるコードがこちら↓

<nav>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/">
                <span itemprop="name">ホーム</span>
            </a>
            <meta itemprop="position" content="1" />
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/achievements/">
                <span itemprop="name">実績</span>
            </a>
            <meta itemprop="position" content="2" />
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/achievements/introduction1/">
                <span itemprop="name">実績紹介➀</span>
            </a>
            <meta itemprop="position" content="3" />
        </li>
    </ol>
</nav>

「ホーム」＞「実績一覧」＞「実績詳細➀」を例としています。

初見だと難しく見えちゃいますよね。

ただ順番に見ていけばシンプルな作りです。

navタグでくくる
olタグとliタグに「itemscope」を記述
olタグに「itemtype」を記述
liタグに「itemprop」と「itemtype」を記述
aタグ＋その中のspanに「itemprop」を記述。
aタグ同階層下に「meta」タグを記述

1つずつ見ていきましょう。

➀：navタグでくくる

<nav>
    <!-- ここに中身が入ります -->
</nav>

絶対ではないのですが「nav」タグで囲むのがオススメ。

パンくずリストはナビゲーションにあたるらしく、navタグで囲んだ方がGoogle様に役割を伝えやすくなるかと。

➁：olタグとliタグに「itemscope」を記述

<nav>
    <ol itemscope>
        <li itemscope>
            <!-- 中身 -->
        </li>
        <li itemscope>
            <!-- 中身 -->
        </li>
        <li itemscope>
            <!-- 中身 -->
        </li>
    </ol>
</nav>

「itemscope」とは、アイテムの範囲という感じです。

つまり「itemscope」が書かれてる範囲の要素は、パンくずリストですよって伝えるということ。

これで構造化データの一部と定義できます。

※ただこの時点では範囲を伝えただけで、どんなパンくずリストの情報かはわかりません。
　そのため次の➂が必要になります。

➂：olタグに「itemtype」を記述

<nav>
    <ol itemscope  itemtype="https://schema.org/BreadcrumbList">
        <li itemscope>
            <!-- 中身 -->
        </li>
        <li itemscope>
            <!-- 中身 -->
        </li>
        <li itemscope>
            <!-- 中身 -->
        </li>
    </ol>
</nav>

「itemtype=”http://schema.org/BreadcrumbList”」というコードを、olタグに記述します。

アイテムの種類ってことですね。
現時点でアイテムの範囲（itemscope）＋アイテムの種類（itemtype）を記述したって感じです。

簡単に説明すると「このパンくずリストは、schema.org構造化データを用いている」という意味になります。

ウェブページ上でパンくずリストを表現するための規約やルールのセットと覚えておくのが良いかと。

➃：liタグに「itemprop」と「itemtype」を記述

<nav>
    <ol itemscope  itemtype="https://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <!-- 中身 -->
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <!-- 中身 -->
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <!-- 中身 -->
        </li>
    </ol>
</nav>

「itemprop=”itemListElement”」と「itemtype=”https://schema.org/ListItem”」を記述します。

itemtypeに関しては➂と同様、タイプを指定しています。

「itemprop」とは、アイテムのプロパティ（属性）を指定。

「itemprop=”itemListElement”」は「これはリストアイテムですよ」という情報を伝えている感じですね。

ジト

リストの一部ってことだね

➄：aタグ＋その中のspanに「itemprop」を記述。

<nav>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/">
                <span itemprop="name">ホーム</span>
            </a>
            <!-- 後ほどmetaタグが入ります -->
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/achievements/">
                <span itemprop="name">実績</span>
            </a>
            <!-- 後ほどmetaタグが入ります -->
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/achievements/introduction1/">
                <span itemprop="name">実績紹介➀</span>
            </a>
            <!-- 後ほどmetaタグが入ります -->
        </li>
    </ol>
</nav>

続いてaタグとその中のspanに対して「itemprop」を記述します。

意味としては下記。

「itemprop=”item”」⇒パンくずリストのアイテムだよ
「itemprop=”name”」⇒パンくずリストの名前だよ

hrefに対しては普通にリンク先を記述しましょう。

⑥：aタグ同階層下に「meta」タグを記述

<nav>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/">
                <span itemprop="name">ホーム</span>
            </a>
            <meta itemprop="position" content="1" />
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/achievements/">
                <span itemprop="name">実績</span>
            </a>
            <meta itemprop="position" content="2" />
        </li>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/achievements/introduction1/">
                <span itemprop="name">実績紹介➀</span>
            </a>
            <meta itemprop="position" content="3" />
        </li>
    </ol>
</nav>

最後にmetaタグをaタグと同階層の下に記述します。

コードとしては下記部分ですね↓

<meta itemprop="position" content="数字" />

これはパンくずリストの順番位置を伝えています。

1番目の項目なら1を記述。
2番目の項目なら2を記述。といった感じ。

これが「microdata」の解説となります。

初見は難しそうに見えますが、いがいとシンプルな作りになっていますよね。

【解説】パンくずリスト／構造化データの記述【JSON-LD】

次に「JSON-LD」を紹介していきます。

例となるコードがこちら↓

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "item": {
                    "@id": "https://example.com/",
                    "name": "ホーム"
                }
            },
            {
                "@type": "ListItem",
                "position": 2,
                "item": {
                    "@id": "https://example.com/achievements/",
                    "name": "実績"
                }
            },
            {
                "@type": "ListItem",
                "position": 3,
                "item": {
                    "@id": "https://example.com/achievements/introduction1/",
                    "name": "実績紹介➀"
                }
            }
        ]
    }
</script>

「ホーム」＞「実績一覧」＞「実績詳細➀」を例としています。

初見だと難しく見えちゃいますよね。

ただこちらも順番に見ていけばシンプルな作りです。

scriptタグでくくる
「@context」と「@type」を記述
「itemListElement」を記述
「itemListElement」の中に値を書く

1つずつ見ていき

➀：scriptタグでくくる

<script type="application/ld+json">
    //ここに中身が入る
</script>

まずscriptタグで囲みます

typeに「application/ld+json」を記述。

➁：「@context」と「@type」を記述

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
    }
</script>

上記のように宣言文を記述。

➂：「itemListElement」を記述

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [

        ]
    }
</script>

次に「itemListElement」を記述。

この中に値を書いていきます。

➃：「itemListElement」の中に値を書く

{
    "@type": "ListItem",
    "position": 1,
    "item": {
        "@id": "https://example.com/",
        "name": "ホーム"
    }
},

type	「ListItem」を記述
position	パンくずリストの階層順番
id	ページURL
name	ページ名

上記の値を書いていきます。

【解説】パンくずリスト／構造化データの記述【コードのチェック】

最後に記述したコードが正しく構造化できているかの、チェックをしましょう。

できていないとGoogle様が認識してくれませんので。。チェック大事！

チェックするツールを開く

構造化データテストツール

「コードスニペット」を選択

コードを貼り付けて「テストを実行」

記述した構造化データのコードをコピペして、テストを実行ボタンをクリックしましょう。

「エラーなし」「警告なし」ならOK

エラーなし、警告なしと出ていればOKです。

【解説】パンくずリスト／構造化データの記述【microdata・JSON-LD】：まとめ

3種類ある
microdataはHTML形式
JSON-LDはjson形式

ジト

構造化データのパンくずリストを作る際は試してみてね！