SeesaaブログにGoogleに認識されるパンくずリストを追加

2015/03/24 2015/08/07

少し前からこのブログにパンくずリストをつけています。
パンくずリストとはサイトのナビゲーションの一種で現在見ているページの階層関係を示したものです。
当サイトでは記事ページでは以下のようにTOP>カテゴリ名>記事タイトルのようにナビゲーションをつけています。

パンくずリストをつけるメリット

Seesaaブログにはデフォルトで記事の上下にナビゲーションがついていますが、これは前後の記事を表示するものなので、いわば平面的なものです。
これに対してパンくずリストは記事の階層関係、いわば立体的なナビゲーションを追加することができます。

このようにナビゲーションがついていると、人にも検索エンジンにも記事の相対位置がわかりやすくなることで、アクセスアップにつながると言われています。

またGoogleなどの検索エンジンは適切にパンくずリストがマークアップされていれば、検索結果の表示に反映してくれます。
以下のように記事のページでカテゴリが表示されます。

今回はSeesaaブログに検索エンジンが正しく認識するパンくずリストを追加する方法です。

Seesaaブログでパンくずリストをつける方法

対象ページ、位置

記事ページ、カテゴリページ、過去ログページ、タグページにパンくずリストをつけます。タグページは全体HTMLの編集、それ以外はコンテンツの記事HTMLの編集です。

位置は記事の真上、ちょうどデフォルトのナビゲーションが表示されている部分がいいので、それを削除して入れ替えます。

Googleが認識するパンくずリスト

現在Googleが認識するのはdata-vocaburaly.orgのフォーマットでマークアップされたパンくずリストです。

記事ページ

記事ページにはTOP>カテゴリ>記事名というパンくずリストをつけます。以下が基本となるパンくずリストのHTMLです。

<% if:page_name eq 'article' -%><div class="crumb">
<a href="<% blog.page_url %>" Top</a>＞
<% loop:list_article -%>
<a href="<% article_category.page_url %>" ><%article_category.name %></a>＞
<% article.subject %>
<% /loop -%>
</div><% /if -%>

これをdata-vacabulary.orgのフォーマットでマークアップしていきます。今回はmicrodataという方式でマークアップしていきます。divだと改行が入ってしまうので、spanを使います。

一つの階層を
<span itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”> </span>
でくくります。urlとtitleが必須要素なのでaタグにitemprop=”url”を追加し、階層名を<span itemprop=”title”></span>でくくります。

itemprop=”child”はオプションですが、1ページに複数パンくずリストがある場合は必要となるそうなので、念のためつけています。

最終的に以下のようになります。

<% if:page_name eq 'article' -%>
<div class="crumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<% blog.page_url %>" itemprop="url"><span itemprop="title">Top</span></a>＞
</span>
<% loop:list_article -%>
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<% article_category.page_url %>"  itemprop="url">
<span itemprop="title"><% article_category.name %></span>
</a>＞</span>
<% article.subject %>
<% /loop -%></div>
<% /if -%>

カテゴリページ

カテゴリページにはTOP>カテゴリというパンくずリストをつけます。以下がマークアップ後のパンくずリストのHTMLです。

<% if:page_name eq 'category' -%>
<div class="crumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<% blog.page_url %>"  itemprop="url"><span itemprop="title">TOP</span></a>＞
</span>
<% category.name %>
</div>
<% /if -%>

過去ログページ

過去ログページにはTOP>xxxx年yy月というパンくずリストをつけます。過去ログページには本来月以外に日付け指定のページもあるのですが、日付を取る方法がなさそうなので月指定のページのみリストをつけます。以下がマークアップ後のパンくずリストのHTMLです。

<% if:page_name eq 'archive' -%>
<% if:archive_page_name eq 'month' -%>
<div class="crumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<% blog.page_url %>" itemprop="url"><span itemprop="title">TOP</span></a>＞
</span>
<% archive.createstamp | date_format("%Y年%m月") %>
</div>
<% /if -%>
<% /if -%>

タグページ

タグページにはTOP>タグ名というパンくずリストをつけます。タグページは全体HTMLの編集です。以下がマークアップ後のパンくずリストのHTMLです。

<% if:page_name eq 'tag' -%>
<div class="crumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<% blog.page_url %>"  itemprop="url"><span itemprop="title">TOP</span></a>＞
</span>
<% tag.word | html %>
</div>
<% /if -%>

確認

以上で記事、カテゴリ、過去ログ、タグページにパンくずリストがつきました。各ページの表示が問題なければ、最後に以下のページで正しくマークアップされているかどうか確認しましょう。

Strucuted Data Testing Tool

BreadCrumbのところが問題なければ大丈夫です。

変更したHTML

今回変更したHTMLを以下に公開しています。revisionを見ると変更した箇所がわかりやすいかと思います。