黒ブタBLOG

【SEO対策】WordPressで構造化データのパンくずリストを埋め込もう!

どーも 黒ブタ です。

いきなりですが、パンくずリスト・・・設置していますか?
パンくずリストを設置していてもSEO対策の構造化データのパンくずリストを設置しているサイトはまだまだ多くはないような気がします。

そこで今回はWordPressでSEO対策を意識したパンくずリストの構造化データを自動で出力するコードを書いていきたいと思います。

構造化データの埋め込みは「Microdata(マイクロデータ)」「JSON-LD(ジェイソンエルディー)」「RDFa(アールディーエフエー)」がありますが、MicrodataとJSON-LDの2つがよく使われているのでこの2つ用のコードを記述していきます。

元にするのは schema.orgパンくずページ です。

上記ページにあるMicrodataとJSON-LD用の書き方を参考にし、WordPress用に改造します。

Microdataの場合

パンくずリストは明確に順序がある為「ulタグ」ではなく 「olタグ」を使うのが望ましい。

function.phpに書き込む

function breadcrumb(){
    global $post;
    $str ='';
    if(!is_home()&&!is_admin()){
        $str.= '<div class="breadcrumb"><ol itemscope itemtype="https://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
        $str.= '<meta itemprop="position" content="1"><a href="'. home_url() .'" itemprop="item"><span itemprop="name">TOP</span></a> &gt;</li>';
        $breadcrumb_poji = 2;
        if(is_category()){
            $cat = get_queried_object();
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><meta itemprop="position" content="'.$breadcrumb_poji.'"><a href="'. get_category_link($ancestor) .'" itemprop="item"><span itemprop="name">'. get_cat_name($ancestor) .'</span></a> &gt;</li>';
                    $breadcrumb_poji++;
                }
            }
        $str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><meta itemprop="position" content="'.$breadcrumb_poji.'"><a href="'. get_category_link($cat -> term_id). '" itemprop="item"><span itemprop="name">'. $cat-> cat_name . '</span></a></li>';
        } elseif(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
                    $str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><meta itemprop="position" content="'.$breadcrumb_poji.'"><a href="'. get_permalink($ancestor).'" itemprop="item"><span itemprop="name">'. get_the_title($ancestor) .'</span></a></li>';
                    $breadcrumb_poji++;
                }
            }
            $str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><meta itemprop="position" content="'.$breadcrumb_poji.'"><a href="'. get_permalink().'" itemprop="item"><span itemprop="name">'. wp_title('', false) .'</span></a></li>';            
        } elseif(is_single()){
            $categories = get_the_category($post->ID);
            $cat = $categories[0];
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><meta itemprop="position" content="'.$breadcrumb_poji.'"><a href="'. get_category_link($ancestor).'" itemprop="item"><span itemprop="name">'. get_cat_name($ancestor). '</span></a> &gt;</li>';
                    $breadcrumb_poji++;
                }
            }
            $str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><meta itemprop="position" content="'.$breadcrumb_poji.'"><a href="'. get_category_link($cat -> term_id). '" itemprop="item"><span itemprop="name">'. $cat-> cat_name . '</span></a></li>';
            $breadcrumb_poji++;
            $str.='<li style="display: none;" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><meta itemprop="position" content="'.$breadcrumb_poji.'"><a href="'. get_permalink().'" itemprop="item"><span itemprop="name">'. wp_title('', false) .'</span></a></li>';
        } else{
            $str.='<li><meta itemprop="position" content="'.$breadcrumb_poji.'">'. wp_title('', false) .'</li>';
        }
        $str.='</ol></div>';
    }
    echo $str;
}

出力が必要なphpファイルの出力したい箇所に埋め込む

<?php breadcrumb(); ?>

JSON-LDの場合

breadcrumblist-json-ld.phpを作成し下記を記述

<?php if(!is_admin()&&!is_home()&&!is_front_page()&&!is_search()):?>
<?php 
$breadcrumbList_page_url = ((empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);
$breadcrumb_position = 1;
?>
<script type="application/ld+json">
{"@context": "https://schema.org","@type": "BreadcrumbList","itemListElement": [{"@type": "ListItem","position": <?php echo $breadcrumb_position;?>,"item": {"@id": "<?php echo home_url(); ?>","name": "TOP"}}
<?php $breadcrumb_position++;?>
<?php if(is_category()):?>
<?php 
$cat = get_queried_object();
if($cat -> parent != 0):?>
<?php $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
foreach($ancestors as $ancestor):?>
,{"@type": "ListItem","position": <?php echo $breadcrumb_position;?>,"item": {"@id": "<?php echo get_category_link($ancestor); ?>","name": "<?php echo get_cat_name($ancestor); ?>"}}
<?php $breadcrumb_position++;?>
<?php endforeach;?>
<?php endif;?>
,{"@type": "ListItem","position": <?php echo $breadcrumb_position;?>,"item": {"@type": "WebPage","@id": "<?php echo get_category_link($cat -> term_id); ?>","name": "<?php echo $cat-> cat_name; ?>"}}
<?php elseif(is_page()):?>
<?php 
$cat = get_queried_object();
if($post-> post_parent != 0 ):?>
<?php $ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor):?>
,{"@type": "ListItem","position": <?php echo $breadcrumb_position;?>,"item": {"@id": "<?php echo get_permalink($ancestor); ?>","name": "<?php echo get_the_title($ancestor); ?>"}}
<?php $breadcrumb_position++;?>
<?php endforeach;?>
<?php endif;?>
,{"@type": "ListItem","position": <?php echo $breadcrumb_position;?>,"item": {"@type": "WebPage","@id": "<?php echo get_permalink(); ?>","name": "<?php echo wp_title('', false); ?>"}}
<?php elseif(is_single()):?>
<?php 
$categories = get_the_category($post->ID);
$cat = $categories[0];
if($cat -> parent != 0):?>
<?php $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));?>
<?php foreach($ancestors as $ancestor):?>
,{"@type": "ListItem","position": <?php echo $breadcrumb_position;?>,"item": {"@id": "<?php echo get_category_link($ancestor); ?>","name": "<?php echo get_cat_name($ancestor); ?>"}}
<?php $breadcrumb_position++;?>
<?php endforeach;?>
<?php endif;?>
,{"@type": "ListItem","position": <?php echo $breadcrumb_position;?>,"item": {"@id": "<?php echo get_category_link($cat -> term_id); ?>","name": "<?php echo $cat-> cat_name; ?>"}}
<?php $breadcrumb_position++;?>
,{"@type": "ListItem","position": <?php echo $breadcrumb_position;?>,"item": {"@type": "WebPage","@id": "<?php echo post_permalink(); ?>","name": "<?php echo get_the_title(); ?>"}}
<?php else:?>
,{"@type": "ListItem","position": <?php echo $breadcrumb_position;?>,"item": {"@type": "WebPage","@id": "<?php echo $breadcrumbList_page_url; ?>","name": "<?php echo wp_title('', false); ?>"}}
<?php endif;?>
]}
</script>
<?php endif;?>

footer.phpの「body」の閉じタグ(</body>)直前に埋め込む

<?php require_once "breadcrumblist-json-ld.php";?>
</body>
</html>

設置が終わったらgoogleさんが提供している構造化データテストツールで確認してみましょう。