rel=canonical 없음
콘텐츠 페이지가 아닌 도메인의 루트 URL(홈페이지)을 가리킴. 크롤러가 앱 콘텐츠를 효과적으로 파악할 수 있도록 HTML 형식을 지정하세요.
rel="canonical" 링크는 검색 엔진 최적화(SEO)에서 중요한 역할을 하며, 이를 적절히 설정하지 않으면 여러 가지 부정적인 결과를 초래할 수 있습니다. 따라서 사이트에 유효한 canonical 링크를 포함하는 것이 매우 중요합니다.
rel=canonical 없음 문제
"문서에 유효한 rel=canonical 없음"으로 발생할 수 있는 문제는 다음과 같습니다.
- 중복 콘텐츠 문제: 동일한 또는 유사한 콘텐츠를 가진 여러 페이지가 있을 경우, 검색 엔진은 어떤 페이지를 인덱싱해야 할지 혼란스러워할 수 있습니다. 이로 인해 중복 콘텐츠로 간주될 수 있으며, 검색 결과에서 페이지의 순위가 하락할 수 있습니다.
- SEO 효율성 감소: 검색 엔진은 페이지의 권위와 신뢰성을 평가할 때 canonical URL을 참조합니다. 유효한 canonical 링크가 없으면, 페이지가 검색 결과에서 제대로 평가받지 못하고, 다른 페이지와의 경쟁에서 불리할 수 있습니다.
- 트래픽 감소: 중복 콘텐츠로 인해 특정 페이지가 검색 결과에서 제외되거나 순위가 낮아지면, 해당 페이지로의 유입 트래픽이 감소할 수 있습니다. 이는 비즈니스나 사이트의 목표 달성에 부정적인 영향을 미칠 수 있습니다.
- 크롤링 및 인덱싱 문제: 검색 엔진은 페이지를 크롤링하고 인덱싱할 때 canonical 링크를 참조하여, 어떤 페이지를 우선적으로 인덱싱 할지 결정합니다. 유효한 canonical 링크가 없으면, 검색 엔진이 잘못된 페이지를 인덱싱할 수 있습니다.
- 사용자 경험 저하: 사용자가 동일한 콘텐츠를 가진 여러 페이지를 발견하게 되면, 혼란을 느끼고 사이트에 대한 신뢰도가 떨어질 수 있습니다. 이는 사용자 경험에 부정적인 영향을 미칠 수 있습니다.
rel="canonical" 링크는 검색 엔진 최적화(SEO)에서 중요한 역할을 하며, 이를 적절히 설정하지 않으면 여러 가지 부정적인 결과를 초래할 수 있습니다. 따라서 사이트에 유효한 canonical 링크를 포함하는 것이 매우 중요합니다.
rel=canonical 없음 해결 방법
아래 제공되는 jQuery와 Vanilla JavaScript 두 가지 중 자신에게 맞는 것으로 body사이에 입력하시면 되겠습니다.
jQuery
$(document).ready(function() {
var canonicalUrl = window.location.origin + window.location.pathname;
if ($('link[rel="canonical"]').length > 0) {
$('link[rel="canonical"]').attr('href', canonicalUrl);
} else {
$('head').append('<link rel="canonical" href="' + canonicalUrl + '">');
}
});
jQuery 설명:
- canonical URL 생성: window.location.origin은 현재 페이지의 도메인을 가져오고, window.location.pathname은 현재 페이지의 경로를 가져옵니다. 두 값을 결합하여 현재 페이지의 canonical URL을 생성합니다.
- canonical 링크 확인: $('link[rel="canonical"]').length > 0는 이미
link rel="canonical"요소가 존재하는지 확인합니다. - 링크 수정 또는 추가: 만약 canonical 링크가 존재하면, 해당 링크의 href 속성을 생성한 canonicalUrl로 업데이트합니다. 존재하지 않으면,
head태그 안에 새로운 canonical 링크를 추가합니다.
Vanilla JavaScript
document.addEventListener("DOMContentLoaded", function() {
// 페이지별 canonical URL을 저장하는 변수
var canonicalUrl = window.location.origin + window.location.pathname;
// canonical 링크 요소 찾기
var canonicalLink = document.querySelector('link[rel="canonical"]');
if (canonicalLink) {
// 존재하면 href 속성 업데이트
canonicalLink.setAttribute('href', canonicalUrl);
} else {
// 존재하지 않으면 새 링크 요소 추가
canonicalLink = document.createElement('link');
canonicalLink.rel = 'canonical';
canonicalLink.href = canonicalUrl;
document.head.appendChild(canonicalLink);
}
});
Vanilla JavaScript 설명:
- DOMContentLoaded 이벤트: 페이지의 DOM이 완전히 로드된 후에 스크립트가 실행되도록 합니다.
- querySelector: jQuery의 $('link[rel="canonical"]') 대신에 Vanilla JS의 document.querySelector를 사용하여 canonical 링크 요소를 찾습니다.
- setAttribute: href 속성을 업데이트할 때 setAttribute 메서드를 사용합니다.
- createElement: 새 canonical 링크 요소를 만들 때 document.createElement를 사용합니다.
문제 해결 결과
스크립트의 주목적은 검색 엔진 최적화(SEO)를 위해 페이지의 대표 URL을 명시하여 중복 콘텐츠 문제를 방지하는 것입니다. 위 스크립트를 사용하여 여러분의 블로그에 좋은 영향이 있기를 바랍니다.