検索エンジンにやさしいパンくずリストのコーディング
ってなんだ。
HTMLに意味を。
こんなHTMLがあったとします。
HTML
- <p>kantenna</p>
シンプルでとてもコーディングしやすいですが、kantennaがどういう意味を持つのか、何を表しているのかがまったくわかりません。 これに意味を持たせてやろうじゃないかということで作られたのがRDFa、maicroformats、microdataという仕様です。
RDFa、maicroformats、microdata
maicroformatsではclass属性やrel属性を利用してマークアップするので、これまでと違和感なく使えるのですが、 拡張性がなくCSSやJavascriptでも利用することから歪なマークアップになったりいまいち使いにくい。
ここでW3Cさんが登場してRDFaというものを標準化しました。業界では一目置かれる存在であるW3Cさんが取り組んでいるので 信頼性が高いのですが、いかんせん名前空間の宣言が必要だったり冗長すぎてコーディングしたくないレベル。
こいつのペースに巻き込まれると事がどんどんややこしくなりやがる。
結局どちらも使いづらいよねってことで、RDFaよりシンプルでmaicroformatsより拡張性があるものをと いうことでできたのがmicrodata。ようやく使えそうな仕様ができたところで、google、yahoo、msnの 検索大手が手を組んでmicrodataを利用したschema.orgを策定しました。
引用
- 民明書房刊『幕が上がらなかったウェブ新時代』より
microdataは名前空間的なものを作れるので、なんなら自分のアプリケーション用に定義することも可能はずです。 DOM APIもあるようなので今後使うケースもあるかもしれませんね。
ってことでschema.orgを利用してマークアップするとどうなるかというと
HTML
- <div itemscope itemtype="http://www.schema.org/BookStore">
- <p class="shop" itemprop="name">kantenna</p>
- </div>
これでkantennaが実は本屋(BookStore)の名前(name)ということが検索エンジンに伝わるようになります。 同じようにschema.orgではパンくずリストということを検索エンジンに伝えるWebPage というitemtypeにbreadcrumbというプロパティが存在しています。
それを利用するとパンくずリストのマークアップは
HTML
- <body itemscope itemtype="http://schema.org/WebPage">
- <p itemprop="breadcrumb"><a href="/">HOME</a> > <a href="/pg/">プログラム覚書</a></p>
- </body>
のようになります。他にも意味を与えることができるitemtypeがありますがFull Hierarchyが、 とてもわかりやすく、探しやすく作られているので眺めてみるといいかと思います。
このくらいわかりやすくしてくれると使いやすいですね。
問題はこれがHTML5で利用できる属性ってことだけど、googleは microformats、RDFaも認識してくれるようなので、どれを利用してもよさそうです。
参照サイト
SERPs
当然ながら、これは順位をあげるものではありませんので、変な営業にひっかからないように気をつけてください。 この期に及んで内部施策、外部施策とか言ってくる業者とは一切関わらないようにしましょう。
彼らは今お金が欲しいだけなんです。
あなたの事業の強みを理解してコンテンツの企画を提案してくる業者であれば話を聞く価値があります。
と言っても、たぶんこのサイトを見てるのはそういう層じゃないんだよな。。。
iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)
作者:たにぐちまこと | 価格:￥ 2,499
| 投稿日 | 2012年1月27日 04:04 |
|---|---|
| カテゴリ | HTML/CSS |
| タグ | 言語仕様 |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1260 |