programing

HTML Tidy에서 메타 태그( 스키마 마크업)를 처리하지 못하도록 방지합니다.

skycolor 2023. 10. 24. 21:09
반응형

HTML Tidy에서 메타 태그( 스키마 마크업)를 처리하지 못하도록 방지합니다.

HTML 타이디(latest 버전 -- 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 TAG 배치를 자세히 살펴보시기 바랍니다.

<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 )의 breadcrumb 탐색이 검색 결과에 표시되지 않습니다.

내가 뭘 아름답게 하고 있는 거지?

제 고객은 제가 웹사이트의 소스 코드를 "깨끗하고, 읽을 수 있고, 깔끔하게" 보이게 하기를 원했습니다.

그래서 저는 이 코드 라인들을 사용해서 그/그녀를 위해 작동하게 만들고 있습니다.

참고: 이 코드는 다음 WordPress 설정에서 100% 완벽하게 작동합니다.

  • FastCGI Cache/MariaDB를 사용한 Nginx
  • PHP7
  • 우분투 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 타이디가 메타 태그를 망치는 것을 방지하는 방법을 알려주시겠습니까?파라미터가 필요합니다.

감사해요.

태그는 상위 요소에서만 사용해야 합니다.<head>,<meta charset>,<meta http-equiv>추가적으로, 없습니다.property요소에 속성을 지정합니다.

이것들이 HTML-Tidy가 마크업을 청소하는 이유일 가능성이 높습니다.

원천

우선 저를 도와주신 모든 분들께 진심으로 감사드립니다.

저는 해결책을 찾았지만, 제 해결책의 유일한 문제는 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');
}

그리고 이제 스키마 마크업과 관련된 모든 문제가 해결되었고 클라이언트의 사이트는 소스 코드를 개선했습니다.

단지 관점을 위해, 저는 다음을 바탕으로 최소한의 자기를 포함한 예를 구현하려고 했습니다.

저는 결국 다음과 같은 코드를 가지게 되었습니다.

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

언급URL : https://stackoverflow.com/questions/51944802/prevent-html-tidy-from-messing-meta-tags-schema-markup

반응형