HTML5からXHTML Strictサイトにマイクロダタを追加しても、まだ準拠していますか?
-
01-10-2019 - |
質問
XHTML 1.0 Strictでコード化されたサイトを持っています。新しいマイクロダタを使用して、私のサイトにパン粉を追加したい(だから Googleはそれらを理解します).
私の古い非ミクロダタとマークアップされたパン粉は次のように見えます:
<ul>
<li><a href="...">Level 1</a></li>
<li><a href="...">Level 2</a></li>
<li><a href="...">Level 3</a></li>
</ul>
Googleによると、Microdataを使用してパン粉をマークアップするには、次のような上記のコードを拡張します。
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
...
</ul>
しかし、これは有効ではありませんXHTML 1.0厳密です。
私は何をすべきか?
検証の競合を無視する必要がありますか?
書くべきです itemscope="itemscope"
ただの代わりに itemscope
(これは有効なXMLですが、それでも有効なXHTMLではありません)?
XHTML 1.0の厳格ではなく、DoctypeをHTML5に変更する必要がありますか?
私はこれをIE6に戻ってずっと動作させたいです!
ご意見をお聞かせください :)
解決
はい、使用したい場合 itemscope
XHTMLでは、書く必要があります itemscope="itemscope"
XHTML5(HTML5と同じDoctypeがXML構文)を使用します。
itemscope
W3 HTML5には含まれていませんが、WhatWGのバージョンに存在するため、検証は引き続き難しい場合があります。かなりいくつかあるようです 政治的議論 この問題については、かなり退屈に見えるので、私はフォローしていません。
現時点では、最終的に有効なドキュメント形式でパンムーブアノテーションを使用したい場合は、代わりにRDFAを使用できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
他のヒント
主要な検索エンジンが決定して以来 schema.org 昨年6月(2011)AS リッチなスニペットを行う方法、この質問はXHTML5がまだ動作しているDTDを持っていないのを見るより重要になっています(ところで、 http://www.html5dtd.org/ XHTML5 DTDに取り組んでおり、これを読むと、私が言っていることを無視している場合は準備ができている可能性があります)。そして、私が言っていることは、私が配置したページを要約しています http://www.nedprod.com/programs/portable/xhtmlwithhtml5microdata/ 数週間前、必要に応じてリッチなスニペットのデモを含む詳細があります。
schema.org/html5 microdataを使用してxhtml 1.x Strictを拡張し、NedProdを更新するためにすべてを適切に検証する必要がありました。MicrosoftExpressionWebには、編集されるhtmlを食べる傾向があるため、検証は測定するのに便利です。それがボルクするとき。したがって、標準のXHTML 1.0を拡張するこれらのDTDを作成しました。
- http://www.nedprod.com/xhtml1-stml5-microdata.dtd
- http://www.nedprod.com/xhtml1-transitional-with-html5-microdata.dtd
使用するには、 コピーを取ります 希望のDTD(NedProdのオリジナルを使用しないでください、帯域幅を買う余裕はありません)と次のように使用します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">
また ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">
...または、おそらく、特定のXML検証セットアップによる検証に使用されるDTDをオーバーライドします。
ところで、ここに何か面白いものがあります。質問に答えるときに知ると便利なので、これを含めてください。私は神に正直に言って、上記のDoctypesを使用すると、レンダリング時に癖モードを呼び出すと思いました。 IE8、Chrome 14、Firefox 5、Opera 11.50がすべて標準モードでこのようなDoctypeをレンダリングすることは、私の大きな驚きに大いに驚きました。誰が考えただろうか!したがって、必要に応じて、XHTMLページをカスタムDoctypeと新しいブラウザーを使用してパブリックインターネットにアップロードすることができます。少なくとも正しいことを行うことができます。
これが誰かを助けることを願っています、
ニール
有効なHTML 5例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
<div itemscope="" itemtype="http://schema.org/MediaObject">
<div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="Breast Augmentation Video Diary">
<meta itemprop="duration" content="PT12M54S">
<meta itemprop="thumbnailUrl" content="http://www.plastic-surgery-estonia.com/new-assets/images/thumbnails/breast-augmentation.jpg">
<meta itemprop="contentURL" content="http://www.youtube.com/watch?v=BwPN6eCpxTk">
<meta itemprop="embedURL" content="http://www.youtube.com/watch?feature=player_embedded&v=BwPN6eCpxTk">
<meta itemprop="uploadDate" content="2010-11-09">
<iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&autohide=1&modestbranding=1&showinfo=0"></iframe>
<span itemprop="description">Video Diary</span>
</div>
</div>
</body>
</html>
これらのリンクが役立つことがわかりました:
- http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/
使用 application/ld+json
マイムタイプとa マイクロダタジェネレーター マークアップをデータに変換するには:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<script type="application/ld+json">
{"items": [{
"type": ["https://schema.org/breadcrumb"],
"properties":{
"url": ["..."],
"title": ["Level 1"]
}
}]
}
</script>
</div>
</body>
</html>
またはa data:uri
オブジェクトタグ:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<object data="data:text/html;charset=utf-8;base64,PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
</object>
<!--[if lt IE 8]>
<object data="mhtml://#foo">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
<div id="foo">
PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==
</div>
</object>
<![endif]-->
</div>
</body>
</html>
私はこれをIE6に戻ってずっと動作させたいです!
使用 application/xhtml+xml
XSLTシム IE6をサポートし、それを拡張してマークアップのコピーを取得します。
参照
Googleのページの一部を試して検証してみてください...それらは検証しません。検証はツールであり、素晴らしいものですが、それ以上は何もありませんが、私はあなたの決意を称賛します。あなたが検証を心配しているなら、私はHTML5に切り替えます。