© TamKid.com All rights reserved.

bn_201505062134

20155/6

2,612 views

【WordPress】Breadcrumb NavXTをリッチスニペットに対応させる


いわゆるSEOについて考え、ネットでいろいろと見ていると、テクニック的な要素としてリッチスニペットの話をよく見かける。リッチスニペットとは

  1. リッチスニペットとは、GoogleなどWeb検索エンジンの検索結果ページに、各サイトの情報の一部を、より多様に表示させる機能のことです。 といってもよくわからないかもしれませんので、もう少し説明します。 スニペット Snippets とは、日本語で「断片」もしくは「情報の断片」を意味する英語です。 Googleでは、各サイトの情報の断片(スニペット)、たとえばサイトの概要説明などを検索結果に表示してユーザビリティを向上させています。

リッチスニペット Rich Snippets – SEO最新用語集SEO Pack

うーん、ま、SEOに関しては大事だってことね……と思っていると、リッチスニペットに対応しても検索結果に影響しないとの話もありますが、正直どれが真実かわかりませんが、検索結果でタイトルの下に表示されるのが

PI_03_201505051110みたいな感じで、URLになるのに対して、リッチスニペット対応のパンくずリストを設置していると、

PI_03_201505051136

いわゆるパンくずリストで表示されるというもの。うん、とりあえず良い感じかも。

このサイトはBreadcrumb NavXTにて、パンくずリストを設置しているので、Breadcrumb NavXTでリッチスニペットに対応したく、検索してみると、たくさん記事がでてきた。良かったぁ〜意外と簡単なんだと思って、いろんなページを見ていると微妙に違う。<navi>タグ使っている人、<span>タグの人、<li>タグ……、おいおい、いったいどれが正解?

複数のサイトを渡り歩いていて、Breadcrumb NavXTではなく自前でパンくずリストを設定している方のサイトで

3. リストタグ(ol)を使おう

パンくずリストは、その名の通り“リスト”だ。リストにはリストタグを使うのが、正しいHTML文書構造だ。更に、パンくずリストには、その並び順に意味があるので、ulではなく番号付リストを表すolを使うのが論理的に正しい。HTML文書構造を正しくする事で、SEO効果が高まる。

パンくずリストの正しい使い方【サンプル有】

と、あったり……。もうワケわからん。

理屈がわかるようになると、なるほどってわかってくるが、SEOに良いからぐらいの軽い気持ちで設置しようとすると、Breadcrumb NavXTでリッチスニペットに対応する方法を紹介するサイトはたくさんあるが、その設定方法がマチマチなうえ、リッチスニペットの説明もわかるようなわからないような……。

長い前置きにですね。結果としてはハマりましたが出来ました。

Breadcrumb NavXTでリッチスニペットに対応するポイントとしては、

function.phpに追記

Breadcrumb NavXTには<li>タグで設定

表示したいphpには、<ol>タグを使う

それぞれについては書いてあるのですが、その方法をまとめているサイトが見つけられなかったので、まとめました。ちなみにボクはクローラーのタイミングが良かったのか2日後ぐらいでGoogleに反映されてました。

1. function.phpに追記

Breadcrumb NavXTを使ったパンくずリストの構造化マークアップ

最初、上記サイトを参考にBreadcrumb NavXTを設定。ところがいくら保存しても、設定がところどころが消えてしまう……。そこで他のサイトを見ると、<li>タグだと設定消えちゃうから<span>タグならうまくいくというサイトを発見。なるほど……、Breadcrumb NavXTのバージョンの違いからなのかなぁと<span>タグで設定するとおおっ!!、保存されている。で、

構造化データテストツール (Structured Data Testing Tool)

(Googleにログインしていないとダメかもしれません……)

上記サイトでチェックすると、urlの項目の設定ができていませんとのアラートが。やはり、SEO的にも<span>タグではないようですねぇ……、さてどうするか。どうもBreadcrumb NavXTで<li>タグの記述に制限があるようだ。

テンプレートで利用できるタグと拡張方法

設定項目としてテンプレートのカスタマイズが許されているわけですが、どんなタグが許容されるのでしょうか?

このフィールドは、wp_kses()によって、入力値がチェックされていて、利用可能なタグと属性が決められています。

このフィールドには、以下の要素が利用できるようになっているようです。

<a>, <img>, <span>

項目によっては 以下も許可されているようです。

<h1>, and<h2>

 

パンくずリストの使い方 Breadcrumb NavXT

だ、そうだ。ということで、functionp.phpに

適正な場所で追記。※function.phpをいじる時は自己責任で。失敗するとサイトが表示されないどころか管理画面すら入れなくなります。

これでやっと<li>タグで itemprop などが使えるようになる。

2. Breadcrumb NavXTには<li>タグで設定

Home Template

Home Template (Unlinked)

Post Template

Post Template (Unlinked)

Page Template

Page Template (Unlinked)

添付ファイル Template

添付ファイル Template (Unlinked)

パンくず Template

パンくず Template (Unlinked)

Category Template

Category Template (Unlinked)

Tag Template

Tag Template (Unlinked)

投稿 Template

投稿 Template (Unlinked)

wordpressパンくず Template

wordpressパンくず Template (Unlinked)

日付 テンプレート

日付 テンプレート (Unlinked)

404 テンプレート

と、設定。Breadcrumb NavXTで保存してもタグが消えていないことを確認。

 

3. 表示したいphpには、<ol>タグを使う

パンくずリストえお表示したいphpの表示したい場所へ

ボクの場合は、cssで<ol><li>タグを設定していたので

style.cssで、

これで設定終了。

構造化データテストツール (Structured Data Testing Tool)

bn_201505071738

で、確認すると問題なし。


The following two tabs change content below.

清沢 たもつ

代表取締役社長株式会社イーグル
(きよさわ たもつ)1971年生まれ。2005年10月代表取締役社長に就任。瀬戸まなぶをパートナーとしたDesign会社であったが、高橋浩司(編集者)/木村博道(Photographer)が入社後、編集プロダクションへ。Art Director / Graphic Designerに従事し、Web Designやシステム設計、LAN設計を行う。Designerだが、会社経営とネットワークを中心としたsystem Engineer的な仕事も得意としている。

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

menu-search_201505102208

20155/10

【WordPress】グローバルメニューに検索

自社で求人のサイトを作ってみよう!っと3週間前に社内で展開して、その間に校了がいくつかあって、さらにGWと……。なんやかんやで実質、1週間ぐ…

2,730 views

PI_02_201505021704

20155/3

【WordPress】TablePressで2カラム(セル)表組みレスポンシブ化

TablePressって本家からレスポンシブ対応の追加プラグインが出ているんですね!? TablePress Responsive Tab…

3,407 views

imac_yosemite

20154/11

【Mac】Yosemite Server Part.2

先日、作業用のiMacからOS X Yosemite 10.10.3へのアップデートのアラートが! OS X Yosemite とりあえ…

1,027 views

mobile01

20153/29

【WordPress】レスポンシブ対応

仕事で込み入っている最中…… 普段はまったくこないGmailアカウントにメールが突然やってきた。 何だと思ってメールを確認してみると…

1,135 views

eg7

20153/4

【WordPress】Google+バッチ

サイトデザインリニューアル テストサイトとしてこのサイトを立ち上げている。近々に弊社管理のサイトをリニューアルするのでそのテストとしてこち…

984 views

ページ上部へ戻る