【メモ】構造化マークアップのあるパンくずとなしのパンくずを混ぜてNotebookLMに読ませて画像化〜比較した

【メモ】見出しのある文章と見出しのない文章をNotebookLMに読ませて画像化〜比較したの続き。

よく言われる構造化マークアップがLLMに云々みたいな話。
構造化マークアップがどう影響するのか検証している例を見たことがないので、前回（↑）と同じ形式で調べてみました。n=1です。

行ったことと使用したhtml

何を行ったのか？

  • 同一HTML内にパンくずを3つ設置
  • 見た目・DOM構造は同一
  • 構造化マークアップ（BreadcrumbList）は1つのみ
  • どのパンくずをマークアップするかを変えて比較
  • NotebookLMにHTMLを読み込ませ、画像化結果を比較

※htmlそのものをテキストに書くと構造化マークアップが読めなくなってしまうようだったのでエスケープしたものを読ませている。

使用したhtml（1）：真ん中のパンくずBをマークアップ

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>パンくずリストが3つある例</title>

  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"BreadcrumbList",
    "itemListElement":[
      {
        "@type":"ListItem",
        "position":1,
        "name":"ホーム",
        "item":"https://example.com/"
      },
      {
        "@type":"ListItem",
        "position":2,
        "name":"自転車",
        "item":"https://example.com/bikes/"
      },
      {
        "@type":"ListItem",
        "position":3,
        "name":"ロードバイク",
        "item":"https://example.com/bikes/road/"
      }
    ]
  }
  </script>

  <style>
    body { font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; margin: 24px; }
    nav { margin: 18px 0; padding: 12px; border: 1px solid #ddd; border-radius: 10px; }
    .label { font-size: 12px; opacity: .7; margin-bottom: 6px; }
    .crumbs a { text-decoration: none; }
    .crumbs span { margin: 0 6px; }
  </style>
</head>

<body>
  <h1>パンくずリスト例</h1>

  <nav aria-label="Breadcrumb A">
    <div class="label">パンくずA</div>
    <div class="crumbs">
      <a href="https://example.com/">ホーム</a><span>›</span>
      <a href="https://example.com/tags/">タグ</a><span>›</span>
      <a href="https://example.com/tags/sale/">セール</a><span>›</span>
      <span aria-current="page">年末セール対象</span>
    </div>
  </nav>

  <nav aria-label="Breadcrumb B">
    <div class="label">パンくずB</div>
    <div class="crumbs">
      <a href="https://example.com/">ホーム</a><span>›</span>
      <a href="https://example.com/bikes/">自転車</a><span>›</span>
      <span aria-current="page">ロードバイク</span>
    </div>
  </nav>

  <nav aria-label="Breadcrumb C">
    <div class="label">パンくずC</div>
    <div class="crumbs">
      <a href="https://example.com/">ホーム</a><span>›</span>
      <a href="https://example.com/support/">サポート</a><span>›</span>
      <a href="https://example.com/support/shipping/">配送</a><span>›</span>
      <span aria-current="page">送料について</span>
    </div>
  </nav>

  <p>このページにはパンくずが3つあります。</p>
</body>
</html>

使用したhtml（2）：最後のパンくずCをマークアップ

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>パンくずリストが3つある例</title>

  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"BreadcrumbList",
    "itemListElement":[
      {
        "@type":"ListItem",
        "position":1,
        "name":"ホーム",
        "item":"https://example.com/"
      },
      {
        "@type":"ListItem",
        "position":2,
        "name":"サポート",
        "item":"https://example.com/support/"
      },
      {
        "@type":"ListItem",
        "position":3,
        "name":"配送",
        "item":"https://example.com/support/shipping/"
      },
      {
        "@type":"ListItem",
        "position":4,
        "name":"送料について",
        "item":"https://example.com/support/shipping/fee/"
      }
    ]
  }
  </script>

  <style>
    body { font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; margin: 24px; }
    nav { margin: 18px 0; padding: 12px; border: 1px solid #ddd; border-radius: 10px; }
    .label { font-size: 12px; opacity: .7; margin-bottom: 6px; }
    .crumbs a { text-decoration: none; }
    .crumbs span { margin: 0 6px; }
  </style>
</head>

<body>
  <h1>パンくずリスト例</h1>

  <nav aria-label="Breadcrumb A">
    <div class="label">パンくずA</div>
    <div class="crumbs">
      <a href="https://example.com/">ホーム</a><span>›</span>
      <a href="https://example.com/tags/">タグ</a><span>›</span>
      <a href="https://example.com/tags/sale/">セール</a><span>›</span>
      <span aria-current="page">年末セール対象</span>
    </div>
  </nav>

  <nav aria-label="Breadcrumb B">
    <div class="label">パンくずB</div>
    <div class="crumbs">
      <a href="https://example.com/">ホーム</a><span>›</span>
      <a href="https://example.com/bikes/">自転車</a><span>›</span>
      <span aria-current="page">ロードバイク</span>
    </div>
  </nav>

  <nav aria-label="Breadcrumb C">
    <div class="label">パンくずC</div>
    <div class="crumbs">
      <a href="https://example.com/">ホーム</a><span>›</span>
      <a href="https://example.com/support/">サポート</a><span>›</span>
      <a href="https://example.com/support/shipping/">配送</a><span>›</span>
      <span aria-current="page">送料について</span>
    </div>
  </nav>

  <p>このページにはパンくずが3つあります。</p>
</body>
</html>

結果

次のような結果になりました。

真ん中のパンくずBをマークアップ：ちょっとだけパンくずの画像化順序が変わる

できた画像はこちら。

パンくずA→B→Cの順ではなくて、B（マークアップあり）→A→Cの順に

順番がちょっと変わったのでなにか意味づけとして変わったりするのかなと思ったのですが…

最後のパンくずCをマークアップ：あまり変化がない

できた画像はこちら。

順番はパンくずの設置通りでA→B→C（マークアップあり）。

マークアップはほぼなにも考慮されていない。

感覚的なものなんですが、ソースを全部読んだうえで何を重要とするのかをLLM側で判断（ここではNotebookLMが「パンくずのページ」あるいは「自転車のページ」と判断）して出力する、みたいな感じなんですかね。

パンくずBのマークアップも何回かやっていると出力も変化するんじゃないかな。
それかソース上「ロードバイク」とか「自転車」の方がページの主要テーマで見られるのでマークアップあんまり関係ないとか。

雑感

今回の雑感です。

  • NotebookLMがこのタイミングでこう判断したというだけのもの（他のLLMだと違う判断をする可能性もあるし、同じソースでもタイミングによって異なる可能性もある）
  • 構造化マークアップしてどうという話ではなく、ソース全体を見渡したうえで判断していそう（それはそう）
  • 構造化マークアップしなくてもわかりやすいhtmlになっていれば自然と理解できるのでは？
  • 何の成果も！！得られませんでした！！

なんかもうちょっとわかりやすい検証ないかなｗ（前回に続いて2回目）

良いお年をお過ごしください。

〜終〜

ブログへのサポートのお願い（アマゾンギフト）

いつも「バカに毛が生えたブログ」をご愛読いただきありがとうございます。

現在、このブログは皆様のおかげで無料・広告なし（※）で運営しております。
※AdSenseはセンシティブ判定されてしまうため、広告を掲載できません。

ブログの継続とさらなる充実のためご支援をお願いします。
支援は一度限りのショット支援として、¥150から可能です。

いただいた支援は、以下のような形で活用させていただきます：

  • サーバー費用やサイトの維持
  • 新しいコンテンツの作成
  • モチベーション

ご希望の方はスパチャ読みをいたしますので、その旨をお知らせください。

ご支援はより良いブログを提供するための力になります。

こちらのメールアドレスを送信先にしてください。
↓タップするとコピーされます

コメント

タイトルとURLをコピーしました