HTML5のmicrodataで情報を付加したパンくずリストを、WordPressに設置する方法。HTML5のmicrodataで情報を付加したパンくずリストを、WordPressに設置する方法。HTML5のmicrodataで情報を付加したパンくずリストを、WordPressに設置する方法。NavXT」のような便利なプラグインを利用したり、プラグインなしでも短いコードで実現可能ですが、私はHTML5のmicrodataでパンくずリストに情報を付加させたかたちで設置したかったので、その方法をシェアしたいと思います。これからSEO的にもセマンティック技術はますます無視できない存在になっていくと思うので、少しずつ取り入れていきたいですね。ところで、microdataって何?という人は、下記のサイトやページでわかりやすーく解説されているので、是非ご覧になってみてください。OGPWordPressにパンくずリストを表示させるコードでは、まずWordPressにパンくずリストを表示させるため、下記のコードを「single.php」に記述します。各リンクは、あとからmicrodataの情報を付加するため、<div>で囲んであります。記事が属するカテゴリの出力については、複数の階層(親子)になっているカテゴリに対応したコードになっています。?></div></div>次に、CSSでリストを横並び表示させます。あと、レイアウトや装飾等は各自で行なってください。これで単一記事ページにパンくずリストが表示されましたね!先ほどのコードに、microdataで情報をマークアップします。上記のコードに、microdataで情報を付加したコードがこちらです。itemtype=”http://data-vocabulary.org/Breadcrumb”>で、パンくずリストのアイテムであることを明示し、itempropで、それがURLであることや、タイトルであることを示しています。?></div></div>これで、パンくずリストの見かけ上は何も変わりませんが、検索エンジンにサイトの階層構造をより正確に伝えることが可能になり、google先生の検索結果にパンくずリストが表示されやすくなるというメリットもあります。チェックしたいページのURLを入力して「Preview」をクリックしてみましょう。下の画像のようなページが表示され、検索結果の表示例として、パンくずリストが表示されていればOKです。追記このブログにパンくずリストを設置した翌日(この記事を公開してすぐ)には、googleの検索結果にパンくずリストの情報が表示されていました。早くてビックリ!と言っても、microdataを記述すると必ず表示されるというわけでもないみたいですし、逆にmicrodataを記述していなくても表示される場合もありますので、ご参考までに...。NavXTを使ったパンくずリストの構造化マークアップ」という記事を見つけました。できるんですねw私も早速、クライアントのサイトでこの方法を試してみたところ、とても簡単にできたのでおすすめします!参考文献:WordPressデザインブック3.x対応TweetPocketウェディング関連のWebデザインにおすすめの商用フリー素材まとめ。Vol.3】でアクセシビリティの勉強をしてきました。