-
-
Labels: SEO
実装3分でクリック率UP!Google検索結果にパンくずリストを正しく表示する方法
こんにちは。keiです。
今回は、パンくずリストをGoogleの検索結果に表示する方法をご紹介したいと思います。
パンくずリストとは
Wikipediaの説明は以下のようになっています。
パンくずリスト(breadcrumb list)は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
ユーザの利便性向上のためのナビであるパンくずリストですが、実は、SEOの観点からも効果的な実装であるといえます。
大きなメリットは以下の2点です。
- サイトのリンク構造の最適化
- 内部リンク数の増大
パンくずリストはGoogleの検索結果に反映される
2009年11月以降、Googleの検索結果には、URLの代わりにパンくずリストが表示されるようになっています。元記事はこちら
定量的なデータはありませんが、URLよりパンくずリストの方がクリック率が上がるような気がします。特に、長かったり複雑だったりするURLであればなおさらではないでしょうか。
パンくずリストの実装は、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> > </span> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/work/search/design" itemprop="url"> <span itemprop="title">デザイン・クリエイター</span> </a> > </span> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/work/search/design/logo" itemprop="url"> <span itemprop="title">ロゴ</span> </a> > </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よりご応募ください。
【中途採用】
フロントエンドエンジニア
サーバーサイドエンジニア
コーポレートエンジニア
SREエンジニア
【新卒採用・その他】
21・22新卒
その他採用情報
関連記事
-
-
エンジニアでも必ずチェックしておきたい『開発に役立つSEOブログまとめ』
こんにちは! ランサーズの開発部でエンジニアをしております、神庭(かんば)です。 本日はSEOについてです! ところで、”SEOはエンジニアにはあまり関係ない技術だと思ってたりしませんか?” (SEOに興味を持つまでは、私は思ってました…) 「デー …
-
-
Google検索結果のサイトリンク検索ボックスの表示・カスタマイズ方法
こんにちは! 新年あけましておめでとうございます。 開発部の 神庭(godgarden)です。 普段はプラットフォームの開発と、SEOを担当しています。 ところで、少し前の話題になってしまいますが、Google検索をした際に特定のサイトで検索結果ページのタイト …
-
-
ランサーズを完全HTTPS化へ移行するまでの軌跡。常時SSL(AOSSL)化を目指して。
Intro こんばんは。 開発部の 神庭(godgarden)です。 この度、よりランサーズを安心安全に利用してもらうためサービス全体を完全HTTPS化しました。 ランサーズではこれまで、決済ページや、ID、パスワード入力ページなどの機密性が高いページに限り、 …