"블로그스팟 리디렉션 오류 해결: 에센셜 테마 캐노니컬(href='') 완벽 수선법"

현재 사용 중인 테마는 구글에서 기본으로 제공하는 에센셜 테마, 반응형 디자인에 로딩 속도마저 빠르다. 단점이 있다면 에센셜 테마는 캐노니컬 오류로 악명이 높다고 한다. href=' '(빈 주소)를 만드는 버그를 발견했다면, 다음의 2가지 코드로 해결하자.

href=' '(빈 주소) 생성을 막아줄 코드 2가지

1. 해결법: 자바스크립트로 동적 복구하기

이 스크립트는 페이지 로드 후 href=' '로 비어 있는 캐노니컬 태그를 찾아 현재 주소로 강제 할당하는 역할.
태그가 누락되었다면 새로 생성하여 사후에 복구하는 강력한 방식임.

블로그스팟 관리자 [테마] → [HTML 편집]에서 </head> 바로 윗줄에 아래의 자바스크립트 코드를 복사해서 붙여넣는다.

JavaScript


<script type='text/javascript'>
//<![CDATA[
  (function() {
    var realUrl = window.location.href.split(/[?#]/)[0];
    var canonical = document.querySelector("link[rel='canonical']");
    if (canonical) {
      canonical.setAttribute('href', realUrl);
    } else {
      var linkTag = document.createElement('link');
      linkTag.rel = 'canonical';
      linkTag.href = realUrl;
      document.head.appendChild(linkTag);
    }
  })();
//]]>
</script>

- JavaScript 코드 삽입 화면.

블로그스팟 테마 편집기에서 캐노니컬 오류 수정을 위한 자바스크립트 코드를 </head> 위에 삽입 이미지

블로그스팟 자바스크립트(JS) 코드 삽입 위치 가이드

2. 해결법: 블로거 데이터 태그(Blogger HTML)로 서버 설정하기

이 코드는 블로그스팟 엔진 자체에 "이 페이지의 원본 주소는 이거야"라고 선언하는 방식.
코드 삽입 위치: <head> 바로 아래.

페이지가 만들어질 때 구글 서버에 "이게 내 진짜 주소야!"라고 알려주는 역할을 하는 HTML 코드는 <b:include data='blog' name='all-head-content'/> 아래 복사해서 붙여넣는다.

HTML


  <b:if cond='data:view.isPost'>
    <link expr:href='data:blog.url.primary' rel='canonical'/>
  <b:else/>
    <b:if cond='data:view.isHomepage'>
      <link expr:href='data:blog.homepageUrl' rel='canonical'/>
    </b:if>
  </b:if>

- Blogger HTML 코드 삽입 화면.

블로그스팟 HTML 편집 화면에서 데이터 태그를 이용해 캐노니컬 주소를 서버에 선언하는 코드 삽입 이미지

블로그스팟 데이터 태그(HTML) 삽입 위치 가이드

오늘의 한마디

구글 서치콘솔에 색인이 잘 되고 리디렉션 오류가 없다면, 아! 이 글을 볼 일이 없겠구나.

암튼, 그게 아니라면 위 2개의 코드를 기억하자. 둘 중 하나를 넣는 것이 아닌 1번(JS), 2번(HTML/Blogger Tag) 모두 필요!

두 코드는 서로 보완하는 관계로 하나는 서버에서 주소를 선언하고, 다른 하나는 브라우저에서 혹시 모를 오류를 한 번 더 잡아주기 때문에 반드시 두 코드를 모두 적용하는 것을 권장한다.

unsplash@laura chouette

내용 추가: 2026.01.28

querySelector → querySelectorAll

위의 2가지 코드를 적용해도 구글 서치콘솔에서 색인 요청 시, 사용자 선언 표준 URL이 '없음'으로 나온다면 코드를 바꿔보자.

- JavaScript 코드 삽입 위치: </body> 바로 위 영역.

JavaScript


<script type='text/javascript'>
//<![CDATA[
  (function() {
    var realUrl = window.location.href.split(/[?#]/)[0];
    var canonicals = document.querySelectorAll("link[rel='canonical']");
    canonicals.forEach(function(el) {
      el.setAttribute('href', realUrl);
    });
  })();
//]]>
</script>

- HTML 코드 삽입 위치: <head>안의 <b:include data='blog' name='all-head-content'/> 바로 윗줄에 배치.

HTML


<link expr:href='data:blog.canonicalUrl' rel='canonical'/>

구글 서치콘솔에서 이렇게 사용자 선언 표준 URL이 본인의 주소로 정확히 나온다면, 이제 남은 건 색인 생성 가속화 그리고 리디렉션 오류도 점차 줄어들 것!

구글 서치콘솔 실시간 URL 테스트 화면에 사용자 선언 표준 URL에 주소나 나옴

구글 서치콘솔 사용자 선언 표준 URL 주소 확인

/* 추가 내용 끝 */

이 블로그 검색

더한스픽