我可以将 HTML5 中的微数据添加到 XHTML Strict 网站并且仍然兼容吗？

发布于 2024-09-18 06:03:06 字数 1013 浏览 8 评论 0原文

我有一个使用 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，要使用微数据标记面包屑，您可以像这样扩展上面的代码：

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

请指教:)

原文

I've got a site coded in XHTML 1.0 Strict. I want to use the new Microdata to add breadcrumbs to my site (so Google will understand them).

My old non-microdata marked-up breadcrumbs look like this:

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

According to Google, to markup breadcrumbs using Microdata, you extend the above code like this:

<ul>
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="..." itemprop="url">
      <span itemprop="title">Level 1</span>
    </a>
  </li>
  ...
</ul>

But this is not valid XHTML 1.0 Strict.

What should I do?
Should I ignore the validation conflicts?
Should I write itemscope="itemscope" instead of just itemscope (this would be valid XML, but still not valid XHTML)?
Should I change the Doctype to be HTML5 instead of XHTML 1.0 Strict?

I want this to work all the way back to IE6!

Please advice :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

两个我 2024-09-25 06:03:06

是的，如果您想在 XHTML 中使用 itemscope，则需要编写 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">

Yes, if you wanted to use itemscope in XHTML, you would need to write itemscope="itemscope" and use XHTML5 (same DOCTYPE as HTML5, but XML syntax).

itemscope is not included in W3 HTML5, but present in WHATWG's version, so validation may continue to be a difficulty. There seems to be quite some political argument on this issue, which I haven't been following as it looks fairly tedious.

For the moment, if you want to use breadcrumb annotations in a finalised, validatable document format, you could use RDFa instead: the alternative (but older) proposal, which the argument is all about, and use the existing doctype:

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

回复收藏 0 原文

谁的年少不轻狂 2024-09-25 06:03:06

由于去年 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 的原始版本，我可以' t 提供带宽）并按如下方式使用：

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

顺便说一句，这是一些有趣的事情，我只是将其包括在内，因为在回答问题时了解它很有用。老实说，我认为使用上述文档类型会在渲染时调用怪异模式。结果令我大吃一惊的是，IE8、Chrome 14、Firefox 5 和 Opera 11.50 都在标准模式下呈现这样的文档类型。谁能想到！因此，如果您愿意，您可以使用自定义文档类型将您的 XHTML 页面上传到公共互联网上，而较新的浏览器至少会做正确的事情。

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

Since the major search engines have decided on schema.org last June (2011) as the way to do rich snippets, this question has become much more important seeing XHTML5 does not yet have a working DTD (BTW, http://www.html5dtd.org/ is working on a XHTML5 DTD and may well be ready when you read this, if so disregard what I'm about to say). And what I am about to say summarises a page I placed at http://www.nedprod.com/programs/portable/XHTMLwithHTML5microdata/ a few weeks ago, and there has more detail including a rich snippets demo if you want it.

I had need of extending XHTML 1.x Strict with schema.org/HTML5 microdata and getting it all to validate properly for updating nedprod, and Microsoft Expression Web has the occasional tendency to eat bits of HTML it edits, so validation is handy for catching when it borks. Hence I have created these DTDs which extend the standard XHTML 1.0 ones:

To use, take a copy of your desired DTD (don't use the original from nedprod, I can't afford the bandwidth) and use as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">

or ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">

... or more likely, override the DTD used for validation by your particular XML validating setup.

BTW, here's something interesting, and I only include this as it's useful to know when answering the question. I honest to God thought that using the above doctypes would invoke quirks mode when rendering. Turns out, much to my great surprise, that IE8, Chrome 14, Firefox 5 and Opera 11.50 all render such a doctype in Standards mode. Who would have thought! So you could, if you wanted to, upload your XHTML pages onto the public internet with the custom doctype and the newer browsers at least would do the right thing.

Hope this helps someone,
Niall

回复收藏 0 原文

栖迟 2024-09-25 06:03:06

有效的 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=zh-CN&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/< /a>

Valid HTML 5 example

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

Found these links helpful:
- http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/

回复收藏 0 原文

琉璃繁缕 2024-09-25 06:03:06

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

<!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 并扩展它以获取标记的副本。

参考资料

Use the application/ld+json MIME type and a microdata generator to transform the markup into data:

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

or a data:uri in an object tag:

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