breakこのウェブサイトはご利用の端末での閲覧に対応していません。10th,2018ウェブサイトの構造をユーザーにも検索クローラーにもわかりやすくするパンくずリストについて。パンくずリストのJSON-LDとMicrodataでの構造化マークアップの方法も。list)”とは階層構造になったウェブサイトで今ユーザーが見ているページがどの位置にいるのかをわかりやすくするためのページの一覧です。一般的にはウェブページの上部に配置されます。“パンくずリスト”の例グリム童話の“ヘンゼルとグレーテル”で道に迷わないように粉々にしたパンのくずを道しるべとして道に落としたことになぞらえて、ユーザーがどのようにウェブサイト内を辿ってきたかがわかることから“パンくず(breadcrumb)”と名付けられています。一般的にウェブサイトはページの内容の種類やカテゴリで階層が分けられています。上位にトップページがあり、その下に大まかなカテゴリ、そのさらに下に細かいカテゴリ、そのさらに下にコンテンツとなるウェブページがあります。ウェブページの階層構造パンくずリストはそのページの階層構造の中での位置とともにページが属しているカテゴリも表します。階層ごとの“パンくずリスト”の例このページの上部にもパンくずリストがあります。このウェブサイトの“パンくずリスト”パンくずリストを設置するメリット#ユーザビリティーの向上パンくずリストはウェブサイトを見る人間のユーザーのユーザビリティーを向上します。コンテンツが多いウェブサイトや、階層構造が深いウェブサイトではユーザーが今ウェブサイトの中でどの位置にいるのかやウェブサイトの構造がわかりにくくなりますが、パンくずリストはこれらをわかりやすく示すことができます。“ユーザビリティー”とはユーザーがウェブサイトで効率よく、ストレスなく目的を達成できたかを示す指標です。検索エンジンの検索結果からウェブサイトにやって来たユーザーが最初に見るページがトップページであるとは限りません。パンくずリストはトップページ以外のページにやってきたユーザーにもそのページがウェブサイトの中でどのような位置にあるページなのか認識させることができ、さらには上位の階層にあるページやトップページへ導くこともできます。一般的にウェブサイトの下位の階層はページの内容の種類やカテゴリで分類されているので、ユーザーが今見ているページがどのカテゴリに属しているのかも知ることができます。#SEO効果パンくずリストには検索エンジンがウェブサイトの構造を認識しやすくするのでSEO効果もあります。Optimization)”とは検索エンジン最適化のことでGoogleなどの検索エンジンの検索結果で上位に表示されるために改善していく施策です。検索エンジンは他のウェブページからどのくらいそのウェブページがリンクされているかをウェブページを評価する指標の一つとしていますが、内部リンクについても同様です。パンくずリストは正しく設置されていればウェブサイト内で上部の階層にあるウェブページほどリンクされることが多くなり、重要度が高いウェブページとして評価されやすくなります。検索エンジンの情報を収集する検索クローラーもリンクを辿ってウェブサイトの中を巡回していきますので、パンくずリストは検索クローラーの巡回効率を高めることにもつながります。パンくずリストを設置する#可能な限りすべてのページに設置するパンくずリストはすべてのページに設置するのが望ましいとされます。前述した通り、他のウェブページからどのくらいそのウェブページがリンクされているかがSEOと関係しますが、この効果はできるだけ多くのページにパンくずリストがあった方が最大化されます。ユーザーにとっても同じデザインのパンくずリストがすべてのページの同じ場所にあった方がわかりやすくなります。トップページなどの階層構造を知らせる必要のないページには必ずしも設置する必要はありません。#ウェブページの上部に設置する設置場所についての決まりはありませんが、ウェブページの上部に設置されている場合が多く、上部にある方がユーザーには馴染みがあるので認識されやすくなります。下部に設置してはいけないということはなく、検索エンジンもウェブページの下部にパンくずリストがあっても認識してくれます。#カテゴリを整理する適切なパンくずリストはリストにあるすべてのページに関連性があります。関連性のないページが含まれるパンくずリストはわかりにくく、ウェブサイトの構造も整理されていないものであることが表されてしまいます。関連性のない“パンくずリスト”このように関連性のあるパンくずリストにするにはウェブサイトの階層構造がそれぞれのページの内容に基づいてカテゴリで分類された構造にする必要があります。ウェブサイト内のページを分類するカテゴリが整理されていなかったり、分類が基準が曖昧だとパンくずリストを設置してもわかりづらいものになり設置した意味がなくなってしまいます。#パンくずリストを複数設置するコンテンツが多いウェブサイトだと一つのページが複数のカテゴリに属していることもあります。この場合複数のパンくずリストを設置することもできます。検索エンジンがウェブサイトの構造を認識するために使用するのは一つ目のパンくずリストであるとされています。複数設置する“パンくずリスト”の例ただし、不必要にいくつもパンくずリストを設置するとユーザビリティを損ねますので複数あった方がユーザーにとって便利である時のみ複数設置するべきです。#アンカーテキストにターゲットキーワードを含める検索エンジンはリンクのアンカーテキストをリンクの数とともにリンクされたウェブページの内容や質を判断する参考にしているため、パンくずリストのアンカーテキストにターゲットキーワードを含めるのはSEOの上で重要になります。“アンカーテキスト”とはリンクになっているテキストのことで通常は“a”要素に囲まれているテキストを指します。“ターゲットキーワード”とは検索エンジンからウェブサイトへやってくるユーザーが検索すると想定するキーワードのことです。パンくずリストでは上位の階層にあるページほどリンクされる数が多くなり、さらにそれらは同じアンカーテキストでリンクされます。アンカーテキストにターゲットキーワードを含めればそのターゲットキーワードでのリンクが集まるウェブページは検索エンジンからの評価が高まります。“ターゲットキーワード”と“パンくずリスト”のイメージただし、あくまで自然な形でターゲットキーワードを含めなければユーザビリティを損ねるので、矛盾のないパンくずリストにするためには予めターゲットキーワードを含めやすいウェブサイトの構造としておく必要があります。“ターゲットキーワード”を含められていない“パンくずリスト”パンくずリストの構造化マークアップ#パンくずリストを構造化マークアップするパンくずリストを設置しておけば検索エンジンが勝手に認識してくれる場合もありますが、“構造化マークアップ”するとより認識されやすくなります。構造化マークアップについて詳しくはこちら。JSON-LDで構造化マークアップする“構造化マークアップ”することで「これはパンくずリストである」や「このリンクは何番目の階層へのリンク」などということが検索エンジンに認識されます。検索エンジンによってパンくずリストが認識されると検索結果にもパンくずリストが表示されます。これは検索結果を見たユーザーがそのウェブサイトがどのようなウェブサイトなのかを知りやすくなり、ウェブサイトがクリックされることにもつながります。テストツール”などで検証することができます。テストツール”#“Microdata”で構造化マークアップ以下のサンプルコードは構造化マークアップしていないパンくずリストのコードです。href="/fruits/banana/islandbanana.html">島バナナ</a></li></ol></nav>このパンくずリストを“Microdata”で構造化マークアップすると以下のようになります。content="4"></li></ol></nav>マイクロデータ属性でパンくずリストを構成する要素をマークアップします。属性を指定する要素がない場合は“span”要素を使用して属性を指定します。それぞれのウェブページの階層は“meta”要素に“content”属性で指定します。“Microdata”による構造化データのマークアップについて詳しくはこちら。マイクロデータ属性-HTMLタグ辞書#“JSON-LD”で構造化マークアップする以下のサンプルコードは上の“Microdata”でマークアップした例と同じパンくずリストのコードです。href="/fruits/banana/islandbanana.html">島バナナ</a></li></ol></nav>このパンくずリストを“JSON-LD”で構造化マークアップすると以下のようになります。href="/fruits/banana/islandbanana.html">島バナナ</a></li></ol></nav>それぞれのウェブページの階層を“position”で指定し、“@id”でウェブページのURL、“name”でそのウェブページの名前を指定します。上の例ではURLにルート相対パスを使用していますが、絶対パスでも相対パスでも問題ありません。“JSON-LD”による構造化データのマークアップについて詳しくはこちら。