2021.03.14

パンくずリストの作り方｜構造化データで検索力アップ！

前回、パンくずリストの作成と表示に取り組んでみました。今回は、構造化データーを用いたパンくずリストの作成に取り組みます。

前回のパンくずリストをページに表示させただけでは、実はGoogle側はパンくずリストがあるとは認識してくれません。

サーチコンソールの[パンくずリスト]で、パンくずリストのあるページ数が表示されるのですが、前回のパンくずリストを表示させただけでは、何も変わらず、0件のままでした。

きちんと、パンくずリストがあることをGoogleに示す必要があります。そこで必要なのが、「構造化データ」です。

パンくずリストに構造化データは必要？

Googleでは、こんなふうに記載されています：

“Google 検索では、ページのコンテンツを理解するよう取り組んでいます。ページに構造化データを含めて、ページの内容についての明白な判断材料を提供すると、Google でそのページをより正確に理解できるようになります”−Google検索セントラル

なんだかよくわかりにくいですが、要は、Googleにそのページをより正確に理解してもらうために必要なデータだ、ということです。つまり、閲覧者のためではないということです。

それで、閲覧者からみて見えないデータを、ホームページに貼り付ける、ということのようです。そして、そのデータの作り方にはいくつか、決まりがあります。

構造化データ「JSON-LD」で記述してみる

今回は、Googleが推奨しているJSON-LDで、構造化データを作成してみたいと思います。これはJavascriptで記述します。

詳細な文法はここでは省略しますが、例えば、「ホーム > カテゴリ名 > カテゴリ内」という階層の記事だと、このような形になります。

<script type="application/ld+json">
    {
        "@context":"http://schema.org",
        "@type":"BreadcrumbList",
        "itemListElement":
        [
            {
                "@type" : "ListItem", 
                "position" :"1",
                "item" : {
                    "@id" :"https://iyyoto.jp/category/",
                    "name" : "カテゴリ名"
                }
            },
            {
                "@type" : "ListItem", 
                "position" :"2",
                "item" : {
                    "@id" :"https://iyyoto.jp/category/article",
                    "name" : "カテゴリ内の記事"
                }
            }
        ]
    }
</script>

これをページ内のどこでも良いので、出力してやる必要があります。繰り返しになりますが、これは閲覧者から見えない情報になりますので、パンくずリストを見せるためには、別途、前回の方法やプラグインを用いる必要があります。もっとも、プラグインなら、この構造化データの方も作成してくれるほうが多いようです。

ただ、今回はパンくずリストを自作していますので、構造化データも自作することにします。

パンくずリストの構造化データを出力する

前回の、表示されるパンくずリストのコード内で、一緒に構造化データを作成することにしました。

