みなさん、「パンくずリスト」と聞いた事はありますか？
SEOを意識する上で、このパンくずリストは意外と重要だったりします。
なぜなら、パンくずリストをしっかりと構造化していれば、
- Google検索ページに表示される
- 内部リンクとして認識される
というメリットがあります。
それでは、パンくずリストはどこにあるのか？
記事内であれば、たいてい記事の上部に表示されます。
また、パンくずリストはGoogle検索ページでも、
このように表示されます。
さて、ここからはBloggerでパンくずリストを構造化させる方法について解説して行きます！
パンくずリストを構造化する形式
パンくずリストには3種類の形式があり、それぞれ記述方法が違います。
- microdata
- RDFa
- JSON-LD
これら3つが、構造化データの形式方法です。
そして、たいていのBloggerテンプレートは「microdata形式」を採用しております。
以前の当JapaNEOブログでは「data-vocabulary.org形式」を採用していたため、
Google Search Consoleで、こんな悲しいエラーが出てしまいました。
この記述方法は既にサポートが終了しております。
なので、もしパンくずリストを変更せず使っている方は、私と同様のエラーが出ているかもしれません。
パンくずリストが機能しない？！
英語で
blogger breadcrumb
と検索すると、Bloggerにパンくずリストを設置する情報が日本語よりもたくさん出てくるのですが、
んん？何か私のBloggerブログでは機能しないんですけど…
となったんですね。
そもそも、参考にしていたブログ記事に書いてあった
<b:include data='top' name='status-message'/>
このコードが、使っていたBloggerテンプレートでは見つからなかったのです。
なので、私の場合は別の方法を採用しました。
おしゃれなBloggerテンプレートをダウンロードして、そのテンプレートから「JSON-LD形式」の構造化データを見つけ出したのです。
もし私の使っているBloggerテンプレートのように、おしゃれなBloggerテンプレートを使いたい場合は、
Bloggerおしゃれテンプレートに変更させる5つのステップ
Bloggerのダサいテンプレートをおしゃれなテンプレートに変更する方法を分かり易く解説しています。もちろん、無料でまるでWordPressのようなクールなテンプレートに変更することが出来ますよ！
こちらの記事を参考にしてみて下さい。
「JSON-LD形式」の構造化データ
さて、ここからは「JSON-LD形式」の構造化データの記述方法をご紹介します。
Bloggerの管理画面にある左メニューの「テーマ」を選びましょう。
すると、こんな画面になるかと思います。
この画面の「カスタマイズ」と書かれているボタンをクリックしましょう。
すると、いくつかメニューが表示されます。
その中の「HTMLを編集」を選びましょう。
すると、画面にずらーっとプログラミングコードが表示されるかと思います。
そこで、「Ctrl+F」（検索）を押して以下のコードを
- 「Ctrl+C」：コピー
- 「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'>
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"@id": "#Breadcrumb",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"name": "<data:messages.home/>",
"@id": "<data:blog.homepageUrl.jsonEscaped/>"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"name": "<b:if cond='data:post.labels'><data:post.labels.last.name/></b:if>",
"@id": "<data:post.labels.last.url.jsonEscaped/>"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"name": "<data:post.title/>",
"@id": "<data:post.url.jsonEscaped/>"
}
}]
}
</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について知りたい方の為に、Bloggerの始め方＆使い方マニュアルみたいなものを作成しました。
この記事に従ってブログ運営をして行けば、集客はもちろん収益の大幅アップも間違いなしです！
Bloggerブログについてさらに詳しく知りたい方は、
Bloggerブログの始め方と使い方
ブログ初心者が、Blogger始める前に知っておくべき基本知識や使い方って何だろう？Bloggerブログの為のこの完全マニュアル記事を読めば、ブログのSEO検索や収益性が増すことはまず間違いないでしょう。初期投資も格安で始められるBloggerは、初心者向けのブログ運営として超お勧めですよ！
こちらの記事をお読み下さいませ。
3 コメント
こんにちわ！初めまして構造化で悩み苦しんでいます。
返信削除こちらは、自動的に構造化が出来る仕組みですね
素晴らしいですね。
出来ましたらQooQの設定の方法を知りたいのですが可能ですか？
宜しくお願い致します。
タカさん、初めましてこんにちは！
削除私はQooQではなく海外のテンプレートをずっと使って来たので、実はよく設定方法など分かっておりません（汗）
それを作られた日本人の方がいると思うので、その方に直接問い合わせて聞いてみた方が早いかもしれません。
お役に立てず申し訳ございません。
ひもくみさん
返信削除お返事ありがとうございます。
海外のテンプレート活用されているのは、わかってはおりました
もしかしたら詳しいかなと思ってお聞きしてみました
構造化は自動の方が良いですね。時間の節約になりますからね
取り合えず他をあたってみます。ありがとうございました。