Evite que HTML Tidy altere las metaetiquetas (marcado de esquema)

9 minutos de lectura

Tengo un problema grave con HTML Tidy (última versión — https://html-tidy.org).

En resumen: HTML ordenado convertir estas líneas de códigos 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>

En estas líneas de código — Por favor, eche un vistazo de cerca a la colocación de 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>

Esto está causando algunos problemas graves con las validaciones de esquemas. Puedes consultar los códigos aquí: https://search.google.com/datos-estructurados/herramienta-de-prueba/u/0/

Debido a este problema, el cliente (URL: https://techswami.in ) la navegación con migas de pan no está visible en los resultados de búsqueda.

¿Qué estoy embelleciendo?

Mi cliente quería que hiciera que el código fuente de su sitio web se viera “limpio, legible y ordenado”.

Así que estoy usando estas líneas de códigos para que funcione para él/ella.

Nota: este código funciona perfectamente al 100% en la siguiente configuración de WordPress.

  • Nginx con caché FastCGI/MariaDB
  • PHP7
  • Ubuntu 18.04.1
  • Último WordPress y es compatible con todos los complementos de caché.

Código:

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');

}

¿Qué ayuda necesito de ustedes?

¿Puede decirme cómo evito que HTML Tidy altere las META TAGS? Necesito los parametros.

Gracias.

  • ¿Has probado otro enfoque ordenado de html? Mirando tidy-html5 en github… hubo un problema muy similar al que describe aquí que se resolvió para esta aplicación: github.com/htacg/tidy-html5/issues/333

    – AndW99

    23 de agosto de 2018 a las 14:01


  • Dígale a su cliente que no es posible que su sitio web esté compuesto por componentes dinámicos que no se comunican entre sí, por lo que cada componente no sabe cómo debe cambiar su propio formato de salida. lo mejor que puede hacer es asegurarse de que el código PHP que creó esté limpio y ordenado. Luego informe a su cliente sin educación que la salida de la fuente de visualización no es el código fuente del sitio web, es el código generado para el navegador web.

    – Barkermn01

    24 de agosto de 2018 a las 12:16


  • @MartinBarker Creo que debería leer mi pregunta una vez más, digo que puedo embellecer el código, solo tengo un problema con las etiquetas dentro de las etiquetas . Llegando a su segundo punto, cuando ve el código fuente, en realidad es el código de la página web “actual”, la aplicación. Sé que se genera para el navegador web e incluso mi cliente lo sabe. Gracias por tu comentario no tan útil.

    – Juan Adán

    24 de agosto de 2018 a las 13:18

  • Lo leí y mi punto general es dejar de intentar meterme con el código fuente generado, porque aunque los validadores lo informan correctamente porque son experimentales, por lo que no se puede confiar, esa metaetiqueta no es válida. w3schools.com/tags/tag_meta.asp La propiedad no es válida en una etiqueta meta o en la lista de atributos globales, la meta no debe aparecer fuera del encabezado, por lo que su cliente no solo está pidiendo lo imposible, sino que no puede leer los estándares para lo que está usando…

    – Barkermn01

    24 de agosto de 2018 a las 13:53


los <meta> La etiqueta solo debe usarse en los elementos principales: <head>, <meta charset>, <meta http-equiv>
Además, no hay property atributo en el <meta> elemento.

Estas son probablemente las razones por las que HTML ordenado está limpiando el marcado.

Fuentes

  • hola, 1ro. El código HTML anterior no es estático, es generado por un complemento llamado “Breadcrumb NavXT” y segundo según la herramienta de prueba de marcado de esquema de Google y el validador w3c, el código proporcionado arriba (primero) es 100% válido.

    – Juan Adán

    24 de agosto de 2018 a las 9:23


avatar de usuario
Juan Adán

En primer lugar, mi más sincero agradecimiento a todos los que intentaron ayudarme.

Encontré la solución, el único problema con mi solución es que no soluciona el problema de HTML-Tidy.

Entonces, ahora en lugar de usar HTML-Tody, estoy usando esto: https://github.com/ivanweiler/beautify-html/blob/master/beautify-html.php

Mi nuevo código es:

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');
}

Y ahora todos los problemas relacionados con el marcado de esquema se han solucionado y el sitio del cliente ha embellecido el código fuente.

  • y está destruyendo el rendimiento del sitio sin una buena razón, esto también significa que su HTML de salida no es válido debido a las metaetiquetas utilizadas por el complemento que produce contenido HTML no válido al tener <meta property en absoluto y <meta dentro de <body> ¡¡¡etiqueta!!! entonces todo lo que está haciendo es espaciar su código. no validarlo de ninguna manera.

    – Barkermn01

    3 sep 2018 a las 18:53


  • @MartinBarker Site estaba generando un código válido, en realidad, mi cliente está usando mi tema personalizado. Luego me pidió que usara “HTML-Tidy” para embellecer el código. Ahora HTML-Tidy arruinó el marcado del esquema. Así que comencé a buscar alternativas, ya que incluso solicité la respuesta en el repositorio oficial, pero no obtuve respuesta. El código php que estoy usando esta vez simplemente embellece el código y no estropea el esquema, exactamente lo que necesito. Ahora, en cuanto al rendimiento, eso depende del cliente. Ella me pagó por el trabajo, y tengo que entregarlo. Espero que lo entiendas. Saludos.

    – Juan Adán

    5 de septiembre de 2018 a las 7:08

  • No, su validador lo informa como válido incorrectamente. Lea la versión simple de las especificaciones aquí. w3schools.com/tags/tag_meta.asp o los detalles más completos en developer.mozilla.org/en-US/docs/Web/HTML/Element/meta y busque esa página y encontrará que el atributo property NO ES VÁLIDO (ni siquiera está en la página, busque en la página la palabra ‘propiedad’ y no encontrará ninguno), esto demuestra que sus validadores no están funcionando al 100% según las especificaciones.

    – Barkermn01

    11 de septiembre de 2018 a las 9:40


Solo por perspectiva, intenté implementar un ejemplo autónomo mínimo basado en:

Terminé con el siguiente código:

<?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;
?>

El resultado es bastante informativo sobre cómo Tidy reestructura tu HTML. Aquí va:

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

La metaetiqueta no ha desaparecido, sino que se ha empujado hacia donde debería pertenecer, como señalaron otros comentaristas.

Si desea que Tidy procese solo la estructura HTML, agregue la opción ‘input-xml’ y configúrela como verdadera, como tal:

$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
);

Esto generará lo siguiente:

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

  • Por cierto, no es HTML Tidy, es la implementación de PHP Tidy.

    – rdlopes

    29 de agosto de 2018 a las 22:08

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad