• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

SEO対策にも有効な構造化データマークアップ【パンくずリスト編】

JSON-LDで構造化データマークアップを表したイメージ

SEO対策にも効果がある構造化データマークアップについて、
Googleが推奨するJSON-LDを使ったパンくずリストの実装方法をご紹介します。

一般的なブログかつTOPページからカテゴリ、その下にある記事ページという3段階の階層構造の例になります。
ご自身のサイトにあわせて調整してみてください。

実際のコード

<script type="application/ld+json">
{
    "@context": "https://schema.org/",
    "@type": "BreadcrumbList",
    "@id": "ここにブログ記事のURL/#breadcrumb",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@type": "Blog",
                "@id": "ここにブログTOPページのURL",
                "url": "ここにブログTOPページのURL",
                "name": "ここにブログの名前"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@type": "Blog",
                "@id": "ここにブログ記事のカテゴリページのURL",
                "url": "ここにブログ記事のカテゴリページのURL",
                "name": "ここにカテゴリ名"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@type": "Blog",
                "@id": "ここにブログ記事のURL",
                "url": "ここにブログ記事のURL",
                "name": "ここにブログ記事のタイトル"
            }
        }
    ]
}
</script>

なお、WordPressを利用しているサイトの場合は、
以下のように記述すれば出力されます。

<?php 
  $category = get_the_category();
  $cat_name = $category[0]->category_nicename;
?>
<script type="application/ld+json">
{
    "@context": "https://schema.org/",
    "@type": "BreadcrumbList",
    "@id": "<?php the_permalink(); ?>#breadcrumb",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@type": "Blog",
                "@id": "<?php echo esc_url( home_url( '/' ) ); ?>",
                "url": "<?php echo esc_url( home_url( '/' ) ); ?>",
                "name": "SNIPPET"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@type": "Blog",
                "@id": "<?php echo esc_url( home_url( '/' ) ) . "category/" . $cat_name; ?>",
                "url": "<?php echo esc_url( home_url( '/' ) ) . "category/" . $cat_name; ?>",
                "name": "<?php echo $cat_name; ?>"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "@type": "Blog",
                "@id": "<?php the_permalink(); ?>",
                "url": "<?php the_permalink(); ?>",
                "name": "<?php the_title(); ?>"
            }
        }
    ]
}
</script>

実装についての補足と解説

JSON-LDとは

詳しい解説はほかサイトでも多数なされていますので割愛しますが、
JSON-LDとは構造化データマークアップの記法のひとつです。

scheme.orgとは

インターネットやWEBサイトなどのオンライン上で、構造化されたデータのためのスキーマを作成し、
維持し、普及させることを使命とする共同のコミュニティ活動、団体になります。

構造化データマークアップの中身は、scheme.orgボキャブラリー(用語、意味、語彙)から選択します。

構造化データマークアップによる効果

構造化データマークアップは検索エンジンに対しページの内容や構造を理解を促す手助けをします。

また、今回のパンくずリストの場合は、記述した内容に準じて、
検索結果にも表示されます(リッチスニペット)。

表示するかどうか、表示内容についてはGoogleに保証されたものではないので、
あくまでも表示されるための準備でしかない点はご注意ください。

JSON-LDでの構造化データマークアップを記述する位置

JSON-LDによる構造化データマークアップをHTMLのどこに記述するかという点について、
結論としてはどこに記述しても問題ないです。

headタグ内で記述することが一般的ではありますが、どこに記述しても認識はされますので、
ご自身のサイトにあわせて適切な位置に記述してください。

最後に

検索結果への特別な表示(リッチスニペット)、検索エンジンの理解への手助けなど、
SEOにおいても構造化データマークアップの重要性は日に日に高まっています。

またパンくずリストの設置は、そもそもサイトを訪れるユーザーにとっても
現在位置がわかりやすくサイト内の導線として重要です。

構造化データマークアップの導入編として、まずはこのパンくずリストを利用してみてくださいね。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND