렌더링 문제 디버깅

Google 검색에서 콘텐츠가 올바로 처리되거나 렌더링되지 않는다고 생각되는 경우 Google의 디버깅 도움말을 검토하고 다음 방법 중 하나를 사용하여 문제를 테스트하고 디버그해 보세요.

  1. Search Console에서 Fetch and Render as Google 도구를 사용해 Google에서 사이트의 URL을 크롤링하거나 렌더링하는 방식을 테스트합니다. 특정 URL을 '가져와서 렌더링'하도록 요청하고 HTTP 응답 헤더를 검사하며 Google 검색에 표시되는 대로 페이지의 시각적 미리보기를 볼 수 있습니다.
  2. 오류 로그를 기록하여 자바스크립트 실행 오류를 감사합니다. 다음은 global onerror handler에 로그된 자바스크립트 오류를 로그하는 방법을 보여주는 예제 스니펫입니다.
window.addEventListener('error', function(e) {
    var errorText = [
        e.message,
        'URL: ' + e.filename,
        'Line: ' + e.lineno + ', Column: ' + e.colno,
        'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
    ].join('\n');

    // Example: log errors as visual output into the host page.
    // Note: you probably don’t want to show such errors to users, or
    //       have the errors get indexed by Googlebot; however, it may
    //       be a useful feature while actively debugging the page.
    var DOM_ID = 'rendering-debug-pre';
    if (!document.getElementById(DOM_ID)) {
        var log = document.createElement('pre');
        log.id = DOM_ID;
        log.style.whiteSpace = 'pre-wrap';
        log.textContent = errorText;
        if (!document.body) document.body = document.createElement('body');
        document.body.insertBefore(log, document.body.firstChild);
    } else {
        document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
    }

    // Example: log the error to remote service.
    // Note: you can log errors to a remote service, to understand
    //       and monitor the types of errors encountered by regular users,
    //       Googlebot, and other crawlers.
    var client = new XMLHttpRequest();
    client.open('POST', 'https://example.com/logError');
    client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
    client.send(errorText);

});

추가 도움이 필요하면 웹마스터 도움말 포럼을 방문하세요.

다음에 대한 의견 보내기...