パンくずリストの最適な作り方｜SEOに強い構造化データ対応

この記事では、WordPressで投稿ページ・固定ページ・カテゴリーページごとに自動でパンくずリストを生成し、SEOに強いサイト構造を作る方法を解説します。テーマごとのデザイン調整や簡易プラグインでの代用方法も紹介します。

1 実装のポイント

• WordPress の関数 get_the_category() や get_post_ancestors() を利用
• 構造化データ（Schema.org）を意識して検索エンジンに正しく認識させる
• テーマによって CSS を調整して、見た目を統一する

2 functions.php にコードを追加

このコードは、投稿ページ・固定ページ・カテゴリーページで、パンくずリスト用の構造化データ（JSON-LD）を自動出力するPHPコードです。

//-------------------------------------------
// パンくずリストを生成する関数
//-------------------------------------------
function add_breadcrumb_jsonld() {

    // トップ・ブログ一覧では出力しない
    if ( is_front_page() || is_home() ) {
        return;
    }

    $items = array();
    $position = 1;

    // ホーム
    $items[] = array(
        '@type' => 'ListItem',
        'position' => $position++,
        'item' => array(
            '@id'  => home_url('/'),
            'name' => 'ホーム',
        ),
    );

    // 投稿ページ
    if ( is_single() ) {

        $categories = get_the_category();
        if ( ! empty( $categories ) ) {
            $cat = $categories[0];

            // 親カテゴリ対応
            $parents = array_reverse( get_ancestors( $cat->term_id, 'category' ) );
            foreach ( $parents as $parent_id ) {
                $parent = get_term( $parent_id, 'category' );
                if ( $parent && ! is_wp_error( $parent ) ) {
                    $items[] = array(
                        '@type' => 'ListItem',
                        'position' => $position++,
                        'item' => array(
                            '@id'  => get_category_link( $parent->term_id ),
                            'name' => $parent->name,
                        ),
                    );
                }
            }

            $items[] = array(
                '@type' => 'ListItem',
                'position' => $position++,
                'item' => array(
                    '@id'  => get_category_link( $cat->term_id ),
                    'name' => $cat->name,
                ),
            );
        }

        $items[] = array(
            '@type' => 'ListItem',
            'position' => $position++,
            'item' => array(
                '@id'  => get_permalink(),
                'name' => get_the_title(),
            ),
        );

    // 固定ページ
    } elseif ( is_page() ) {

        global $post;

        if ( $post && $post->post_parent ) {
            $parents = array_reverse( get_post_ancestors( $post->ID ) );

            foreach ( $parents as $parent_id ) {
                $items[] = array(
                    '@type' => 'ListItem',
                    'position' => $position++,
                    'item' => array(
                        '@id'  => get_permalink( $parent_id ),
                        'name' => get_the_title( $parent_id ),
                    ),
                );
            }
        }

        $items[] = array(
            '@type' => 'ListItem',
            'position' => $position++,
            'item' => array(
                '@id'  => get_permalink(),
                'name' => get_the_title(),
            ),
        );

    // カテゴリーページ
    } elseif ( is_category() ) {

        $category = get_queried_object();
        $parents = array_reverse( get_ancestors( $category->term_id, 'category' ) );

        foreach ( $parents as $parent_id ) {
            $parent = get_term( $parent_id, 'category' );
            if ( $parent && ! is_wp_error( $parent ) ) {
                $items[] = array(
                    '@type' => 'ListItem',
                    'position' => $position++,
                    'item' => array(
                        '@id'  => get_category_link( $parent->term_id ),
                        'name' => $parent->name,
                    ),
                );
            }
        }

        $items[] = array(
            '@type' => 'ListItem',
            'position' => $position++,
            'item' => array(
                '@id'  => get_category_link( $category->term_id ),
                'name' => $category->name,
            ),
        );

    } else {
        return;
    }

    $json_ld = array(
        '@context' => 'https://schema.org',
        '@type'    => 'BreadcrumbList',
        'itemListElement' => $items,
    );

    echo '<script type="application/ld+json">'
        . wp_json_encode( $json_ld, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES )
        . '</script>';
}
add_action( 'wp_head', 'add_breadcrumb_jsonld' );
    

3 汎用CSS

/* -------------------------
 * パンくずリスト（Breadcrumb）
 * ------------------------- */

.breadcrumb {
    font-size: 0.9em;       /* 文字サイズを少し小さめに */
    margin-bottom: 1em;     /* 下に余白を追加 */
}

.breadcrumb a {
    text-decoration: none;  /* リンクの下線を消す */
    color: #007acc;         /* リンクの文字色を青に */
}

.breadcrumb a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}
    

4 完成イメージ

5 代用プラグイン

自動生成や構造化データ付きで簡単に導入したい場合は以下のプラグインがおすすめです。

• ▶ Breadcrumb NavXT
• ▶ Yoast SEO（パンくず機能あり）

6 まとめ

パンくずリストを自動生成することで、SEOに有利な内部リンク構造を作れます。テーマや表示方法に合わせて CSS を調整したり、必要に応じてプラグインを活用するとさらに便利です。PHP で生成すれば、軽量で管理も簡単です。