【パンクズ超重要】Googleに認識されるパンクズとされないパンクズ ITかあさん

【パンクズ超重要】Googleに認識されるパンクズとされないパンクズ

Googleに認識されるパンクズとされないパンクズ

久々にコーディングの仕事を本格的にしているのですが、パンクズの重要性が気になる今日このごろ。
Googleの検索エンジンのロボットにパンクズとして認識されるパンクズと、そうでないパンクズがあることを割とさっき知りました。

Googleのロボットに認識されないパンクズ

<ul>
<li><a href="/">ITかあさん</a></li>
<li><a href="/archives/category/html5マークアップ術">HTML5マークアップ術</a></li>
<li>HTML5×CSS3ベースのPC版スマートフォン版共通テンプレート  </li>
</ul>

Googleのロボットに認識されるパンクズ

パンくずリスト – ウェブマスター ツール ヘルプ

<a href="http://www.example.com/dresses">洋服</a> ›
<a href="http://www.example.com/dresses/real">ドレス</a> ›
<a href="http://www.example.com/dresses/real/green">緑のドレス</a>

たったこれだけのことなのですが、この大なり記号を使っていることも大事なのだとか。たしかに『大なり記号』として考えれば階層構造としてとてもしっくりきます。

HTML5のMicrodataを利用したパンクズ

いやいや、Microdataって何よ

イヤ、さっぱり分からん。

<div itemscope><p>My Name Is<span itemprop="name">ITかあさん</span>です。
</p></div>

このようにマークアップすると、ITかあさんは名前である　と検索エンジンのロボットが認識してくれる、とのことですが、

と、いうことでしょうか。(自分で書いていても意味が分からなくなりました)
まるでXMLみたいですね。

Microdataを利用したパンクズのマークアップ

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">洋服</span>
</a> ›  </div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
  <span itemprop="title">ドレス</span>
</a> ›  </div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
  <span itemprop="title">緑のドレス</span>
</a>  </div>

なるほど、分かったような、分からないような・・・