> > FC2ブログにパンくずリストを付けてみましょう > > FC2ブログにパンくずリストを付けてみましょう

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログにパンくずリストを付けてみましょう

106124.jpg

パンくずリストとは?


サイト内で閲覧者が迷子にならないようにするためのリストのことです。
名前の由来は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードからです。(wikipedia)

大規模サイトでは必ずありますが、小規模なブログでは意味が無いかというとそうでもないです。
閲覧者が迷子にならない以外にもgoogleなどの検索エンジンからも意味があります。
googleもウェブマスターツールでページを作っているのをみると推奨しているのが分かります。

是非あなたのブログにもパンくずリストを付けてみましょう。

ブログにパンくずリストを付けよう


基本的には初心者でもできる簡単FC2ブログの作り方で書かれている通りでいいと思いますが、googleの検索でかっこ良く載りたいと思うので少しmicrodata構造化マークアップをして見たいと思います。

kiji15_2.png

googleの検索でかっこ良くとは上の画像の赤線で引いたURLの事です。
一番下のは普通のURLですが、上2つはパンくずリストでサイト内の構造を示しています。
やはりパンくずリストをしている方が検索の上に出やすいような感じがします。

では、実際にこのブログでやってみたhtmlコードを載せます。
<!-- パンくずリスト -->
<!--not_index_area-->
<div class="pankuzu" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="TOPページへ" itemprop="url">目次</a> > <a href="<%topentry_category_link>" itemprop="url"><%topentry_category></a> > <span itemprop="title"><%sub_title></span>
<!--/topentry-->
<!--/permanent_area-->
<!--category_area-->
<a href="<%url>" title="TOPページへ" itemprop="url">目次</a> > <span itemprop="title"><%sub_title></span>
<!--/category_area-->
<!--search_area-->
<a href="<%url>" title="TOPページへ" itemprop="url">目次</a> > <span itemprop="title"><%sub_title> の検索結果</span>
<form action="./" method="get"><input type="text" size="20" name="q" value="" maxlength="200" class="ipt" /> <input type="submit" value="Search" class="search" /></form>
<!--/search_area-->
<!--date_area-->
<a href="<%url>" title="TOPページへ" itemprop="url">目次</a> > <span itemprop="title"><%now_year>年<%now_month>月</span>
<!--/date_area-->
<!--edit_area-->
<a href="<%url>" title="TOPページへ" itemprop="url">目次</a> > <span itemprop="title">修正画面</span>
<!--/edit_area-->
<!--tag_area-->
<a href="<%url>" title="TOPページへ" itemprop="url">目次</a> > <span itemprop="title"><%tag_word></span>
<!--/tag_area-->
</div>
<!--/not_index_area-->
<!-- パンくずリスト ここまで-->

ほとんど初心者でもできる簡単FC2ブログの作り方変わりませんが、microdata構造化マークアップを施しています。
記事の上に設置したかったので<!--topentry-->を探して上のコードを貼り付けました。
このテンプレートは<!--topentry-->が2つあったので記事の変数を探して貼り付けています。
.pankuzu {
font-size:14px;
text-align:left;
margin:0px 0px 0px 5px;}
.pankuzu {a:link{color:#0099cc}
.pankuzu {a:visited{color:#0099cc}

CSSはこのサイトのデザインに馴染むように色を変えました。
ご自分のブログデザインに合うようにCSSをいじって下さい。特に色を変えると馴染みますよ。

構造化データテストツールで確認


最後にgoogleのwebマスターツールにある構造化データテストツールで確認します。

kiji15_3.png

自分のブログのパンくずリストが出ているURLを入力して下の図のように出ていたらOKです。

kiji15_4.png

コメント


管理者のみに表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。