ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】パンくずリストをMicrodataでGoogle検索結果に表示方法!プラグイン不要

新鮮なパン

パンくずリストの設置はブログでは必須です。Google検索結果にも反映され、アクセスアップにもつながります。ブログ訪問者に対してはナビゲーションとして機能します。記事数の表示方法も共有します。

ちなみにパンくずリストとは、現在表示している記事やコンテンツの階層を示すものです。通常はカテゴリーの階層になります。Google検索で表示されるためにはMicrodataで記述する必要があります。

ゆめぴょん(@yume_pyon)です。こんちはっ!

昨日の記事ではカテゴリーを階層構造にすることを宣言しました。今までは1層のみで表現していた「パンくずリスト」も階層化に対応させました。

【WordPress】カテゴリー階層の構造化でSEO対策!取得コードもすっきり【WordPress】カテゴリー階層の構造化でSEO対策!取得コードもすっきり15 shares

ブログ記事が増えてきたのでSEO対策もかねてカテゴリーを階層化しました。カテゴリ…

パンくずリスト設置のメリット

繰り返しになりますが、パンくずリスト設置によるメリットをまとめると次のとおりになります。

  1. ブログ訪問者に階層構造のナビゲーションを示せる
  2. Microdataで記述するとGoogle検索結果に反映できる。SEO対策にもなるかも
  3. 上記の2点により、アクセスアップを見込める

パンくずリストの設置方法

まずはカテゴリー情報を取得する必要があります。昨日の記事でカテゴリー取得の統一コードを掲載しましたので、それを使うことにします。

なお、3階層以上のカテゴリー構造を設定している場合は、このコードを設置する必要はありません。

また、プラグインを利用しててっとり速く設置したい方は「Breadcrumb NavXT」が人気です。ただしすぐにGoogle検索結果には反映されないかもしれません。興味のある方は下の記事を読んでみてください。

Breadcrumb NavXTはパンくずリスト設置のWordPressプラグインBreadcrumb NavXTはパンくずリスト設置のWordPressプラグイン

ブログ読者が迷わないナビゲーションを設置してますか?パンくずリストの表示により今…

カテゴリー情報の取得コードを設置する方法(1〜2階層のブログ向け)

下のソースコードをテーマファイルのヘッダー部分「header.php」などにコピーしてください。一番最初にカテゴリー情報を使う箇所より前であれば、設置場所はheadタグの上の方ならどこでもいいです。

なおテーマファイルはWordPressで最も重要なファイルの1つなので、修正を加える前には必ずバックアップをとってくださいね。そして問題が起こったらすぐに元に戻してください。修正は自己責任でお願いします。

パンくずリストの設置コード(1〜2階層のブログ向け)

ブログにパンくずリストを設置

記事への設置コードを公開します。テーマファイルの編集方法がわかる方は、下のコードをパンくずリストを設置したい場所にコピーしてください。

テーマファイルの編集方法は、WordPress管理画面の「外観」→「テーマ編集」をクリック。右ファイルメニューから「single.php」や「content.php」を選択します。テーマにより違ってきます。編集後は必ず保存することを忘れずに!

ちなみにこのソースコードは1〜2階層までのカテゴリー構造のブログにしか利用できません。1階層の場合は、5〜10行目は削除しても大丈夫です。3階層以上の方はカテゴリーから取得する必要があります。次の章を参考にしてください。

またパンくずリストに記事数を表示したくない場合は、13行目の「.”(”.$_cate[‘count’].”)”」を削除してください。

パンくずリストの設置コード(3階層以上のブログ向け)

パンくずリストを設置したい場所に以下のソースコードをコピーしてください。

なお上のソースコードは私は利用していませんので「りくまろぐ」さん、「あかめ女子のwebメモ」さんの記事からそのままコピーしました。2人のブログにはいつもお世話になりっぱなしです。ありがとうございます!

[Я]パンくずリストをGoogle検索結果にも表示・反映させる方法 : りくまろぐ[Å] パンクズをGoogleの検索結果に表示させる方法を紹介!あっさりと設置できました!! | あかめ女子のwebメモ

スタイルシートの記述方法

CSS(スタイルシート)の基本形は次のとおりです。あとは好みで変えてみてください。なおスタイルシートが適用されない場合は、パンくずリストを囲むid要素(例えば#container)などを前につけるか、!importantを付けてみてください。

記述箇所のわからない方は、WordPress管理画面の「外観」→「テーマ編集」をクリック。右ファイルメニューから「style.css」を選択します。下コードを好きな場所にコピーしてください。編集後は必ず保存することを忘れずに!

ちなみに私が現在やってるような角丸ボタンのような形にしたい方は、下のCSSを加えてください。paddingやradiusの数値は、フォントの大きさによって変える必要がありますので調整してください。色は#以下の値を変更してください。

Microdataについて少しだけ解説

Google検索結果にパンくずリストを表示

Microdataにより文書の構造や意味を明示することにより、Googleなどの検索エンジンに内容を伝わりやすくするラベルのようなものです。

上のソースコード(1〜2階層版)を見てください。3、7、8、12、13行目の「itemprop=”url”」「itemprop=”title”」はそれぞれ階層構造の「URL」「カテゴリー名」をGoogleなどに伝えます。

2、6、11行目の「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」は「Breadcrumb」すなわち「パンくずリスト」の情報を伝えるよ!という宣言のようなものです。おまじないだと思って必ず記述してください。

Microdataの更にくわしい説明を読んでみたい方は、下のブログが比較的丁寧に書かれているので参考にしてみてください。

マイクロフォーマット & 構造化データがSEOにもたらすメリット | SEO JapanMicrodata を使ってみよう。サンプルソースで学ぶ Microdata | WWW WATCH

まとめ:今日のゆめぴょんの知恵

パンくずリストはずっと前からありましたが、カテゴリー構造になっていないホームページなどでは単なるナビゲーションとしての役割しかなくて、あまり注目されることもなかった気がします。

しかし階層構造にしたブログなどでは現在地を見失わないようにするナビゲーションとしての役割も重要となります。

おまけにGoogle検索結果にも表示されるのなら一石二鳥です。まだ設置していない人は、ぜひこの機会に設定することをオススメします。

ゆめぴょん(@yume_pyon)でした。 では、ばいちゃお! こてっZzz。ページトップへ

«前記事:【WordPress】カテゴリー階層の構造化でSEO対策!取得コードもすっきり【WordPressまとめ】ブログ更新情報を速く伝えるための通知方法:次記事»
ページ
↑先頭
ホーム