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

ITかあさん

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

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>
この場合liタグがよろしくないようで、liは互いに並列な関係なので、階層構造を説明するのに適切ではないのだそうです。

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って何よ

HTML5で、文書の中にメタデータを埋め込むための

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

<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>

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

SEOにどの程度効果があるかは分かりませんが、HTML5でマークアップしたサイトのパンクズについてはMicrodataを使ってみようかと思います。
HTML5以外のマークアップについてはliなどの余計なタグで囲わずに>記号をつかってマークアップしたいと思います。
初夏のJavaScript祭 in サーキュレーションビル ForPro