【makeshop】パンくずに構造化マークアップを導入してナビゲーションとSEOを強化しよう！

パンくずリストとは？

パンくずリスト（Breadcrumbs）は、ユーザーがウェブサイト内で自分の位置を把握しやすくするためのナビゲーションツールです。通常、ページの上部に配置され、階層構造を視覚的に示します。これにより、ユーザーは簡単に前のページや上位のカテゴリに戻ることができます。

構造化マークアップの利点

パンくずリストに構造化マークアップを導入することで、以下の利点が得られます。

1. SEOの向上: 検索エンジンは構造化データを使用してページの内容を理解しやすくなり、検索結果での表示が改善されます。
2. リッチスニペット: パンくずリストが検索結果に表示されることで、ユーザーのクリック率が向上します。
3. ユーザーエクスペリエンスの向上: 明確なナビゲーションにより、ユーザーがサイト内を移動しやすくなります。

ソースコード

<ul vocab="https://schema.org/" typeof="BreadcrumbList">
    <li property="itemListElement" typeof="ListItem">
        <a href="<{$url.top}>" typeof="WebPage" property="item">
            <span property="name">ホーム</span>
        </a>
        <meta property="position" content="1"/>
    </li>
    <{if $page.type == 'category'}>
    <!-- 商品カテゴリ -->
        <{section name=i loop=$category.breadcrumb_list.list}>
            <li property="itemListElement" typeof="ListItem">
            <{if !$category.breadcrumb_list.list[i].is_current}>
                <a href="<{$category.breadcrumb_list.list[i].url}>" typeof="WebPage" property="item">
                    <span property="name">
                        <{$category.breadcrumb_list.list[i].name}>
                    </span>
                </a>
            <{else}>
                <span property="item" typeof="WebPage">
                    <span property="name"><{$category.breadcrumb_list.list[i].name}></span>
                </span>
            <{/if}>
                <meta property="position" content="2">
            </li>
        <{/section}>
        <{elseif $page.type == 'search'}>
    <!-- 商品を検索する -->
    <{if $search.keyword != ''}>
        <li property="itemListElement" typeof="ListItem">
            <span typeof="WebPage" property="item">
                <span property="name">検索結果「<{$search.keyword}>」</span>
            </span>
        <meta property="position" content="2" />
        </li>
    <{else}>
        <li property="itemListElement" typeof="ListItem">
            <span typeof="WebPage" property="item">
                <span property="name" class="text q_bredcrumb_text">商品を検索する</span>
            </span>
            <meta property="position" content="2"/>
        </li>
    <{/if}>
    <{elseif $page.type == 'item'}>
    <!-- 商品詳細 -->
        <{section name=i loop=$item.breadcrumb_list_group.list}>
            <{section name=j loop=$item.breadcrumb_list_group.list[i].list}>
            <li property="itemListElement" typeof="ListItem">
                <a href="<{$item.breadcrumb_list_group.list[i].list[j].url}>" typeof="WebPage" property="item">
                    <span property="name">
                        <{$item.breadcrumb_list_group.list[i].list[j].name}>
                    </span>
                </a>
                <meta property="position" content="2"/>
            </li>
        <{/section}>
            <li property="itemListElement" typeof="ListItem">
                <span typeof="WebPage" property="item">
                    <span property="name"><{$item.name}></span>
                </span>
                <meta property="position" content="3"/>
            </li>
        <{/section}>
    <{elseif $page.type == 'cart'}>
    <!-- ショッピングカート -->
    <li property="itemListElement" typeof="ListItem">
        <span typeof="WebPage" property="item">
            <span property="name">ショッピングカート</span>
        </span>
    <meta property="position" content="2"/>
    </li>
    <{elseif $page.type == 'review-list'}>
    <!-- レビュー一覧 -->
    <li property="itemListElement" typeof="ListItem">
        <span typeof="WebPage" property="item">
            <span property="name">レビュー一覧</span>
        </span>
    <meta property="position" content="2"/>
    </li>
    <{elseif $page.type == 'review-post'}>
    <!-- レビュー投稿 -->
    <li property="itemListElement" typeof="ListItem">
        <span typeof="WebPage" property="item">
            <span property="name">レビュー投稿</span>
        </span>
    <meta property="position" content="2"/>
    </li>
    <{elseif $page.type == 'news-list'}>
    <!-- お知らせ -->
    <li property="itemListElement" typeof="ListItem">
        <span typeof="WebPage" property="item">
            <span property="name">お知らせ</span>
        </span>
    <meta property="position" content="2" />
    </li>
    <{elseif $page.type == 'news-detail'}>
    <!-- お知らせ詳細 -->
    <li property="itemListElement" typeof="ListItem">
        <a href="<{$url.news}>" typeof="WebPage" property="item">お知らせ一覧</a>
        <meta property="position" content="2"/>
    </li>
    <li property="itemListElement" typeof="ListItem">
        <span typeof="WebPage" property="item">
            <span property="name"><{$news.title}></span>
        </span>
    <meta property="position" content="3"/>
    </li>
    <{elseif $page.type == 'guide'}>
    <!-- ご利用ガイド -->
    <li property="itemListElement" typeof="ListItem">
        <span typeof="WebPage" property="item">
            <span property="name">ご利用ガイド</span>
        </span>
    <meta property="position" content="2" />
    </li>
    <{elseif $page.type == 'company'}>
    <!-- 会社概要 -->
    <li property="itemListElement" typeof="ListItem">
        <span typeof="WebPage" property="item">
            <span property="name">会社概要</span>
        </span>
    <meta property="position" content="2" />
    </li>
    <{elseif $page.type == 'contract'}>
    <!-- 特定商取引法 -->
    <li property="itemListElement" typeof="ListItem">
        <span typeof="WebPage" property="item">
            <span property="name">特定商取引法</span>
        </span>
    <meta property="position"content="2" />
    </li>
    <{elseif $page.type == 'policy'}>
    <!-- プライバシーポリシー -->
    <li property="itemListElement" typeof="ListItem">
        <span typeof="WebPage" property="item">
            <span property="name">プライバシーポリシー</span>
        </span>
    <meta property="position" content="2" />
    </li>
    <{/if}>
</ul>

パンクズリストが設置できたら

導入後は必ずリッチリザルトテストでチェックをしましょう。

まとめ

構造化マークアップをMakeShopのパンくずリストに導入することで、SEOの向上とユーザーエクスペリエンスの改善が期待できます。正確な実装と定期的なテストを行うことで、オンラインショップのパフォーマンスを最大限に引き出すことができます。