オンラインRPGのプレイ日記や攻略メインのブログです。稀にWeb製作記事も更新。

2016年11月24日 狩場レイドが完了したので次は製作図/素材/SS関連を修正します。

グーグル検索結果にパンくずリストを表示させたらアクセス数が10%増えた

2012年3月21日 【Web製作メモ
アクセスアップ

アクセスアップ

■目次
  1. パンくずリストが持つ意味
  2. 日本語表記できるメリット
  3. 検索結果をこちら側で調整する方法
  4. パンくずリストを二つ並べたらどちらを優先するのか

意外と知られていないSEOの一つですが、グーグル検索結果のURL欄にパンくずリストをこちらの任意で表示させることができます。パンくずリストの存在はだいぶ認知されてきましたが、せっかくなのでもう一手間加えてさらなるユーザビリティの向上を目指します。

パンくずリストとは?

童話『ヘンゼルとグレーテル』で迷子にならないようにパンくずを通り道にこぼしていったのが元となります。神話の『ミノタウロス』の話にもある糸を体に巻いてダンジョンに潜っていった話も同じですね。ウェブ上では現在のページが位置する階層を分かりやすくするものです。

トップページ > PCで動くエミュレータ > プレイステーション > ePSXe

ちなみに、パンくずを英語でいうとbradcrumbsになりますが、それだと実際のパンくずの意味もあるのでTopic Pathのほうが通じやすかったりします。最近ではbreadcrumbsも認知されつつあるけどね。

サイトのページビューを上げつつユーザービリティも上げるテクニックが、記事の下に表示する『関連記事』と『パンくずリスト』なので、ぜひとも導入しましょう。

記事を一番下まで読んでくれた人は、大まかに言ってしまえばあなたのファンです。賛同であれ批判であれ興味を持ってくれたってことだからね。他のページでも興味をもってもらえる可能性が高いです。

アクセス解析の結果をまとめると、関連記事やパンくずリストのクリック率はヒートマップが真っ赤になるほど実証されています。

逆に、ヘッダーにあるナビゲーションリンクは薄黄色程度なので、パンくずリストも記事の上よりも下に配置したほうが効果的。ヘッダーはサイト全体に関するリンクで、記事下には内容と関連するリンクを置くのがベストかと思われます。

本題に入る前の前置きが長いのが悪い癖ですね。
つい書きたいこといっぱい出てきちゃって…すんません。

日本語表記できるメリット

本題はアクセスアップを狙う方法でしたね。パンくずリストを表示させる方法ですがhtmlタグを入力するだけでいいんです。

つい最近、1~2年前ぐらいだったかな。Yahoo!とGoogleがmicrodataに対応しました。rel属性みたいなものでタグに情報を与えます。このアンカーリンクはパンくずリストの意味を持っていて、アドレスはこれ、タイトルはこう、と指定できるわけです。

その前に、検索結果がどう変わるかを見てみましょう。スクリーンショット取るの忘れてたのでhtmlで記入しますが実際の表示とは若干違いますのでご了承ください。

標準の状態
ePSXeの紹介
logu.jp/epsxe.html – キャッシュ
2010年12月22日 – ePSXeはPSのエミュの中で一番完成度が高いです。動き始める … 今でも更新されていますのでさらに完璧に近いエミュとなるでしょう。1.7.0からは「zlib1.dll」(左クリックでDL)も別途必要になりました、ePSXeと同じフォルダに入れてください。
パンくずリストを表示する
ePSXeの紹介
logu.jp > PCで動くエミュレータ > プレイステーション – キャッシュ
2010年12月22日 – ePSXeはPSのエミュの中で一番完成度が高いです。動き始める … 今でも更新されていますのでさらに完璧に近いエミュとなるでしょう。1.7.0からは「zlib1.dll」(左クリックでDL)も別途必要になりました、ePSXeと同じフォルダに入れてください。

URLがドメインだけの表記になりカテゴリーが表れました。検索した人がページの内容を知る上でアドレスも一応は参考にしていますが、日本語でカテゴリーを表記できるパンくずリストには敵いません。

さらにリンクにもなっているので同カテゴリーの他記事を見たくなった人はクリックしてくれるかもしれません。

検索結果をこちら側で調整する方法

表記方法は各々で違うと思うので共通する部分のみ参考にしてください。microdataには色々ありますが今回はパンくずリストのみ。

横スクロールするの面倒だと思うので、取りあえずメモ帳にコピペしてから見たほうがいいかもしれません
<ol id="topicpath">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://logu.jp/" itemprop="url"><span itemprop="title">ホーム</span></a></li>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://logu.jp/about/emulators-pc/" itemprop="url"><span itemprop="title">PC上で動くエミュレータ</span></a></li>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://logu.jp/playstation-pc.html" itemprop="url"><span itemprop="title">プレイステーション</span></a></li>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><strong itemprop="title">ePSXe</strong></li>
</ol>
注意点
  1. olで丸ごと指定できないのでli、p、divなんでもいいけどリンクを一つずつ包み長ったらしいitemscopeとbreadcrumbを記入。
  2. アンカーリンクでは「これがURLだよ」とitemprop urlを記入する。(これぐらいは指定しなくても認識して欲しいものだがw)
  3. カテゴリー名を教えるためにspanなどで包み込みitemprop titleを指定する。

手動で全部のページを修正しようと思ったら面倒なので、WordPressならプラグイン利用して自動でやってくれます。

Breadcrumb NavXTというプラグインを使ってる方ならチョー楽にできます。ここ参考に。Breadcrumb NavXTを使ったパンくずリストの構造化マークアップ

カテゴリーのままでもいいですが、固定ページなどで記事を分類してあるならそちらのアドレスを入れたほうが効果的です。やはり手動には敵わないので、暇があれば一つずつ修正していきましょう。titleやdescriptionがまだまだ現役で検索結果では重要なようにね。

パンくずリストを二つ並べたらどちらを優先するのか

プラグインが自動でやってくれるパンくずリストと、手動で作成した方とどちらを優先してくれるのか気になったので実験してみましたが、結果は前と後でくっつけて一つのリストとして見なされるです。

ulやolタグの全体指定でできないですからね。アンカーテキストを一つずつ、ロボットとしては上から順番に全て繋がったリストだと認識されてしまいます。

ホーム > PCで動くエミュレータ > プレイステーション > ePSXe > ホーム > ゲーム機 > 家庭用ゲーム機 > プレイステーション

前者が手動で作ったパンくずリストで、後者がプラグインによる自動作成したパンくずリストです。検索結果には後ろ二つのみ表示されるので家庭用ゲーム機 > プレイステーションとなりました。

パンくずリストを記事の下に置いた弊害がありましたね。取りあえずプラグインに任せて、時間があるときに手動作成する場合は、プラグイン表記をヘッダーにでも入力しておいたほうがいいです。

記事に対してコメントする

投稿ルール
  • 記事内容に関することであれば特に制限はありません。
  • コメントに画像を添付することも可能です。補足説明として使いたいときなど。
  • 投稿ボタンを押すとすぐにページ反映されます。
    (URLを含むコメントは安全性確保のためストックに保留されます。)

名前 (Name) ※無記名にすると「匿名さん」になります

内容 (Contents)

10MB以下のJPG/GIF/PNG形式の画像をアップロードできます。

  1. ホーム
  2. 雑記
  3. Web製作メモ
  4. グーグル検索結果にパンくずリストを表示させたらアクセス数が10%増えた
サイトに関するご要望や意見はこちらから

グーグル検索結果にパンくずリストを表示させたらアクセス数が10%増えた

2012年3月21日 20:00

▲ページの先頭へ戻る