$breadcrumbs = '<script type="application/ld+json">
{
    "@context":"http://schema.org",
    "@type":"BreadcrumbList",
    "itemListElement":
    [';
$breadcrumbs_id_list = array(); /*ページのリンク*/
$breadcrumbs_name_list = array(); /*ページのタイトル*/
$index_of_position = 2; /*そのページの階層*/

if(is_front_page()){
    /*何もしない*/
}
else{
    /*カテゴリ・投稿・タグページ*/
    if(is_category() || is_single() || is_tag()){
        $cat = null;
        $cat_list = array();
        
        /*投稿ページの処理*/
        if(is_single())
        {
            $cat = get_the_category();
            if(isset($cat[0] -> cat_ID)){
                /*現在のページのリンクとタイトルを取得*/
                array_unshift($breadcrumbs_id_list, get_the_permalink());
                array_unshift($breadcrumbs_name_list, get_the_title());
                /*そのページが属すカテゴリーのリンクとタイトルも取得*/
                $cat_id = $cat[0] -> cat_ID;
                $cat = $cat[0]; 
                $cat_link = get_category_link($cat_id);
                array_unshift($breadcrumbs_id_list, $cat_link);
                array_unshift($breadcrumbs_name_list, $cat -> name);
            }
        }

        /*カテゴリーページの処理*/
        if(is_category()){
            $cat = get_queried_object();
            array_unshift($breadcrumbs_id_list, get_the_permalink());
            array_unshift($breadcrumbs_name_list, $cat -> name);
        }

        /*タグページの処理*/
        if(is_tag()){
            $cat = get_queried_object();
            array_unshift($breadcrumbs_id_list, get_the_permalink());
            array_unshift($breadcrumbs_name_list, $cat -> name);
        }

        /*祖先ノードをたどる処理*/
        while($cat -> parent != 0){     

            $cat_id = $cat -> parent;
            $cat = get_category($cat_id);
            $cat_link = get_category_link($cat_id);

            /*たどるごとに、リンクとタイトルと取得*/

            array_unshift($breadcrumbs_id_list, $cat_link);
            array_unshift($breadcrumbs_name_list, $cat -> name);
            
            $index_of_position++;
        }
    }
    /*固定ページの場合*/
    elseif(is_page()){
        $ances_list = array();
        $ances_id_list = array_reverse(get_post_ancestors($post -> ID));
        /*現在のページのタイトルとリンクを取得*/
        array_unshift($breadcrumbs_id_list, get_the_permalink());
        array_unshift($breadcrumbs_name_list, get_the_title());
        foreach($ances_id_list as $ances_id){
            /*祖先ノードをたどり、それぞれのタイトルとリンクを取得*/
            array_unshift($breadcrumbs_id_list, get_page_link($ances_id));
            array_unshift($breadcrumbs_name_list, get_page($ances_id) -> post_title);
            $index_of_position++;
        }
    }
    
    /*上記で取得したデータを元に、構造化データを作成する*/
    for($i = 0; $i < count($breadcrumbs_id_list); $i++){
        $breadcrumbs .=
            '
                {
                    "@type" : "ListItem", 
                    "position" :"' . strval($i + 1) . '",
                    "item" : {
                        "@id" :"' . $breadcrumbs_id_list[$i] . '",
                        "name" : "' . $breadcrumbs_name_list[$i] . '"
                    }
            ';
            if($i < count($breadcrumbs_id_list) - 1){
                $breadcrumbs .= '},';
            }
            else{
                $breadcrumbs .= '}';
            }
    }
    $breadcrumbs .=
    ']
        }
    </script>';
    
    /*構造化データの書き出し*/
    echo $breadcrumbs;
}

パンくずリストの作り方の全体のコード

ちょっと長い処理ですが、基本的には、前回のパンくずリストのように、そのページの親や先祖をたどり、それを構造化データに直しして出力するという方法です。

この構造化データを出力するコードは、前回のパンくずリストと同じルーチンを使っていますので、合体させて、パンくずリストが完成します。これをヘッダーのコード（Wordpressならheader.php）のあたりに貼り付ければ、パンくずリストが表示され、構造化データも出力されるようになります。

echo '<div class="header-breadcrumb-wrap">';
echo '<div class="header-breadcrumb-inner">';
echo '<ul>';
$sep = ' | ';

$breadcrumbs = '<script type="application/ld+json">
{
    "@context":"http://schema.org",
    "@type":"BreadcrumbList",
    "itemListElement":
    [';
$breadcrumbs_id_list = array();
$breadcrumbs_name_list = array();
$index_of_position = 2;

if(is_front_page()){
    echo '';
    echo '</ul>';
    echo '</div>';
    echo '</div>';
}
else{
    echo '<li><a href="' . get_bloginfo('url'). '">ホーム</a></li>';
    if(is_category() || is_single() || is_tag()){
        $cat = null;
        $cat_list = array();

        if(is_single())
        {
            $cat = get_the_category();
            if(isset($cat[0] -> cat_ID)){
                array_unshift($cat_list, $sep . '<li>' . get_the_title() . '</li>');
                array_unshift($breadcrumbs_id_list, get_the_permalink());
                array_unshift($breadcrumbs_name_list, get_the_title());

                $cat_id = $cat[0] -> cat_ID;
                $cat = $cat[0]; 
                $cat_link = get_category_link($cat_id);
                array_unshift($cat_list, $sep . '<li><a href="' . $cat_link . '">' . $cat -> name. '</a></li>');
                array_unshift($breadcrumbs_id_list, $cat_link);
                array_unshift($breadcrumbs_name_list, $cat -> name);
            }
        }
        if(is_category()){
            $cat = get_queried_object();
            array_unshift($cat_list, $sep . '<li>' . $cat -> name . '</li>');
            array_unshift($breadcrumbs_id_list, get_the_permalink());
            array_unshift($breadcrumbs_name_list, $cat -> name);
        }
        if(is_tag()){
            $cat = get_queried_object();
            array_unshift($cat_list, $sep . '<li>' . $cat -> name . '</li>');
            array_unshift($breadcrumbs_id_list, get_the_permalink());
            array_unshift($breadcrumbs_name_list, $cat -> name);
        }

        while($cat -> parent != 0){     
            $cat_id = $cat -> parent;
            $cat = get_category($cat_id);
            $cat_link = get_category_link($cat_id);
            array_unshift($cat_list, $sep . '<li><a href="' . $cat_link . '">' . $cat -> name. '</a></li>');
            array_unshift($breadcrumbs_id_list, $cat_link);
            array_unshift($breadcrumbs_name_list, $cat -> name);

            $index_of_position++;
        }
        foreach($cat_list as $value){
            echo $value;
        }
    }
    elseif(is_page()){
        $post_this_title = $sep . '<li>' . get_the_title() .' </li>';
        $ances_list = array();
        $ances_id_list = array_reverse(get_post_ancestors($post -> ID));
        array_unshift($breadcrumbs_id_list, get_the_permalink());
        array_unshift($breadcrumbs_name_list, get_the_title());
        foreach($ances_id_list as $ances_id){
            echo $sep . '<li><a href="' . get_page_link($ances_id) . '">'. get_page($ances_id) -> post_title .'</a></li>';
            array_unshift($breadcrumbs_id_list, get_page_link($ances_id));
            array_unshift($breadcrumbs_name_list, get_page($ances_id) -> post_title);
            $index_of_position++;
        }
        echo $post_this_title;
    }
    echo '</ul>';
    echo '</div>';
    echo '</div>';

    
    for($i = 0; $i < count($breadcrumbs_id_list); $i++){
        $breadcrumbs .=
            '
                {
                    "@type" : "ListItem", 
                    "position" :"' . strval($i + 1) . '",
                    "item" : {
                        "@id" :"' . $breadcrumbs_id_list[$i] . '",
                        "name" : "' . $breadcrumbs_name_list[$i] . '"
                    }
            ';
            if($i < count($breadcrumbs_id_list) - 1){
                $breadcrumbs .= '},';
            }
            else{
                $breadcrumbs .= '}';
            }
    }
    $breadcrumbs .=
    ']
        }
    </script>';
    echo $breadcrumbs;
}

ちなみに、まだまだ、完璧なコードではありませんので、ぜひ、ご自身で発展させてみてください。

これを登録して、しばらくすると、パンくずリストがサーチコンソールに認識されるようになりました。ちゃんと認識されているかすぐ調べたいなら、リッチリザルトテストで、「パンくずリスト」として認識しているかをすぐに確認できますよ。

ぜひ、表示されるパンくずリストだけでなく、構造化データの方のパンくずリストもしっかり実装し、Googleからの高い評価をもらいたいものですね。

では、今回も文字ばかりになってしまいましたが、よかったら参考になさってください。

気になっているのはアメブロにもパンくずリストを作れるか、ということです。アメブロ自体、そんな構造化されたものではないので、置けるか、ちょっと疑問ですが、何か分かりましたら、また、書かせてください。

ありがとうございました。