List of microdata - Baldanders.info
tag:Baldanders.info,2014-09-02:/tags
2014-09-02T09:00:00+00:00
バルトアンデルスは連続的な怪物,時間の怪物である。(ホルヘ・ルイス・ボルヘス 『幻獣辞典』より)
https://baldanders.info/images/avatar.jpg
https://baldanders.info/images/avatar.jpg
Microdata は machine-understandable ではない
tag:Baldanders.info,2014-09-02:/blog/000729/
2014-09-02T09:00:00+00:00
2014-09-02T09:00:00+00:00
長年(といっても10年足らずだけど)RDF を使ってたおかげで Semantic Web について考える際にはどうしても「主語-述語-目的語」の Triple で考える癖がついてしまってるのだが,その発想が Microdata の理解を妨げているらしいと気がついた。そこでちょっとアプローチを変えてみることにした。その上で RDF/RDFa と Microdata を比較・考察してみる。
Spiegel
/profile/
<p> 長年(といっても10年足らずだけど)RDF を使ってたおかげで Semantic Web について考える際にはどうしても「主語-述語-目的語」の Triple で考える癖がついてしまってるのだが,その発想が Microdata の理解を妨げているらしいと気がついた。 そこでちょっとアプローチを変えてみることにした。 その上で RDF/RDFa と Microdata を比較・考察してみる。 </p> <section> <h3>勝手に「Microdata 用語」</h3> <p> Microdata に関する色々なページを回ってみるが,体系的にきちんとした説明をしているところはほぼない。 「<a href="http://www.w3.org/TR/2013/NOTE-microdata-20131029/">W3C のドキュメント</a>を見ろ」と言われそうだが,こちらも「使い方」以上の説明がない。 (ところで Microdata に関する「勧告(Recommendation)」レベルのドキュメントってあるの?) </p><p> そこでこちらで勝手に「用語」を設定して整理してみることにする。 もちろんここで言う「用語」はこのページでしか通用しない。ゴメンペコン。 </p><p> Microdata を理解するには「オブジェクト指向(object-orientation)」で考えると分かりやすい。 また Microdata のデータ構造は HTML 記述の制約を受ける。 したがって Microdata による記述の範囲は,最大でもそのページの内部に限られる。 なぜなら Microdata は <a href="http://www.w3.org/DOM/">DOM(Document Object Model)</a>に組み込まれている(<a href="http://html5experts.jp/shumpei-shiraishi/1710/">予定</a>だ)からだ。 </p><p> <code>itemscope</code> 属性(値なし)をセットされた要素およびその子要素は item と呼ばれる。 item の type は <code>itemtype</code> 属性で指定する。 つまり item と type は is-a 関係である,と言える。 違う言い方をするなら, item は instance object で type は class object である,とも言える。 実際, <a href="http://schema.org/">schema.org</a> を見ると type 同士も is-a 関係による hierarchical 構造を持っているのがわかる。 (<span class="offrec">この辺は Semantic Web における <a href="http://www.w3.org/TR/owl-features/">ontology 研究</a>の成果かねぇ</span>) </p><ul> <li><a href="http://schema.org/docs/full.html">Full Hierarchy - schema.org</a> (<a href="http://schema-ja.appspot.com/docs/full.html">日本語訳</a>)</li> </ul><p> item 内では「名前-値」の組合せで構成された property を設置することができる。 property 名は item の type によって使える名前が決まっていて <code>itemprop</code> 属性で指定する。 property 値には literal 以外に item を指定することができる(したがって property 値は構造を持つ)。 property 値についても対応する property 名によって <q lang="en">expected type</q> が決められているが(他所のサイトの例示等を見る限り)強い制約ではないようである。 </p><p> item と property は常に has-a 関係である。 </p><p> item 自身には「名前」がない。 何故かというと Microdata には property 以外に item 同士を関連付ける手段がないため,<strong>識別(identification)</strong>のための「名前」は不要なのである。 (<code>itemref</code> 属性および <code>itemid</code> 属性については後述) </p><p> 大雑把な説明はここまで。 ここでいったん「用語」を整理しておこう。 </p> <figure> <table> <thead> <tr><th>用語</th><th>内容</th></tr> </thead> <tbody> <tr><td>item</td> <td>Microdata における instance object の単位</td></tr> <tr><td>type</td> <td>Microdata における class object の単位</td></tr> <tr><td>property</td> <td>item の内容を示す情報。「名前-値」の組合せ(連想配列)で表現する</td></tr> <tr><td>property 名</td><td>property の名前</td></tr> <tr><td>property 値</td><td>property の(名前に対する)値。 literal または item の表現をとる</td></tr> <tr><td>literal</td> <td>特定の書式を持った文字列表現(例:日付 "2014-09-02")</td></tr> <tr><td>is-a 関係</td> <td>両オブジェクトが「継承」関係であることを示す(例: He is-a man.)</td></tr> <tr><td>has-a 関係</td> <td>両オブジェクトが「包含」関係であることを示す(例: She has-a book.)</td></tr> <tr><td>application</td><td>Microdata を読み込み解釈(parse)し利用するプログラムまたはサービス。<br/>parser も application の一種</td></tr> </tbody> </table> <figcaption>勝手に「Microdata 用語」</figcaption> </figure> <p> こうしてみると, Microdata は(Microformats から fork した)RDFa よりも Microformats に近いと言える。 </p> </section> <section> <h3>itemref は property を include する</h3> <p> <code>itemref</code> 属性で ID(<code>id</code> 属性で<strong>指示(indication)</strong>する)を指定すると,対象の ID で示された要素(およびその子要素)内に記述された property を構造ごと取り込み(include), item 内の property として再構成する。 これは結構危険な機能である。 </p><p> まず <code>itemref</code> 属性による指定を忘れると,どの item にも属さない「孤独な property」が存在する可能性がある。 この状態で parser がどう反応するか試してみた。 <q lang="en"><a href="http://www.google.com/webmasters/tools/richsnippets">Google Structured Data Testing Tool</a></q> では単純に <code>itemprop</code> 属性を無視するようだ。 property 値が item の場合は,その item はどこにも属さない独立した item として認識される。 一方 <q lang="en"><a href="http://validator.w3.org/">The W3C Markup Validation Service</a></q> ではガッツリ怒られた。 </p><p> もうひとつは <code>itemref</code> 属性による指定が循環する可能性である。 A → B → C → A と指定すると include が循環して無限ループになる。 さすがにこれがどうなるかは試してない。 まさか今時これで stack overflow するバカな parser はないと思うけど。 </p> </section> <section> <h3>Microdata は itemid を参照しない</h3> <p> item には <code>itemid</code> 属性を使って(ページの外部という意味での)グローバルな ID を<strong>指示(indication)</strong>できる。 ただしこの ID を参照する手段は Microdata 自身には存在しない。 </p><p> property 値(literal 表現)として指定することは可能かもしれないが,たとえ全く同じ文字列であっても property 値と <code>itemid</code> 属性で示した ID が同じであると Microdata 自身は保証しない。 また異なる item に同じ ID を指示することが可能なので, <code>itemid</code> 属性を item の<strong>識別(identification)</strong>手段として用いることもできない。 </p><p> じゃあ何のためにこの機能があるかというと, application 側でこの ID に対応する item を検索するためにある(と思われる)。 </p> </section> <section> <h3>Microdata vs. RDFa</h3> <p> Microdata と RDFa の決定的な違いは, RDFa がネット上のあらゆるリソース(= URI)をノードとしたゆるやかな「網(web)」を構成するのに対し, Microdata はページ内の hierarchical な「構造(structure)」を構成する。 しかも Microdata を読む application は,構造化データのうち自身に必要な項目を読むだけで,そこにある意味を「理解」しているわけではない。 何故なら(それは application がヘボいのではなく)もともと Microdata は application にとって制御情報にすぎないからだ。 </p><p class="offrec"> (たとえば,ある item の type に <a href="http://schema.org/Person"><code>http://schema.org/Person</code></a> を指定した際, <code>itemprop='name'</code> を含む property がないと <q lang="en"><a href="http://www.google.com/webmasters/tools/richsnippets">Google Structured Data Testing Tool</a></q> がエラーを吐く。 <code>givenName</code> や <code>familyName</code> では「名前」と見なしてくれないのだ。 これだけを見ても,いかに世の application が「意味」を「理解」する気がないかが分かる) </p><p> たとえば Google なんかは「世界中の情報をグラフ化する」という社是があるんだから,ページ単位でしかデータを構成できない Microdata よりネット上のあらゆるノードを横断する RDFa を支持すべきだろう,となりそうだが実際にはそうならなかった(RDFa も「読める」程度にはサポートしているが)。 理由は政治的なものも含めて色々あるだろうが,おそらく最も大きな理由は RDF が(Google 等のサービス・プロバイダにとって)uncontrollable だからではないだろうか。 それに比べれば hierarchical な構造を持つ Microdata は御しやすい。 ならば, Microdata は machine-understandable というよりは machine-controllable である,とするべきだ。 </p><p> サービス・プロバイダ(の application)にすり寄っていかざるを得ない SEO(Search Engine Optimization)業者にとっても RDFa を支持する理由はない。 少なくとも <a href="https://developers.facebook.com/docs/opengraph">OGP</a> や <a href="https://dev.twitter.com/ja/docs/cards">Twitter Cards</a> なんかよりは Microdata のほうがよほど「冴えたやり方」と言える。 </p><p class="offrec"> (それでも全部対応せざるを得ないのが SEO の悲しさだが。 どっかにも書いたのだが, SEO ってやればやるほど虚しくなるよね。 サービス・プロバイダの提示するジコチューな仕様に振り回されるだけ。 SEO 屋さんって自分の仕事をどう思ってるのかねぇ) </p><p> Microdata が machine-controllable であることは SEO 以外のメリットもあって(というか,こちらが本命だと思うが),それはブラウザの拡張機能やスマートフォン・タブレットなどの携帯端末で動作する application と相性がいいということだ。 今までもそうだったが,これからもっともっと Web は(application との連携により)programmable になる。 そのための要素技術として Microdata は必須の要件になっていくと思う(DOM API も含めてちゃんと Recommendation が出ればだけど)。 </p><p> これまで述べたように Microdata と RDFa とでは出自も目的も構造もまるで異なる。 競合する規格ではないということだ。 まぁ個人的には,世の中がもうすこしだけ semantics に興味を持っていただければと思うわけだが,需要がないということなんだろうなぁ。 </p> </section> <section> <h3>参考</h3> <p>RDFa については拙文<q><a href="https://baldanders.info/spiegel/rdfa/">RDFa 入門</a></q>をどうそ。いくつか間違いがあったのでそのうち修正する。</p> <ul> <li><a href="http://syncer.jp/schema-entering">Googleリッチスニペット対策!初心者向けSchema.org解説!</a></li> <li><a href="http://junmaruyama.info/schemaorgjenerater/">schema.orgを生成してくれるサイト・ツールまとめ | Jun Maruyama Online クズの条件</a></li> <li><a href="http://www.publickey1.jp/blog/09/html5microdata_1.html">HTML5のドラフト仕様書からMicrodataの抄訳 - Publickey</a> (内容が古いが,日本語ではここが一番まとも)</li> </ul> <div class="hreview"> <a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00ME0FJ14/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00ME0FJ14.09._SCTHUMBZZZ_.jpg" alt="PHPライブラリ&サンプル実践活用[厳選100] (Software Design Plus)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> </p> <p class="gtools">reviewed by <a href="#me" class="reviewer">Spiegel</a> on <abbr class="dtreviewed" title="2014/09/02">2014/09/02</abbr> (powered by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a>)</p> </div> <p class="offrec">(あとはこの hReview なんだよなぁ。どうにかしたいがどうにかなるのだろうか)</p> </section>
HTML5 とメタデータ
tag:Baldanders.info,2014-08-23:/blog/000727/
2014-08-23T09:00:00+00:00
2014-08-23T09:00:00+00:00
Atom feed と ccREL / head 要素内の標準的なメタ情報 /Microdata の基本知識
Spiegel
/profile/
<p> 今回は覚え書きのみでお送ります。 イマイチ理解してない気がするので,おかしいところは遠慮なくツッコんで下さい。 </p> <section> <h3>Atom feed と ccREL</h3> <p> Atom feed は XML なので ccREL を使って著作権情報を入れることは可能。 </p><ul> <li><a href="https://wiki.creativecommons.org/Atom">Atom - CC Wiki</a></li> </ul><p> まず ccREL の名前空間を追加する。 </p> <pre class="brush:html" title="feed element - Atom feed"><feed xmlns="http://www.w3.org/2005/Atom" xmlns:cc="http://web.resource.org/cc/"></pre>
<p>
これで <code><feed></code> 要素,またはその子要素の <code><entry></code> 要素内に <code>cc:license</code>, <code>cc:morePermissions</code> 等の記述を追加すればいいだけ。
</p>
<pre class="brush:html" title="ccREL on Atom feed"><link rel="cc:license" type="application/rdf+xml" href="http://creativecommons.org/licenses/by/4.0/rdf" />
<link rel="cc:morePermissions" type="text/html" href="/cc-license.shtml#morePermissions" /></pre>
<p>
この例では cc-license の Commos Deed ではなく RDF/XML に直接リンクしている。
これでいいらしい。
タイトル,著者,日付情報については Atom の property でまかなえる。
</p><p>
<code>cc:license</code>, <code>cc:morePermissions</code>, <code>cc:useGuidelines</code> といった property については<a href="https://baldanders.info/spiegel/rdfa/#ccrel">拙文の ccREL の節</a>を参照のこと。
</p>
</section>
<section>
<h3>head 要素内の標準的なメタ情報</h3>
<p>
HTML5 の <code><head></code> 要素内には <code><meta></code> 要素や <code><link></code> 要素などでメタデータを記述できる。
値がリテラルの場合は <code><meta></code> 要素を, URL 等のリソースの場合には <code><link></code> 要素を使う。
</p><p>
<code><link></code> は void 要素で有効な属性は(グローバル属性以外では)以下のとおり。
</p><ul class="cloud">
<li><code>href</code></li>
<li><code>crossorigin</code></li>
<li><code>rel</code> (MUST)</li>
<li><code>media</code></li>
<li><code>hreflang</code></li>
<li><code>type</code></li>
<li><code>sizes</code> (for <code>rel="icon"</code> property)</li>
<li><code>title</code></li>
</ul><p>
メタデータは rel-href のセットで記述される。
<code>rel</code> 属性にセットする標準のタイプは以下のとおり。
</p><ul class="cloud">
<li><code>author</code></li>
<li><code>help</code></li>
<li><code>icon</code></li>
<li><code>license</code></li>
<li><code>next</code></li>
<li><code>prefetch</code></li>
<li><code>prev</code></li>
<li><code>search</code></li>
<li><code>stylesheet</code></li>
</ul><p>
<code>icon</code> と <code>prefetch</code> 以外は <code>href</code> 要素にハイパーリンクを指定する。
<code>bookmark</code>, <code>nofollow</code>, <code>noreferrer</code>, <code>tag</code> は <code><link></code> 要素では使用できない。
</p><p class="offrec">
(<code>tag</code> は <code><a></code> 要素等では使えるとあり,確かに <a href="http://validator.w3.org/">HTML5 validator</a> では問題ないが <a href="http://www.w3.org/2012/pyRdfa/Validator.html">RDFa Validator</a> ではガッツリ怒られる(<code>nofollow</code> は怒られないのに)。この場合は <code>xhv:</code> 接頭辞をつけるとよい。でもこれで parser が正しく認識してくれるかは不明)
</p><p>
<code><meta></code> は void 要素で, <code><title></code>, <code><base></code>, <code><link></code>, <code><style></code>, <code><script></code> 要素で表現できない情報を記述する。
有効な属性は(グローバル属性以外では)以下のとおり。
</p><ul class="cloud">
<li><code>charset</code></li>
<li><code>content</code></li>
<li><code>http-equiv</code></li>
<li><code>name</code></li>
</ul><p>
ひとつの要素内では <code>name</code>, <code>http-equiv</code>, <code>charset</code> 属性のうちひとつのみを記述する(<span class="offrec">グローバル属性を含め property 名を指示する属性は要素内にひとつしか記述できないようだ</span>)。
</p><p class="offrec">
(<code>http-equiv</code> 属性の <code>content-type</code> は <code>charset</code> 属性で代替できるため HTML5 では不要。また <code>content-language</code> もグローバル属性の <code>lang</code> で代替できるため,同様に不要)
</p><p>
name-content のセットでメタデータを記述する際の標準メタデータ名は以下のとおり(なのでこれらのメタデータを <code><head></code> 要素で指示する場合はなるべく標準の名前を使うべき?)。
</p><ul class="cloud">
<li><code>author</code></li>
<li><code>description</code></li>
<li><code>generator</code></li>
<li><code>keywords</code></li>
</ul><p>
参考:
</p><ul>
<li><a href="http://www.w3.org/TR/2014/CR-html5-20140731/">HTML5(2014-06-17 W3C Cantidate Recommendation)</a></li>
<li><a href="http://ja.opera-wiki.com/Project:HTML5%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96">Project:HTML5日本語化 - Opera Wiki</a></li>
</ul>
</section>
<section>
<h3>Microdata の基本知識</h3>
<p>
Microdata で利用可能な属性は以下のとおり。
</p><ul class="cloud">
<li><code>itemscope</code></li>
<li><code>itemtype</code></li>
<li><code>itemid</code></li>
<li><code>itemprop</code></li>
<li><code>itemref</code></li>
</ul><p>
これらはグローバル属性として扱われる。
基本的には <code>itemscope</code> 属性を指定した要素で囲まれた部分で <code>itemprop</code> 属性を使ってメタデータを記述していく。
</p>
<!--
<div itemscope itemtype="http://schema.org/Person">
私の名前は <span itemprop="name">Spiegel</span> です。
</div>
-->
<pre class="brush:html" title="Microdata basic"><div itemscope itemtype="http://schema.org/Person">
私の名前は <span itemprop="name">Spiegel</span> です。
</div></pre>
<p>
<code>itemscope</code> 属性の範囲を item と呼ぶ。
item のタイプを <code>itemtype</code> 属性で記述し, item の内容を <code>itemprop</code> 属性で記述する。
</p><p>
item は入れ子にすることで構造化が可能。
</p>
<!--
<article itemscope itemtype="http://schema.org/Article">
[...]
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by <span itemprop="name">Spiegel</span>.
</div>
<article>
-->
<pre class="brush:html" title="Microdata basic"><article itemscope itemtype="http://schema.org/Article">
[...]
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by <span itemprop="name">Spiegel</span>.
</div>
<article></pre>
<p>
<del>更に item 同士は <code>id</code> 属性(グローバル属性)と <code>itemref</code> 属性を使って連結できる。
これによりメタデータを構造化できる? かも?</del>
<code>itemref</code> 属性は <code>id</code> 属性(グローバル属性)で指定した先の情報を include する。
</p>
<!--
<div itemscope itemtype="http://schema.org/Person" itemref="link">
私の名前は <span itemprop="name">Spiegel</span> です。
</div>
[...]
<div id="link">
続きは <a href="https://baldanders.info/profile/" itemprop="url">Web</a> で。
</div>
-->
<pre class="brush:html" title="Microdata basic"><div itemscope itemtype="http://schema.org/Person" itemref="link">
私の名前は <span itemprop="name">Spiegel</span> です。
</div>
[...]
<div id="link">
続きは <a href="/profile/" itemprop="url">Web</a> で。
</div></pre>
<p>
この例では, <code>itemprop="url"</code> で指定した情報が元の item に組み込まれる。
<code>itemref</code> 属性には複数の ID を指定できるらしい?
</p><p>
id-itemref 連携はページ内でしかできない(URI ではないため)。
外部のリソースを指示するには <code>itemid</code> を使う(<span class="offrec">らしいのだが使い方がいまいち分からない。 URN を使った例示はあるが,一般的な URI が使えるのかどうか明示されてない</span>)。
</p><p>
また Microdata の属性はグローバルなので <code><link></code> 要素や <code><meta></code> 要素でも使える。
この場合 <code><link></code> 要素や <code><meta></code> 要素は <code><body></code> 要素内でも使用可能となり,しかも flow content かつ phrasing content として機能するらしい(あまり smart じゃない気がするなぁ)?
</p><p>
Microdata の Validator のようなものはない模様。
その代わり Google が <q lang="en"><a href="http://www.google.com/webmasters/tools/richsnippets">Google Structured Data Testing Tool</a></q> というサービスを行っていて,これである程度は分かるかもしれない。
</p><p>
参考:
</p><ul>
<li><a href="http://www.w3.org/TR/2013/NOTE-microdata-20131029/">HTML Microdata (W3C Working Group Note 29 October 2013)</a></li>
<li><a href="http://schema.org/">schema.org</a></li>
<li><a href="http://kots.jp/blog/site-structured/2585/">Microformats & RDFa – 構造化についてまとめ① | kots blog</a></li>
<li><a href="http://hyper-text.org/archives/2013/01/meta_microdata.shtml">meta 要素に対する Microdata の指定 | WWW WATCH</a></li>
</ul>
</section>
<div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00IWHVLUG/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00IWHVLUG.09._SCTHUMBZZZ_.jpg" alt="これからの「標準」を身につける HTML+CSSデザインレシピ[固定レイアウト版]"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/22">2014/08/22</abbr></p></div>
ccREL と RDFa,もしくは Open Graph と Microdata
tag:Baldanders.info,2014-08-22:/blog/000726/
2014-08-22T09:00:00+00:00
2014-08-22T09:00:00+00:00
これで一応完成。夏休みの読書感想文ってところですかね。
Spiegel
/profile/
<p> 「<a href="https://baldanders.info/cc-license.shtml">クリエイティブ・コモンズ・ライセンスについて</a>」の <a href="https://baldanders.info/cc-license.shtml#metadata">RDF の節</a>と「<a href="https://baldanders.info/spiegel/rdfa/">RDFa 入門</a>」の <a href="https://baldanders.info/spiegel/rdfa/#ccrel">ccREL の節</a>を追記した。 両者はお互いに関連してるので記述をどう分けるかで悩んだ。 まぁ,でも,これで一応完成。 夏休みの読書感想文ってところですかね。 「<a href="https://baldanders.info/cc-license.shtml">クリエイティブ・コモンズ・ライセンスについて</a>」は当初予想してたより随分量が増えてしまったので目次を付けないとダメかもしれん。 まぁその辺はおいおい。 </p><p> サイトのリニューアルも <a href="https://baldanders.info/profile/">Profile のページ</a>と <a href="https://baldanders.info/spiegel/archive/">Archive のページ</a>を整理すれば一応完了。 古いコンテンツは引き続き放置することにした。 ここまでできれば夏休みの宿題完了ってところだろうか。 </p><p> RDFa についてひとつだけ理解したことがある。 それは </p><p class="center"> <strong class="caution">Open Graph は RDFa じゃねー!</strong> </p><p> ということだった。 単に RDFa に似せて作ってるというだけで RDFa の機能,つまり「意味を構成する」ことができない。 要するにアプリの制御情報(文字通りの property)を「RDFa みたいな」しくみで HTML の <code><head></code> 要素に埋め込んでるだけなのだ。 だいたい Open Graph なんて思わせぶりな名前がいけないんだよな。 そういう方面を期待しちゃうじゃない。 </p><p> で,こういうバカな仕組みほど真似する奴が多いようで, <a href="https://dev.twitter.com/ja/docs/cards">Twitter Card</a> なんてそのまんまだし, <a href="http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/">mixi</a> や <a href="https://docs.developer.gree.net/ja/platform/connect/socialfeedback">GREE</a> は Open Graph に独自仕様を混ぜ込んで「さすが日本は素晴らしいガラパゴスですね」って感じである。 </p><p> こういうアホなものにつきあうのは業腹なので Open Graph の記述は全部取っ払った。 お陰で <code><head></code> 要素内がスッキリしたよ。 シンプルなのが一番。 もともと Open Graph の情報を入れたのは Facebook や Facebook ページの調査のためだったしな。 Facebook ブームも終わったみたいだし,もうええやろ。 </p><p> SEO 的な効果を考えるのなら Open Graph より Microdata を導入することをお薦めする。 手始めに以下はどうだろうか。 </p><ul> <li><a href="http://kots.jp/blog/site-structured/6284/">microdata のスニペットをbodyタグに書く方法 | kots blog</a></li> </ul><p> これは面白そうなので後日試してみる。 Microdata の勉強になるかな。 </p> <div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00IWHVLUG/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00IWHVLUG.09._SCTHUMBZZZ_.jpg" alt="これからの「標準」を身につける HTML+CSSデザインレシピ[固定レイアウト版]"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/22">2014/08/22</abbr></p></div>