防止 HTML Tidy 弄乱元标记（模式标记）答案

【问题标题】：Prevent HTML Tidy from messing meta tags ( schema markup )防止 HTML Tidy 弄乱元标记（模式标记）
【发布时间】：2019-01-27 09:54:58
【问题描述】：

我在使用 HTML Tidy（最新版本 -- https://html-tidy.org）时遇到了一个严重问题。

简而言之：HTML 整洁地转换这些 HTML 代码行

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<div class="wrap">
    <span property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" title="Codes Category" href="https://mysite.works/codes/" class="taxonomy category">
            <span property="name">Codes</span>
        </a>
        <meta property="position" content="1">
    </span>
</div>

进入这些代码行——请仔细查看 META TAGS 位置。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<div class="wrap">
    <span property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" title="Codes Category" href="https://mysite.works/codes/" class="taxonomy category">
            <span property="name">Codes</span>
        </a>
    </span>
    <meta property="position" content="1">
</div>

这会导致架构验证出现一些严重问题。你可以在这里查看代码：https://search.google.com/structured-data/testing-tool/u/0/

由于这个问题，客户端（URL：https://techswami.in）的面包屑导航在搜索结果中不可见。

我在美化什么？

我的客户希望我让他/她的网站源代码看起来“干净、可读和整洁”。

所以我正在使用这些代码行使其对他/她有用。

注意：此代码在以下 WordPress 设置中 100% 完美运行。

带有 FastCGI 缓存/MariaDB 的 Nginx
PHP7
Ubuntu 18.04.1
最新的 WordPress，兼容所有缓存插件。

代码：

if( !is_user_logged_in() || !is_admin() ) {
function callback($buffer) {
    $tidy = new Tidy();
    $options = array('indent' => true, 'markup' => true, 'indent-spaces' => 2, 'tab-size' => 8, 'wrap' => 180, 'wrap-sections' => true, 'output-html' => true, 'hide-comments' => true, 'tidy-mark' => false);
    $tidy->parseString("$buffer", $options);
    $tidy->cleanRepair();
    $buffer = $tidy;
    return $buffer;
}
function buffer_start() { ob_start("callback"); }
function buffer_end() { if (ob_get_length()) ob_end_flush(); }
add_action('wp_loaded', 'buffer_start');
add_action('shutdown', 'buffer_end');

}

我需要你们提供什么帮助？

您能告诉我如何防止 HTML Tidy 弄乱 META TAGS。我需要参数。

谢谢。

【问题讨论】：

你尝试过另一种 html tidy 方法吗？查看 github 上的 tidy-html5 ...有一个与您在此处描述的问题非常相似的问题，该问题已针对此应用程序解决 - github.com/htacg/tidy-html5/issues/333
告诉您的客户，他们的网站不可能由不相互通信的动态组件组成，因此每个组件都不知道他们需要如何更改自己的输出格式。您能做的最好的事情就是确保您创建的 PHP 代码干净整洁。然后通知您未受过教育的客户，查看源输出不是网站的源代码，而是为 Web 浏览器生成的代码。
@MartinBarker 我认为您应该再次阅读我的问题，我是说，我能够美化代码，我只是面临标签中的标签的单个问题。谈到您的第二点，当您查看源代码时，它实际上是“当前”网页应用程序的代码。我知道它是为网络浏览器生成的，甚至我的客户也知道。感谢您的不太有用的评论。
我确实读过它，我的总体观点是停止试图弄乱生成的源代码，因为虽然验证器正确报告它，因为它们是实验性的，所以不被信任，那个元标记是无效的w3schools.com/tags/tag_meta.asp 属性在元标记或全局属性列表中无效，元不应出现在头部之外，因此您的客户不仅要求您无法阅读您使用的标准...

标签： php wordpress html htmltidy

【解决方案1】：

<meta> 标签只能在父元素中使用：<head>、<meta charset>、<meta http-equiv> 此外，<meta> 元素中没有 property 属性。

这些很可能是HTML-Tidy 清理标记的原因。

来源

【讨论】：

嗨，第一。上面的 HTML 代码不是静态的，它是由一个名为“Breadcrumb NavXT”的插件生成的，第二个根据谷歌的模式标记测试工具和 w3c 验证器，上面提供的代码（第一个）是 100% 有效的。

【解决方案2】：

首先，我衷心感谢所有试图帮助我的人。

我找到了解决方案，我的解决方案唯一的问题是它不能解决 HTML-Tidy 问题。

所以，现在我不使用 HTML-Tody，而是使用这个：https://github.com/ivanweiler/beautify-html/blob/master/beautify-html.php

我的新代码是：

if( !is_user_logged_in() || !is_admin() ) {
    function callback($buffer) {
        $html = $buffer;
        $beautify = new Beautify_Html(array(
          'indent_inner_html' => false,
          'indent_char' => " ",
          'indent_size' => 2,
          'wrap_line_length' => 32786,
          'unformatted' => ['code', 'pre'],
          'preserve_newlines' => false,
          'max_preserve_newlines' => 32786,
          'indent_scripts'  => 'normal' // keep|separate|normal
        ));

        $buffer = $beautify->beautify($html);
        return $buffer;
    }
    function buffer_start() { ob_start("callback"); }
    function buffer_end() { if (ob_get_length()) ob_end_flush(); }
    add_action('wp_loaded', 'buffer_start');
    add_action('shutdown', 'buffer_end');
}

现在所有与架构标记相关的问题都已得到修复，并且客户端的站点已经美化了源代码。

【讨论】：

并且您无缘无故地破坏了网站性能，这也意味着您的输出 HTML 无效，因为插件使用的元标记通过使用 <meta property 来产生无效的 HTML 内容和<meta 在<body> 标签内！！！所以所做的就是将你的代码隔开。不以任何方式验证它。
@MartinBarker 站点正在生成有效代码，实际上，我的客户正在使用我自定义构建的主题。然后她要我使用“HTML-Tidy”来美化代码。现在 HTML-Tidy 搞砸了模式标记。所以我开始寻找替代品，因为我什至在官方 repo 上要求答案，但没有回复。我这次使用的 php 代码只是美化了代码，并没有弄乱架构——这正是我所需要的。现在至于性能，这取决于客户。她付钱给我工作，我必须交付。希望你明白这一点。最好的问候。
不，您的验证器错误地将其报告为有效，请在此处阅读简单版本的规范，w3schools.com/tags/tag_meta.asp 或developer.mozilla.org/en-US/docs/Web/HTML/Element/meta 的更完整详细信息，然后搜索该页面，您会发现该属性property 无效（甚至没有在页面上搜索页面上的“property”一词，您将找不到），这证明您的验证器没有 100% 符合规范。

【解决方案3】：

只是为了透视，我尝试实现一个最小的自包含示例，基于：

您的代码
PHP reference Tidy examples提供的整洁示例

我最终得到了以下代码：

<?php
ob_start();
?>

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
    <div class="wrap">
        <span property="itemListElement" typeof="ListItem">
            <a property="item" typeof="WebPage" title="Codes Category" href="https://mysite.works/codes/" class="taxonomy category">
                <span property="name">Codes</span>
            </a>
            <meta property="position" content="1">
        </span>
    </div>
</div>

<?php

$buffer = ob_get_clean();
$tidy = new Tidy();
$options = array(
    'indent' => true,
    'markup' => true,
    'indent-spaces' => 2,
    'tab-size' => 8,
    'wrap' => 180,
    'wrap-sections' => true,
    'output-html' => true,
    'hide-comments' => true,
    'tidy-mark' => false
);
$tidy->parseString("$buffer", $options);
$tidy->cleanRepair();

echo $tidy;
?>

输出内容非常丰富地说明了 Tidy 如何重构您的 HTML。就是这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta property="position" content="1">
    <title></title>
  </head>
  <body>
    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
      <div class="wrap">
        <span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Codes Category" href="https://mysite.works/codes/" class=
        "taxonomy category"><span property="name">Codes</span></a> </span>
      </div>
    </div>
  </body>
</html>

正如其他评论者所指出的那样，元标记并没有消失，而是被推到了应该属于的位置。

如果您希望 Tidy 只处理 HTML 结构，请添加选项 'input-xml' 并将其设置为 true，如下所示：

$options = array(
    'indent' => true,
    'markup' => true,
    'indent-spaces' => 2,
    'tab-size' => 8,
    'wrap' => 180,
    'wrap-sections' => true,
    'output-html' => true,
    'hide-comments' => true,
    'tidy-mark' => false,
    'input-xml' => true
);

这将输出以下内容：

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
  <div class="wrap">
    <span property="itemListElement" typeof="ListItem">
      <a property="item" typeof="WebPage" title="Codes Category" href="https://mysite.works/codes/" class="taxonomy category">
        <span property="name">Codes</span>
      </a>
      <meta property="position" content="1"></meta>
    </span>
  </div>
</div>

【讨论】：

顺便说一句，这不是 HTML Tidy，而是 PHP Tidy 实现。