パンくずリストをリッチスニペットで表現してみた!

パンくずリストをリッチスニペットで表現してみた!

パン屋にたくさんのパンが焼いてあり、後ろで男性がパンを焼いている姿も映っている画像

 

「おいしそうなパンがたくさん・・」

 

「パンくずリスト」は、誰でも一番制約なしに作成できるのでリッチスニペットの練習に最適です。もし試したことがないのなら「パンくずリスト」で練習してみてはいかがでしょうか?

 

 

リッチスニペットで「パンくずリスト」を作るための もくじ

 

 

 

○誰でも一番制約なしに作成できるのが「パンくずリスト」

 

○リッチスニペットで「パンくずリスト」を具体的に記載してみる
  ・リッチスニペットの中身をよく見て、基本的なつくりを理解する

 

○最終チェック・・めちゃ簡単な構造化データテストツールの使い方

 

 

誰でも一番制約なしに作成できるのが「パンくずリスト」

 

 

 

平成26年4月19日

 

 

 

リッチスニペットは限られた分野
のみサポートされていますが、
誰でも一番制約なしに作成
できるのが「パンくずリスト」です

 

リッチスニペットにパンくずリストを
組み込んだら下の画像のように
検索結果にパンくずリストが表示
されるようになります。

 

 

(「パンくずリスト」を組み込んだ検索結果)
構造化データにパンくずリストを入力している検索結果の例

 

 

制約なく作成できるパンくずリスト
ですが、リッチスニペットの入力で
広く使われるスキーマ(schema.org)
という言語で対応できない特殊な
リッチスニペットでもあります。

 

ですので、パンくずリストについては
「microdata」という言語で入力して
ゆきます。

 

単純でわかりやすいので、まず
リッチスニペットの構造と入力は
「パンくずリスト」で覚えるのがいい
と思います。

 

さっそく具体的に、このページの
パンくずリストを例にして、リッチ
スニペットをどのように記載して
ゆけばよいかご説明します。

 

 

 

リッチスニペットで「パンくずリスト」を具体的に記載してみる

 

 

 

まずは、当ページの構造を確認します。

 

1.「ホームページ」
2.「サイトの充実」
3.「パンくずリストをリッチスニペットで表現してみた!」

 

の3階層になっています。

 

 

[1階層(トップページ)] http://homepagenotukurikata.com/
          トップページ

 

[2階層] http://homepagenotukurikata.com/enhancement-site/
          サイトの充実

 

[3階層] http://homepagenotukurikata.com/enhancement-site/breadcrumb.html
          パンくずリストをリッチスニペットで表現してみた!

 

 

これをパンくずリストで表すと
下の通りになります

 

パンくずリストの画像

 

 

 

リッチスニペットの中身をよく見て、基本的なつくりを理解する

 

 

 

このページのパンくずリストを検索結果に表示
するためには、下の記載を行います。

 

1  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
2   <a href="http://homepagenotukurikata.com/" itemprop="url">
3   <span itemprop="title">トップページ</span>
4   </a> >
5  </div>
6  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
7  <a href="http://homepagenotukurikata.com/enhancement-site/"
   itemprop="url">
8  <span itemprop="title">サイトの充実</span> </a>
9  </div> >
10 <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
11 <a href="http://homepagenotukurikata.com/enhancement-site/
   breadcrumb.html "itemprop="url">
12 <span itemprop="title">パンくずリストをリッチスニペットで
   表現してみた!</span> </a>
13 </div>

 

※実際は改行せずに続けて記載します

 

   ↓↓↓

 

上記の記載は画面上でこのように表示されます

 

> >

 

 

分解してご説明します。
まず大きな枠の説明です

 

 

<1行目と5行目>

 

<div></div>で囲まれた部分の言語の指定と、どのタイプ
のリッチスニペットを使用するかの指定をします。

 

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  ・
  ・
</div>

 

 

○<div itemscope itemtype=・・・で、「リッチスニペットを使います」
  ということを示します。

 

緑色の部分は、使用する言語の指定です。
 「http://data-vocabulary.org」は「microdata」を使うことを意味します。

 

 例えば、緑色の部分に「http://schema.org」と記載すると
 「スキーマ」という言語を使用することを宣言することになります。

 

赤色の部分で「Breadcrumb」=「パンくずリスト」を作ることを指定しています。

 

 赤色の部分に「Review」と記載すれば「レビュー」。
 「Person」と記載すれば「人物」のリッチスニペットを記載することになります。

 

googleウェブマスターツールの説明を
ぜひご覧ください。
リッチ スニペットと構造化データについて

 

 

 

 

<2行目から4行目>

 

次に<div></div>で囲まれた部分の
中身をご説明します。

 

2〜4行目を、リッチスニペットの要素を入れない記載で表すと次のようになります。

 

<a href="http://homepagenotukurikata.com/">トップページ</a>

 

 

ホームページ作成の経験がある人ならご存知の通り
「トップページへのリンク」を表す命令になります。

 

 

<a href="http://homepagenotukurikata.com/" itemprop="url">
<span itemprop="title">トップページ</span>
</a> >

 

 

トップページへのリンクに青色で示した「url」のitemprop属性
緑色で示した「タイトル」のitemprop属性を追加しています。

 

itemprop属性で使用するプロパティは下表の通りです。

 

「child」についてはここでは使いませんでしたが、同じページを表す
パンくずリストが2つ存在する場合などに使用します。

 

 

<itemprop属性で使用するプロパティ>

プロパティ 説明
title パンくずのタイトルです。
url パンくずの URL です。
child 階層内での次のパンくずです。child には別のパンくずアイテムを指定する必要があります。

※googleウェブマスターツールより抜粋

 

 

なお、6行目から13行目までは
1〜5行目の繰り返しをしている
だけです。

 

分解してよく見ると分かりやすい
ですよね。

 

 

 

最終チェック・・めちゃ簡単な構造化データテストツールの使い方

 

 

URLを入力してボタンを押すだけ

 

 

 

入力したデータの記述が正しいか
「構造化データテストツール」で
テストしてみました。

 

 

構造化データテストツールでリッチスニペットの記載が正しいかテストしている画面

 

 

入力はとても簡単で、画面に
リッチスニペットを記載したページ
のURLを入力(コピー)して、
「プレビュー」のボタンを押すだけ
です。
(ページのアップロードはしておいてください)

 

記述に間違いなければ、下の
ような画面が出てきます。

 

 

構造化データテストツールでリッチスニペットの記載が正しいかテストした画面

 

 

構造化データテストツールでリッチスニペットの記載が正しいかテストした画面

 

 

   ↓↓↓

 

 

 

なんと!平成26年4月25日(わずか6日後)
にパンくずリストが表示されていました。
予想外に早く表示されていたことに感激
してしまいました。。

 

 

パンすぐリストがわずか6日で表示されました。恐るべしgoogle

 

 

 

 

 

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

 

 

よく読まれる関連ページ

 

  ↓↓一番左をクリックしていくと、順にサイトを見ることができます

進化しているデータハイライターを、あなたにもぜひ体験してほしいへのリンク画像

進化しているデータハイライターを、あなたにもぜひ体験してほしい

SEOに効果あり!404エラーページのカスタマイズへのリンク画像

SEOに効果あり!404エラーページのカスタマイズ

これで安心!URLエラーの大半は簡単に処理できる。修正方法を解説へのリンク画像

これで安心!URLエラーの大半は簡単に処理できる。修正方法を解説

クロールの効率性を追求!robots.txtへのリンク画像

クロールの効率性を追求!robots.txt

 

 

 


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです



パンくずリストをリッチスニペットで表現してみた!関連ページ

絶対に間違いのないSEO最新マニュアル
全13工程でサイト改善!「検索エンジン最適化スターターガイド」
3秒でチェック!!形式的SEO対策をあなたにこっそり教えます
アクセスアップのためにやっちゃった失敗をお教えします
被リンクについて最低限知っておくべき10のポイント
5分でわかる!具体的相互リンクの手順
サイト公開するなら、最低限canonicalタグを使いこなせ!
超簡単!重複コンテンツ整理のための.htaccess設定方法
Googleが伝える、適切な「alt属性の入力」のススメ
あなたは外部Javascriptを利用する目的を知っていますか?
よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う
301リダイレクトで個別ページのURLを整理できる
みんなに伝えたい!正しいサイトマップの「作り方」「送り方」
クリック率アップ!リッチスニペット導入でライバルサイトに差をつけろ
お手軽にリッチスニペット!構造化マークアップ支援ツール
進化しているデータハイライターを、あなたにもぜひ体験してほしい
とにかく目立つ!リッチスニペット著者情報の作り方
レシピを出すなら試したい!リッチスニペットを使った目立つ検索表示
rel=”nofollow”使いこなし術を解説!正しい使い方をご存知?
これで安心!URLエラーの大半は簡単に処理できる。修正方法を解説
エラーページを処理する5つの方法
SEOに効果あり!404エラーページのカスタマイズ
クロールの効率性を追求!robots.txt
よくわかる!noindexメタタグの正しい使い方
たった1分で劇的に改善!ページスピード高速化の方法
3行入力するだけ!誰でもできる圧縮によるサイト高速化
もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化
正しい対処の仕方をご存知ですか?放置できないソフト404エラー
鳥肌が立つほどカンタン!1クリックで終わる表示速度高速化
「誘導ページ」でペナルティを受けないための5つのチェックポイント
あなたのサイトは「モバイルフレンドリー」ですか?
rel="canonical"をもっともっと知りたい!
ホームページ、ブログの削除のしかた

 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