25

我有一个用 XHTML 1.0 Strict 编码的网站。我想使用新的 Microdata 将面包屑添加到我的网站（以便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 Strict。

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

我希望它能够一直工作到 IE6！

请指教 ：）

4

5 回答 5

16

是的，如果您想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">
于 2010-09-07T16:25:15.353 回答
12

由于主要搜索引擎已于去年 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。

顺便说一句，这里有一些有趣的东西，我只包括它是因为在回答问题时知道它很有用。老实说，我认为使用上述文档类型会在渲染时调用 quirks 模式。结果让我大吃一惊的是，IE8、Chrome 14、Firefox 5 和 Opera 11.50 都在标准模式下呈现这样的文档类型。谁曾想到！因此，如果您愿意，您可以使用自定义文档类型将您的 XHTML 页面上传到公共 Internet，并且更新的浏览器至少会做正确的事情。

希望这对某人有所帮助，
尼尔

于 2011-09-03T18:19:20.730 回答
1

有效的 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-谷歌/

于 2013-04-08T18:47:55.427 回答
0

使用application/ld+jsonMIME 类型和微数据生成器将标记转换为数据：

<!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 并对其进行扩展以获得标记的副本。

参考

于 2013-12-20T17:16:42.540 回答
-2

尝试验证一些谷歌的页面......他们不验证。验证是一种工具，一个很棒的工具，但仅此而已，尽管我确实为您的决心鼓掌。如果您担心验证，我会切换到 HTML5 。

于 2010-12-11T06:53:18.050 回答