Question

我有一个用XHTML 1.0 Strict编码的网站。我想使用新的Microdata为我的网站添加面包屑（所以Google will understand them）。

我的旧的非微数据标记面包屑看起来像这样：

<ul>
  <li><a href="...">Level 1</a></li>
  <li><a href="...">Level 2</a></li>
  <li><a href="...">Level 3</a></li>
</ul>

根据谷歌的说法，要使用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 Strict。

我该怎么办？
我应该忽略验证冲突吗？我应该写itemscope="itemscope"而不是itemscope（这是有效的XML，但仍然无效的XHTML）？
我应该将Doctype更改为HTML5而不是XHTML 1.0 Strict吗？

我希望这一切能够一直回到IE6！

请建议：）

Answer 1

是的，如果您想在XHTML中使用itemscope，则需要编写itemscope="itemscope"并使用XHTML5（与HTML5相同的DOCTYPE，但是XML语法）。

itemscope未包含在W3 HTML5中，但出现在WHATWG的版本中，因此验证可能仍然是一个难题。在这个问题上似乎有一些political argument，我没有遵循，因为它看起来相当乏味。

目前，如果您想以最终的，可验证的文档格式使用面包屑注释，您可以使用RDFa：替代（但更旧）的提议，该参数是关于的，并使用现有的doctype：< / p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

Answer 2

由于主要搜索引擎已于去年6月（2011年）决定schema.org作为方式进行丰富网页摘要，因此看到XHTML5还没有这个问题变得更加重要工作DTD（顺便说一下，http://www.html5dtd.org/正在研究XHTML5 DTD，当你读到这篇文章时可能已经准备好了，如果是这样的话，我将无视我要说的话）。我要说的是几周前我在http://www.nedprod.com/programs/portable/XHTMLwithHTML5microdata/放置的一个页面，如果你需要的话，还有更详细的内容，包括丰富的片段演示。

我需要使用schema.org/HTML5微数据扩展XHTML 1.x Strict并将其全部用于更新nedprod，并且Microsoft Expression Web偶尔会有吃掉它编辑的HTML的倾向，因此验证是它很方便捕捉它的时候。因此，我创建了这些扩展标准XHTML 1.0的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会在渲染时调用quirks模式。事实证明，令我惊讶的是，IE8，Chrome 14，Firefox 5和Opera 11.50都在标准模式下渲染了这样的文档类型。谁曾想到！因此，如果您愿意，可以使用自定义文档类型将您的XHTML页面上传到公共互联网上，而新版浏览器至少会做正确的事情。

希望这有助于某人，
尼尔

Answer 3

有效的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&amp;v=BwPN6eCpxTk">
           <meta itemprop="uploadDate" content="2010-11-09">
           <iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&amp;autohide=1&amp;modestbranding=1&amp;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/

Answer 4

使用application/ld+json MIME类型和microdata generator将标记转换为数据：

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

或对象标记中的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 shim支持IE6并对其进行扩展以获取标记的副本。

<强>参考

Answer 5

尝试验证一些谷歌的网页......他们不会验证。验证是一种工具，一种令人敬畏的工具，但仅此而已，尽管我对你的决心表示赞赏。如果你担心验证我会转向HTML5。

我可以将HTML5中的Microdata添加到XHTML Strict站点并且仍然符合要求吗？

5 个答案: