crocodile notebook

feedly feedburner google+ twitter facebook creative commons BY:2.1 プロフィール


blackbird with breadcrumbs
Creative Commons License photo credit: blackbird with breadcrumbs / dryfish

これまでのGoogleではパンくずリストの構造化データではscheme.orgは利用できず、Data-Vocabulary.orgを利用するほかありませんでした。
でも、Data-Vocabulary.orgはすでに開発が終了して、scheme.orgにその役割が引き継がれているので、ブログなどを構造化データに対応する以上はせっかくなのでscheme.orgを利用したいところ。

先日、ようやくGoogleのパンくずリストがscheme.orgに対応したとの報せがあったので、さっそくWordPressで実装しました。
Data-Vocabulary.orgも利用は継続できるので、すでにData-Vocabulary.orgで実装している方は急いでscheme.orgに変更する必要はありません。

基本的な部分は『Googleウェブマスターツールは構造化データを重要視してるっぽいからWordPressで対応してみました』と同じで、記事中のパンくずリストを表示させる1行を削除して、以下に差し替えるだけです。
削除(差し替え)するのは以下の1行です。

<?php breadcrumb(); ?>

次に、以下のPHPソースを適当な場所に貼り付けます。
すでに<script type=”application/ld+json”>が存在する場合、その直前か直後に貼り付けるのが良いと思います。

<script type="application/ld+json">
{ "@context":"http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {"@type": "ListItem","position": 1,"item":{"@id": "<?php echo home_url(); ?>","name": "ホーム"}},
<?php $str ='';global $post;$i=1;$categories = get_the_category($post->ID);$cat = $categories[0];
if($cat -> parent != 0){
	$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
	foreach($ancestors as $ancestor){
		$i++;
		echo '    {"@type": "ListItem","position": '.$i.',"item":{"@id": "'. get_category_link($ancestor).'","name": "'. get_cat_name($ancestor). '"}},'.PHP_EOL;
	}
}
$i++;
echo '    {"@type": "ListItem","position": '.$i.',"item":{"@id": "'. get_category_link($cat -> term_id). '","name": "'. $cat-> cat_name . '"}}'.PHP_EOL;
?>
  ]
}
</script>

上記のパンくずリストでは『ホーム > カテゴリ1 > カテゴリ2 > … > 記事のカテゴリ』とした、ホームを起点とした階層で出力されます。

テンプレートの修正が完了したら構造化データテストツールで検証します。

150615-0001

positionが階層で、数字が小さいほど親の階層になります。
item[Thing]がカテゴリのURL。
nameがカテゴリ名になります。

Googleウェブマスターツールは構造化データを重要視してるっぽいからWordPressで対応してみました』で設定したArticleはそのままに、パンくずリスト(BreadcrumbList)が『問題ありません』となっていれば完成です。

参考:Googleウェブマスターツールは構造化データを重要視してるっぽいからWordPressで対応してみました

参考:構造化データテストツール


Googleがschema.org(JSON-LD形式)のパンくずリストをサポート開始したのでWordPressで対応してみる

UPDATE: 2015.06.15
, , , ,




併せ読みに選ばれている
記事はこちらのようです

Google Adsenseの広告コードを修正する4つの方法と、見落としがちなポリシー違反

Google Adsenseの広告コードを修正する4つの方法と、見落としがちなポリシー違反

従来は一切の変更を禁じられていたAdsenseコードの変更ですが、4つの方法に限り許可されました。 あわせて、たまにみかけるポリシー違反への注意喚起も1つほど。

Facebookのソーシャルプラグイン風のTwitterソーシャルプラグイン

Facebookのソーシャルプラグイン風のTwitterソーシャルプラグイン

twitterのフォロワーリストをfacebook風ソーシャルウィジェットのようなレイアウトでブログに掲載するjQueryプラグインです。 カスタマイズも容易なので使いやすいですよ。

俺の雑誌愛が暴走する雑誌だけのブログ『crocodile MAG’STACK』始めてました。

俺の雑誌愛が暴走する雑誌だけのブログ『crocodile MAG’STACK』始めてました。

自分の雑誌録を兼ねたブログを立ち上げました。 読んで益なし損もなし。薬にならなきゃ毒でもなし。

crocodile notebookも4年目なので、ユーザビリティについて考えてみた結果

crocodile notebookも4年目なので、ユーザビリティについて考えてみた結果

google pagespeed insightやGTmatrixの指摘事項をヒントに改善してみた中から、コストもかからず比較的簡単なものをピックアップしてみました。

《プラグイン17選》WordPressでブログを始めたい方へ捧げます《テーマ4選》

《プラグイン17選》WordPressでブログを始めたい方へ捧げます《テーマ4選》

WordPressでブログを始めようとしてる人、始めたけどもう少し手を加えたい人。 そうした方の参考になればと思い、ボクが活用しているプラグイン17本を纏めてみました。 あわせて今気になってるテーマを4つご紹介。

ワードプレスのページ送り(ページネーション)をプラグインなしで実装する方法

ワードプレスのページ送り(ページネーション)をプラグインなしで実装する方法

ワードプレスでのページ送りをプラグインなしで実装するためのPHPとCSSです。 機能的にはシンプルですが、簡単なCSSで自由にカスタマイズできるのがポイントです。