【Blogger】パンくずリストを構造化データにする方法

Google Search Consoleの「リッチリザルトテスト」

みなさん、「パンくずリスト」と聞いた事はありますか?

SEOを意識する上で、このパンくずリストは意外と重要だったりします。

なぜなら、パンくずリストをしっかりと構造化していれば、

  1. Google検索ページに表示される
  2. 内部リンクとして認識される

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

それでは、パンくずリストはどこにあるのか?

記事内であれば、たいてい記事の上部に表示されます。

また、パンくずリストはGoogle検索ページでも、

Google検索ページのBloggerパンくずリスト

このように表示されます。

さて、ここからはBloggerでパンくずリストを構造化させる方法について解説して行きます!

パンくずリストを構造化する形式

パンくずリストには3種類の形式があり、それぞれ記述方法が違います。

  • microdata
  • RDFa
  • JSON-LD

これら3つが、構造化データの形式方法です。

そして、たいていのBloggerテンプレートは「microdata形式」を採用しております。

以前の当JapaNEOブログでは「data-vocabulary.org形式」を採用していたため、

Bloggerのdata-vocabulary.org形式

Google Search Consoleで、こんな悲しいエラーが出てしまいました。

この記述方法は既にサポートが終了しております。

なので、もしパンくずリストを変更せず使っている方は、私と同様のエラーが出ているかもしれません。

パンくずリストが機能しない?!

英語で

blogger breadcrumb

と検索すると、Bloggerにパンくずリストを設置する情報が日本語よりもたくさん出てくるのですが、

ひもくみ画像

んん?何か私のBloggerブログでは機能しないんですけど…

となったんですね。

そもそも、参考にしていたブログ記事に書いてあった

<b:include data='top' name='status-message'/>

このコードが、使っていたBloggerテンプレートでは見つからなかったのです。

なので、私の場合は別の方法を採用しました。

おしゃれなBloggerテンプレートをダウンロードして、そのテンプレートから「JSON-LD形式」の構造化データを見つけ出したのです。

もし私の使っているBloggerテンプレートのように、おしゃれなBloggerテンプレートを使いたい場合は、

こちらの記事を参考にしてみて下さい。

「JSON-LD形式」の構造化データ

さて、ここからは「JSON-LD形式」の構造化データの記述方法をご紹介します。

Bloggerの管理画面にある左メニューの「テーマ」を選びましょう。

すると、こんな画面になるかと思います。

Bloggerのカスタマイズ画面

この画面の「カスタマイズ」と書かれているボタンをクリックしましょう。

すると、いくつかメニューが表示されます。

その中の「HTMLを編集」を選びましょう。

ひもくみ画像

すると、画面にずらーっとプログラミングコードが表示されるかと思います。

そこで、「Ctrl+F」(検索)を押して以下のコードを

  1. 「Ctrl+C」:コピー
  2. 「Ctrl+V」:ペースト

して探してみて下さい。

<b:includable id='postHeader' var='post'>

こちらのコードの下に以下のコードを

<b:include cond='data:view.isPost' data='post' name='postBreadcrumbs'/>

貼り付けて下さい。

次に、こちらのコードを検索して下さい。

<b:include data='post' name='postBody'/>

こちらのコードは2つある可能性があるので、

<b:includable id='postBodySnippet' var='post'>
  <b:include data='post' name='postBody'/>
</b:includable>

このように記述されているコードの方を採用しましょう。

</b:includable>

そして、このコードの下に以下のコードを付け加えます。

<b:includable id='postBreadcrumbs' var='post'>
  <!-- Post Breadcrumbs -->
  <nav id='breadcrumb'><a expr:href='data:blog.homepageUrl'><data:messages.home/></a><b:if cond='data:post.labels'><em class='delimiter'/><a class='b-label' expr:href='data:post.labels.last.url'><data:post.labels.last.name/></a></b:if><em class='delimiter'/><span class='current'><data:post.title/></span></nav>
  <script type='application/ld+json'>
  {
    &quot;@context&quot;: &quot;http://schema.org&quot;,
    &quot;@type&quot;: &quot;BreadcrumbList&quot;,
    &quot;@id&quot;: &quot;#Breadcrumb&quot;,
    &quot;itemListElement&quot;: [{
    &quot;@type&quot;: &quot;ListItem&quot;,
    &quot;position&quot;: 1,
    &quot;item&quot;: {
    &quot;name&quot;: &quot;<data:messages.home/>&quot;,
    &quot;@id&quot;: &quot;<data:blog.homepageUrl.jsonEscaped/>&quot;
    }
    },{
    &quot;@type&quot;: &quot;ListItem&quot;,
    &quot;position&quot;: 2,
    &quot;item&quot;: {
    &quot;name&quot;: &quot;<b:if cond='data:post.labels'><data:post.labels.last.name/></b:if>&quot;,
    &quot;@id&quot;: &quot;<data:post.labels.last.url.jsonEscaped/>&quot;
    }
    },{
    &quot;@type&quot;: &quot;ListItem&quot;,
    &quot;position&quot;: 3,
    &quot;item&quot;: {
    &quot;name&quot;: &quot;<data:post.title/>&quot;,
    &quot;@id&quot;: &quot;<data:post.url.jsonEscaped/>&quot;
    }
    }]
   }
  </script>
</b:includable>

最後に、パンくずリストのCSSデザインを付け加えます。

]]></b:skin>

このコードよりも上に、今からパンくずリストのデザイン(CSS)を追加して行きます。

もし、このコードよりも上にコードを貼って機能しない場合は、

</style>

こちらのコードよりも上にコードを貼ってみて下さい。

 #breadcrumb{
    font-size:12px;
    font-weight:400;
    color:#aaa;
    margin:0 0 10px
}
 #breadcrumb a{
    color:#aaa;
    transition:color .17s
}
 #breadcrumb a:hover{
    color:$(title.hover)
}
 #breadcrumb a,#breadcrumb em{
    display:inline-block
}
 #breadcrumb .delimiter:after{
    content:'\f105';
    font-family:FontAwesome;
    font-style:normal;
    margin:0 3px
}

こちらのCSSコードを貼り付けたら、パンくずリストの構造化データは完了です!

パンくずリストのデザイン変更方法

パンくずリストの文字サイズを変更したい場合は、

font-size:12px;

こちらのコードの「12px」を変更して下さい。

また、「ホーム」と「ラベル」部分のリンクの色を変更したい場合は、

#breadcrumb a{

こちらのコード内の「color:#aaa;」カラーを変更しましょう。

お勧めの色は、Googleのリンクの色にも使われている

color:#1558d6;

この色です。

構造化が出来たかチェックする方法

実はGoogle Search Consoleの機能で、パンくずリストを構造化出来たかどうかを確認する事が出来ます。

リッチリザルトテスト

こちらのサイトで、パンくずリストの表示されている記事のURLを貼り付けテストしてみて下さい。

もし構造化データに問題が無ければ、

Bloggerのパンくずリストを「リッチリザルトテスト」

このような状態になります。

エラーの場合は、どこかしらで問題があるという事なので、もう一度この記事で手順を再確認してみて下さい!

コメントを投稿

0 コメント