初心者が設定するときにわかりそうでわからないパンくずリスト。サイトの回遊性を上げるだけでなく、SEO効果もあるといわれます。両方得るにはどうしていけばいいのかまとめます。
JSON-LDだけではパンくずリストは表示されません。
パンくずリストを調べていた時、設定するにはJSON-LDをしておいた方がSEO的に効果があるといろんなところに書いてありました。
でも、これだけだと「WEB上には表示されない」ということがはっきり書いているものが見つけられず割と調べました。
- パンくずリストのタグの書き方は書いてあっても、JSON-LDのことが書いていない。
- JSON-LDが書いてあってもパンくずリストはどうしたらいいか書いていない。
というループに入ってしまい、「で、結局どうしたらいいの？2つの関係性は？」と思ったので、理解できるまで調べてみました。
初心者だと、JSON-LDの使い方で割とここに詰まる気がします。
WEB上にいろいろと詳しく書いてくれている方が多いですが、その人達の仲間入りできますように～。
まずは、パンくずリストとJSON-LDの役割の違い
パンくずリストをつけることでユーザーがサイトのどの位置にいるか知ることができます。(これは位置型パンくずリストというそうで、パンくずリストにもいくつか種類があるようです。種類を知りたい方はこちら)
パンくずリストのメリットは下記のようなことがあります。
- 訪問サイト内でいる位置がどこかわかる
- 直前の階層やトップページへワンクリックで移動できる道しるべ
- うまく活用できると他のページも見てもらえる
- Googleなどクローリングした時にサイト内の全体を把握してもらいやすくなる
パンくずリストを作るだけでここまでしてくれるなら、これだけでいいのではないかと思いますよね。
でも、パンくずリストの設定だけだと人への対応がメインになります。
もちろんクローラーが情報を取りにくれば、サイトを把握してもらえるのですが、こちらの意図したように受け取ってくれたかは「？」になるかもしれません。
そこで構造化データの登場です。
構造化データは、ロボットに対してサイトの情報をわかりやすくまとめたものになります。対機械対策のために書いておいた方がよいものといえるのです。
人間は見た目などで判断してこれはパンくずリストだからどこをクリックすれば行きたい場所へ行けるかなどがわかりますが、クローラーはそういった感覚的な判断が苦手で文字列として判断しています。
検索エンジンのロボット(クローラー)が苦手とするところを認知してもらうために「構造化データ」使うのです。
構造化データを書く時にこれは一体何かということを表す規格としてschema.orgがあります。そして、マークアップするときの仕様の1つとしてJSON-LDがあります。
構造化データを使うことで、検索エンジンのロボットがサイト内の情報をきちんと読み取ることができるようになります。そうなることで、検索結果の表示がより詳細なものとなる可能性が高いのです。
検索結果の表示が変わるとクリックされる回数も変わる可能性大ですよね！
構造化データのマークアップは、JSON-LDを含め3つのものがあります。（他2種類：microdata/RDFaでどれで書いても問題はありません。）
その中でもJSON-LDは、現在Googleの構造化データのマークアップとして推奨されています。Googleの構造化データのガイドラインはこちら
理由は、microdata/RDFaはHTMLとともに書き込みます。WEBのタグ表示位置に合わせて記述することになります。HTMLのタグ内に記述するので、時にCSSなどの影響を受けてしまうことがあります。
でも、JSON-LDはscriptとして書くのでHTML内のどの位置に書いても大丈夫です。ということはまとめて書けるということです。(JSON-LDは外部リンク不可のようです。パンくずリストだとページごとに情報が変わるので使う必要がないですね。)
構造化データはパンくずリストだけで使うものではないので、SEO対策などで他にも書く場合はJSON-LDが便利といえます。
構造化データでどんなことができるか知りたい方はこちらへ
Google 検索デベロッパー ガイド
パンくずリストの書き方
See the Pen パンくずリスト by chocolartwork (@chocolartwork) on CodePen.
まずはパンくずリストを書きましょう。今回はFont awesomeも使用してみました。
パンくずリストはユーザーがわかりやすいよう、サイト内の構造を体系的に書くようにしてください。
HOME>WEBデザイン＞【DTP】チラシの作り方
【WEBなのにDTPのページ？紙のこと？】のようにチグハグにならないように気を付けてください。
パンくずリストの表示位置はヘッダー下かフッターの上に書かれることが多いです。
schema.orgにサンプルコードがあるので、そちらを使うようにしました。https://schema.org/BreadcrumbList
<ol>Ordered Listが使われています。サイトの階層を表示するものなので、<ul>ではなく、ナンバリングされる<ol>が使われているのかなと思ってます。
また、パンくずリストはナビゲーションにあたるので、<nav></nav>で囲いましょう。
割と<div></div>で囲んだ説明も多いのですが、タグをきちんと書くことでGoogleにタグの役割を伝えられると思っています。
検索対策(SEO)で大切だと思うのでここはぜひ<nav></nav>で書くことをオススメします。
<nav>は、ナビゲーションであることを示す際に使用します。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
http://www.htmq.com/html5/nav.shtml
JSON-LDの書き方
See the Pen JSON-LD パンくずリスト3階層 by chocolartwork (@chocolartwork) on CodePen.
scriptなのでWEB上に特に表示はされません。
JSON-LDで書くとき、下記でscriptタグで囲みます。
<script type="application/ld+json"></script>CODEPENで書いたコードは、パンくずリストの3階層目まで書いています。もし、2階層目までにしたい場合は下記の部分を消してください。
,{"@type": "ListItem","position": 3,"item": {"@id": "https://○○","name": "パンくずリスト"}}
きちんと書かれていないとGoogleが認識してくれないのでせっかく書いたコードが無駄に・・・
そんなことにならないように【構造化データテストツール】を使って、エラーが出ないかチェックしましょう。
構造化データテストツール
まとめ
構造化データ記述初心者の私が今回疑問に思った部分をまとめてみました。
- JSON-LDでは、パンくずリストは表示されませんが有効クローラーには有効。(検索エンジンロボット対策用)
- パンくずリストを表示させるには、HTML/CSSで書こう。（人への対策用）
- パンくずリストは、ナビゲーションにあたるので<nav></nav>で囲もう。
- JSON-LDで書いた構造化データは、ツールを使ってチェックしよう。(エラーが出るときちんと表示されません。)
上記のことに気をつければ、パンくずリストと構造化データの記述ができます。
JSON-LD/Microdate/RDFaの3種類の記述方法がありますが、SEO対策として考えていて、これから設定するのならGoogle推奨のJSON-LDを使うのがいいのではないかと思います。
また、パンくずリスト対応のJSON-LDは1ページごとに情報が変わるので、外部ファイルでは読み込めません。というか、読み込ませる必要がないです。めんどうに感じるかもしれませんが、1ページずつ書き込みましょう。
コメント