Microdata を使ってみよう。サンプルソースで学ぶ Microdata
HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど
ちょっとしたメモ - HTML5＋Microdataへの全面移行
この春頃からMicrodataを試してみたりHTML5にかかわる機会が増えてきたので、いずれ実施しようと考えていたサイト全ページの書き換えを敢行しました。スタイルシートはごく一部を除いてほとんど従来のまま。ページ自身のメタデータほかの構造化データは、Schema.org語彙を中心にして表現しています。 Microdataの記述 今回使ったMicrodataの一部を紹介しておきます。Microdataは、文書内に記述されたものごとの特徴を表す名前-値の対（プロパティ）のグループをアイテムと呼び、基本単位として扱います。 アイテムと型 Microdataの場合、まず最初にアイテムの範囲（スコープ）をitemscope属性で示します。文書のメタデータを表現したいので、html要素にこの属性を加えて全体を一つのアイテムとします（itemscopeは真偽値属性で属性名のみを記述しますが、XHTML構
フォトライフ記法 | tech - 氾濫原
写真を貼るときにはてなフォトライフの記法を使って貼っているが、せっかくなので microdata で Photograph として認識されるように展開フォーマットを変えた。Google が解釈するようになるといいなー <span itemscope itemtype="http://schema.org/Photograph"> <a href="/2011/12/03/1" class="hatena-fotolife" itemprop="url"> <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/c/cho45/20111127/20111127131949.jpg" alt="photo" class="hatena-fotolife" itemprop="image"> </a> </span> こんな感じにしてある
Microdata + schema.org を実際に使ってみる
schema.org は Google、Microsoft (Bing)、Yahoo! という Web 検索の大手 3 社が共同で取り組んでいる試みで、より構造化されたマークアップのための共有の語彙集 (vocabulary) を提供しようというものです。この schema.org の語彙を利用して、実際のマークアップに Microdata を追加する具体例をいくつか考えてみました。 schema.org の アイテム型 (item type) は 階層 (hierarchy) のかたちで定義されています。型ごとに独自の プロパティ が定義され、上位の型のプロパティは下位の型に引き継がれます。最上位は Thing という汎用の型で、name、url、image、description というもっとも基本的なプロパティが定義されています。そしてその下に CreativeWork、Event、
DOM ECMAScripting
DOM 仕様書を読む前のガイドとして、DOM のおおまかな内容と ECMAScript（JavaScript）によるごく簡単な例文を提供します。DOM Level 1 から Level 3 まで。DOM Core 入門 (1)DOM Core 入門 (2)DOM Events 入門DOM Traversal 入門DOM Range 入門DOM Load and Save 入門DOM Validation 入門DOM XPath 入門DOM Views、DOM Style Sheets、DOM CSS 関連。CSSOM 入門 (1)CSSOM 入門 (2)CSSOM View 入門DOM HTML 関連。DOM HTML 入門 (1)DOM HTML 入門 (2)私的翻訳。DOM FAQ 日本語訳DOM Requirements 日本語訳（途中）DOM Level 3 Load and Sa
Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応
Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応 ネタ元:Google、パンくずリストでのURL表示にマークアップを利用可能に | 海外SEO情報ブログ・メルマガ これまでWEBサイト所有者が制御できなかったGoogle の検索結果に表示されるパンくずリストがmicrodataとRDFaで制御が可能になったようです。 パンくずリストは次のように検索結果のURL中に表示されます。 microdataでの記述 HTML5 で策定されているmicrodataは、特定の種類の情報（レビュー、人物、イベントなど）をラベル付けする方法の 1 つです。 <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses" ite
HTML5と関連仕様、言語リファレンスが公開 | Web標準Blog | ミツエーリンクス
HTML WGより3月4日付で、新しいHTML5の草案を含めた6つの文書が公開されました。 HTML5 HTML Canvas 2D Context HTML Microdata HTML+RDFa HTML: The Markup Language HTML5 differences from HTML4 HTML5 differences from HTML4の日本語訳も、いつもの通り更新しています。 HTML5 における HTML4 からの変更点 変更点 昨年の草案からの変更点から、いくつか気になるものを挙げてみます。 ひとつは、会話文を表現するdialog要素が削除されました。専用のマークアップを用意する必要性や、表現力に乏しいといった懸念が寄せられたことによります。 また、figure要素とdetails要素について内容モデルの変更がありました。これらの要素はキャプションにlab
W3CのHTML5仕様が、Core、Vocaburary、Microdataなど5つに分裂
HTML文書の中にメタデータを埋め込むための「Microdata」について、以前の記事「HTML5のMicrodataとは何か？」で紹介しました。このとき、W3CのHTML5を議論するグループでは、HTML5からMicrodataの仕様を分離すべきではないかと提案されていました。 この提案に対して先日投票が行われ、MicrodataはHTML5から分離されることが決定しました。また、そのほかにもHTML5からの分離が行われ、エディタのIan Hickson氏はHTML5の仕様を5つのドキュメントに分ける作業を行ったことを1月9日付けのメールで明らかにしました。 HTML5は新たに以下の5つに分けられています。 HTML5 Vocabulary HTML5 Core HTML5 Microdata HTML5 2D Context HTML5 Communications そもそもモジュラー
HTML5のMicrodataとは何か？
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。 Microdataとは、文書の内容に対して機械に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
IBM Developer
Prepan | プログラミング未経験者・初心者の方々向けに副業や転職、フリーランスへと繋がるプログラミングスクール選びや独学に役立つ情報をお伝えしています。
HTML5 Microdata Templates by Freebase