1. >
  2. >
  3. >
  4. >

パンくずリストを構造化するメリット・SEOの為にやるべきこと


パンくずリストを構造化マークアップすることのメリットや、microdateでのマークアップ方法をこの記事で解説致します。

パンくずリストを構造化するメリット

  • 01構造化することで、検索ロボットがサイトの構造を理解しやすくなります。
  • 02同じくユーザーもサイト構造の理解がし易くなります。
  • 03クリック率があがる

01について、検索ロボットにとって構造化されたパンくずリストがあると、

  • 訪れたページがどういったヒエラルキーの中で存在しているかが理解出来る
  • (検索ロボットはリンクを辿ってインデックスを促進しますので)サイト構造を理解した状態でパンくずを経由してインデックスが出来る

というメリットがあります。

03については、例えば下図の様に、構造化マークアップが上手く反映出来ていると、

0504_06

赤枠の様に、カテゴリー名を日本語で表示させることが出来、クリック率の向上にもつながります。

パンくずリストの構造化マークアップ方法

Microdata, RDFa markup, or JSON-LDなど色々な方法でマークアップが可能ですし、パンくずリストに関する構造化要素は数多くありますが、以下の3要素をがあれば、Googleロボットは認識することができます。

item パンくずのタイトルとリンク先URLを持ったデータ
name パンくずのタイトル
position そのページのパンくずリストの中で何番目の値なのかを示すもの

microdataでの例

コード引用元:https://developers.google.com/structured-data/breadcrumbs#examples

ArtsBooksPoetry

上記の様なパンくずリストがあり、その表示コードは以下の内容になります。

上記の内容をmicrodataで構造化すると以下の様になります。

  • olタグで構造化データのパンくずリストであることを宣言
  • liタグでアイテムリスト(パンくずの1リスト)であることを宣言
  • aタグで「item」要素を宣言(hrefでurlを記載)
  • aタグの中にspan要素を持ちそこで「name」要素を宣言
  • aタグと並列な位置に、metaタグで「position」要素の番号を宣言

この様に記述することで、冒頭で述べた「パンくずリストを構造化(リッチスニペット化)するメリット」を得ることができます。

WordPressのプラグインBreadcrumb NavXT→お手製コードで実装

今までは、Breadcrumb NavXTというプラグインで実装していましたが、デフォルトで使っている記法がschema.orgでなかったり、上記のGoogle公式の書き方をしようとすると、上手く反映されなかった為に、自作することにしました。

  • 01_breadcrumbs.phpというファイルをテンプレートフォルダ内に作成し、上記のphpコードをペースト
  • 02_<?php get_template_part(‘breadcrumbs’); ?>というコードで、breadcrumbs.phpを各ファイルに読み込ませる(apollo11.co.jpの場合は、single.php、category.php、page.php、search.phpのみに読み込ませています)
  • style.cssに上記cssコードを追記

以上の手順で完了です。上述の様に、single.php、category.php、page.php、search.php以外のテンプレートパターンをサイトが持っている場合は、上記のコードに条件分岐を増やす必要があります。

0505_01

※上図の様に、チェックツールの審査もパスしました。


SEO対策 名古屋はAPOLLO11にお問合せ