ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  SEO 投稿者:kei

実装3分でクリック率UP!Google検索結果にパンくずリストを正しく表示する方法

こんにちは。keiです。
今回は、パンくずリストをGoogleの検索結果に表示する方法をご紹介したいと思います。

パンくずリストとは

Wikipediaの説明は以下のようになっています。

パンくずリスト(breadcrumb list)は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

ユーザの利便性向上のためのナビであるパンくずリストですが、実は、SEOの観点からも効果的な実装であるといえます。
大きなメリットは以下の2点です。

  • サイトのリンク構造の最適化
  • 内部リンク数の増大

パンくずリストはGoogleの検索結果に反映される

2009年11月以降、Googleの検索結果には、URLの代わりにパンくずリストが表示されるようになっています。元記事はこちら
定量的なデータはありませんが、URLよりパンくずリストの方がクリック率が上がるような気がします。特に、長かったり複雑だったりするURLであればなおさらではないでしょうか。

ランサーズのページのGoogle検索結果

ランサーズのページのGoogle検索結果

パンくずリストの実装は、ulやdiv,span等を利用して記述するのが一般的ですが、
実装すれば必ずしもGoogleに認識してもらえるというわけでもないようです。
通常の実装では、以下の様な懸念があります。

  • 認識が不安定で検索結果から消えることがある
  • Googleボットがサイト構造を把握しにくい
  • 区切り文字を「>」以外にしていると認識されにくい

Googleに正しくパンくずリストを認識してもらうには?

先に挙げた懸念に対する解決策として、Microdataを用いて、Googleにパンくずリストの内容を的確に伝える方法があります。
Microdataとは、HTML文書にメタ情報を付与することができるHTML5の仕様です。
身近な例でいうと、Googleの検索結果での食べログの店舗情報がそれにあたります。
評価の★の数やレビュー数は、Microdataでマークアップされた情報をGoogleボットが解釈して表示しています。

私が大好きな鎌倉の海鮮料理屋さんの食べログ検索結果

私が大好きな鎌倉の海鮮料理屋さんの食べログ検索結果

Microdataパンくずリストの実装方法

例として、ランサーズでの実装方法を以下に示します。

    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="/" itemprop="url">
            	<span itemprop="title">トップページ</span>
            </a>&nbsp;&gt; 
    </span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="/work/search/design" itemprop="url">
            	<span itemprop="title">デザイン・クリエイター</span>
            </a>&nbsp;&gt; 
    </span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="/work/search/design/logo" itemprop="url">
            	<span itemprop="title">ロゴ</span>
            </a>&nbsp;&gt; 
    </span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        Lancers 「激速会」 のロゴ作成の仕事        
    </span>

ポイントは以下の3点です。

  • spanタグ内に「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」を追加
  • aタグ内に「itemprop=”url”」を追加
  • アンカーテキストを「itemprop=”title”」を追加したspanで囲う

ランサーズはCakePHPで開発されていますが、今月からCakePHPを始めたエンジニアが3分程で実装できました。
配列にパンくず要素を入れて、for文で上記HTML出力を繰り返すだけです。

実装したHTMLは、Googleのリッチスニペットテストツールで、その妥当性を確認できます。

おわりに

SEO効果を見越したパンくずリストの正しい実装方法をご紹介させて頂きました。
Googleは、今後、セマンティック検索を強化していくと公表しています。
(参考:Googleのセマンティック検索、Knowledge Graphが全世界に拡大)

魅力的なコンテンツ作成と共に、サイトの論理構造を的確に伝える実装も意識していきたいと思います。

ランサーズでは鎌倉でランサーズを開発するWebエンジニア・デザイナーを募集しております。
くわしくは募集要項をご参照下さい。

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
サービスリードエンジニア
テックリード(アーキテクト)
フロントエンドエンジニア
サーバーサイドエンジニア
業務エンジニア(社内システム基盤・基幹システム)

【インターン・学生バイト】
19新卒対象サマーインターン
エンジニアインターン

その他採用情報

関連記事

ランサーズを完全HTTPS化へ移行するまでの軌跡。常時SSL(AOSSL)化を目指して。

Intro こんばんは。 開発部の 神庭(godgarden)です。 この度、よりランサーズを安心安全に利用してもらうためサービス全体を完全HTTPS化しました。 ランサーズではこれまで、決済ページや、ID、パスワード入力ページなどの機密性が高いページに限り、 …

thumbnail
SEOフレンドリーな無限スクロールの実装方法

飲み物は常温派のota(@purratto)です。自動販売機で常温のものも販売してくれればいいのになあ、と常々思っています。 ランサーズストアでSEOフレンドリーな無限スクロールをjQueryで実装しました。 サンプル向けに一部修正したコードを公開します。参考 …

thumbnail
エンジニアでも必ずチェックしておきたい『開発に役立つSEOブログまとめ』

こんにちは! ランサーズの開発部でエンジニアをしております、神庭(かんば)です。 本日はSEOについてです! ところで、”SEOはエンジニアにはあまり関係ない技術だと思ってたりしませんか?” (SEOに興味を持つまでは、私は思ってました…) 「デー …