Bloggerテンプレート「QooQ」でパンくずリストのエラーを修正する方法

最近 Search Consoleから 項目「position」がありません（「itemListElement」に含まれる） というエラーが表示されるようになった。どうやらパンくずリストをGoogleの検索結果に表示させるための構造化データに問題がある時のエラーのようだ。

Googleが検索結果に表示するパンくずリストの表示に、schema.org によって定められた「BreadcrumbList」を採用した。そのため、それ以前までサポートしていたdata-vocabulary.org スキーマ形式で書かれている「QooQ」のようなテンプレートを使用していると、今回のようなエラーができようだ。

そして、このブログも「QooQ」を使用しているためエラーが出ました !!

この記事では、パンくずリストのエラーが Search Consoleで出たときの修正方法を解説します。

テンプレートの修正

では、早速テンプレートを修正しましょう。

管理ページの [テーマ] から [カスタマイズ] → [HTMLを編集] を選択し、テンプレートの編集画面を表示します。（事前のバックアップも忘れずに！）

CTRL+Fで検索を表示し、「BreadcrumbList」と入力して修正する div タグを見つけます。（次のイメージを参考）

上の赤枠で囲った div タグの内容を、次の HTMLで置き換えます。

<div class='breadcrumbs' vocab='https://schema.org/' typeof='BreadcrumbList'>
  <span property='itemListElement' typeof='ListItem'>
    <a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'>
      <span property='name'>ホーム</span>
    </a>
    <meta property='position' content='1'/>
  </span> / 
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.isLast == &quot;true&quot;'>
            <span property='itemListElement' typeof='ListItem'>
              <a expr:href='data:label.url' property='item' typeof='WebPage'>
                <span property='name'><data:label.name/></span>
              </a>
              <meta property='position' content='2'/>
            </span> / 
          </b:if>
        </b:loop>
      <b:else/>
          <span>その他</span> / 
      </b:if>
    </b:loop>
  <b:else/>
    <b:if cond='data:blog.pageName != &quot;&quot;'>
      <span property='itemListElement' typeof='ListItem'>
        <a expr:href='data:blog.url' property='item' typeof='WebPage'>
          <span property='name'><data:blog.pageName/></span>
        </a>
        <meta property='position' content='2'/>
      </span> / 
    </b:if>
  </b:if>
</div>

Search Consoleで正常に修正されたか検証

テンプレートの修正が完了したら、Search Consoleの機能使って修正を検証します。

Search Consoleにログインし、[拡張] → [パンくずリスト] の画面を表示し、画面下の詳細からエラーが表示されている行を選択します。

「修正を検証」 をクリックします。

一旦、次のような表示になり、修正確認の順番待ちリストに入ります。
Googleによる検証が完了するまで、しばらく待ちます。

まとめ

Search Consoleで、パンくずリストのエラーが表示されたときの対処法について解説してきました。

Search Consoleのエラーは、ほっとくと Googleの検索結果の表示や順位に影響があるため、エラーを放置せず、見つけたらすぐに対処するようにしましょう。

また、今回は Bloggerの「QooQ」のテンプレートでの修正方法で解説しましたが、他のテンプレートであっても基本的な流れは同じなので、参考にしてみてください。