我可以将Microdata从HTML5添加到XHTML严格的站点吗？

https://stackoverflow.com/questions/3659778

01-10-2019
|

题

我有一个严格的XHTML 1.0中编码的网站。我想使用新的微型数据将面包屑添加到我的网站（所以 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）？
我应该将Doctype更改为HTML5而不是XHTML 1.0严格吗？

我希望它能一直回到IE6！

请指教：）

解决方案

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

itemscope W3 HTML5不包含，而是在Whatwg的版本中存在，因此验证可能仍然是一个困难。似乎有很多政治论点在这个问题上，我还没有遵循，因为它看起来很乏味。

目前，如果您想以最终确定的，有效的文档格式使用BreadCrumb注释，则可以使用RDFA：替代方案（但较旧的）提案，该论点全部关注，并使用现有的Doctype：

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

其他提示

由于主要搜索引擎已决定 schema.org 去年6月（2011年）这进行丰富的摘要的方法，看到XHTML5尚未有工作DTD变得越来越重要（BTW， http://www.html5dtd.org/ 正在研究XHTML5 DTD，并且在阅读本文时很可能会做好准备，如果我忽略了我要说的话）。我要说的是总结我放置的页面 http://www.nedprod.com/programs/portable/xhtmlwithhtml5microdata/ 几周前，如果您愿意，还有更多细节，包括丰富的摘要演示。

我需要扩展XHTML 1.x严格使用schema.org/html5 microdata并获得所有验证以适当验证以更新nedprod，而Microsoft Expression Web偶尔会倾向于食用它的html html it html it html it html it edits，因此验证是可用于捕捉的方便的，因此当它borks。因此，我创建了这些扩展标准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。

顺便说一句，这很有趣，我只包括在回答问题时知道的，因为它很有用。我对上帝诚实，认为使用上述医生会在渲染时调用怪癖模式。事实证明，令我非常惊讶的是，IE8，Chrome 14，Firefox 5和Opera 11.50在标准模式下呈现此类Doctype。谁曾想到！因此，如果您愿意，可以使用自定义Doctype上传XHTML页面，至少较新的浏览器会做正确的事情。

希望这对某人有帮助
尼尔

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

使用 application/ld+json 哑剧类型和 MicroDATA发电机将标记转换为数据：

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

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow