실무에 바로 적용할 수 있는 웹 제작 꿀팁 및 유용한 자료실 공간입니다.
나눔웹이 제공하는 핵심 노하우와 마케팅 인사이트를 자유롭게 활용해 보십시오.

나눔웹 마케팅 꿀팁

canonical 태그 설정법, 같은 페이지가 주소 여러 개로 검색될 때 정리하는 순서

canonical 태그는 같은 내용이 여러 주소로 열릴 때 "이 주소가 대표입니다"라고 검색엔진에 알려 주는 한 줄입니다. www가 붙은 주소와 안 붙은 주소, 광고용 꼬리표가 달린 주소가 따로 수집되면 검색 평가가 나뉘고 엉뚱한 주소가 노출되기도 합니다.
대표 주소를 정하고 canonical과 리디렉션으로 정리하는 순서를 실무 기준으로 적어 봤습니다.

💡 우리 사이트도 주소가 여러 개일까요?

오래 운영한 홈페이지일수록 그럴 가능성이 높습니다. 리뉴얼 전에 점검해 보면 http와 https가 둘 다 열리거나, index.php?mid=... 형태의 옛 주소와 새 짧은 주소가 함께 살아 있는 경우가 흔합니다. 방문자는 같은 화면을 보지만 검색엔진 입장에서는 서로 다른 페이지 여러 개로 보일 수 있습니다.

1. 대표 주소부터 하나로 정하기

태그를 넣기 전에 기준이 될 주소 형태를 먼저 정해야 합니다. 아래 항목마다 한쪽을 고르고, 사이트 안의 메뉴 링크와 사이트맵도 같은 형태로 맞춥니다. 내부 링크는 www 없이, 사이트맵은 www를 붙여 적는 식으로 섞여 있으면 검색엔진이 어느 쪽을 믿어야 할지 헷갈립니다.

자주 생기는 중복 정리 방법
http / httpshttps로 301 리디렉션
www 유무한쪽으로 301 리디렉션
UTM 등 꼬리표 주소canonical로 원래 주소 지정
옛 주소 형식새 주소로 301, canonical 병행

2. canonical 태그 넣는 법

각 페이지의 <head> 안에 자기 대표 주소를 적습니다. 상대경로보다 https부터 시작하는 전체 주소로 쓰는 편이 안전하고, 대표 페이지 자신에게도 자기 주소를 넣어 두는 것이 좋습니다.

<!-- 꼬리표가 붙은 주소로 열려도 대표 주소는 하나 -->
<!-- 예) /event?utm_source=kakao 로 열린 경우 -->
<link rel="canonical"
      href="https://www.example.com/event">

canonical은 검색엔진에 주는 강한 힌트이지 명령은 아닙니다. 그래서 http나 www처럼 아예 한쪽을 쓰지 않을 주소는 canonical만 믿지 말고 서버에서 301 리디렉션으로 넘겨 주는 것이 확실합니다. 아파치 서버라면 보통 .htaccess에 규칙을 둡니다.

# http로 들어오면 https 주소로 영구 이동
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]

3. 넣고 나서 흔히 하는 실수

  • 게시판 2페이지, 3페이지의 canonical을 모두 1페이지로 지정하는 경우입니다. 내용이 다른 페이지이므로 각자 자기 주소를 적어야 합니다.
  • 솔루션이 이미 canonical을 출력하는데 스킨에 한 줄을 더 넣어 태그가 두 개가 되는 경우입니다. 값이 서로 다르면 둘 다 무시될 수 있습니다.
  • 개발 서버 주소를 적어 둔 채 오픈하는 경우입니다. 리뉴얼 직후에 소스 보기로 한 번은 꼭 확인하세요.

적용 후에는 구글 서치 콘솔의 URL 검사에서 '사용자가 선언한 표준 URL'과 'Google이 선택한 표준 URL'이 같은지 확인할 수 있습니다. 바로 바뀌지 않고 다시 수집될 때까지 시간이 걸리니 며칠 간격을 두고 보시면 됩니다.

"주소가 하나로 모여야 검색 평가도 한곳에 쌓입니다."

나눔웹은 리뉴얼을 오픈하기 전에 옛 주소와 새 주소의 연결부터 점검해,
그동안 쌓아 온 검색 노출이 끊기지 않도록 챙깁니다.


List of Articles
번호 분류 제목 글쓴이
46 웹 성능 홈페이지 로딩 속도를 3배 높이는 '이미지 최적화' 실무 가이드 나눔웹
45 퍼블리싱 CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties) 나눔웹
44 마케팅 카카오톡 링크 썸네일의 비밀! 클릭률을 높이는 '오픈 그래프(OG)' 세팅법 나눔웹
43 모바일 모바일 꽉 찬 화면 하단 짤림 현상! '100vh'의 함정과 완벽 해결법 나눔웹
42 웹 성능 홈페이지 첫 화면 글자 깜빡임(투명 현상) 1초 만에 해결하는 법 나눔웹
41 퍼블리싱 스마트폰에서 로고가 흐리게 보인다고요? 'SVG' 포맷이 정답입니다. 나눔웹
40 웹 성능 클릭 실수 유발하는 '화면 덜컹거림(CLS)', 단 한 줄로 해결하는 법 나눔웹
39 모바일 고객의 이탈을 막는 1초 디테일, '모바일 맞춤형 키보드' 세팅법 나눔웹
38 UI/UX 모바일에서 버튼 누를 때 생기는 촌스러운 '회색 박스' 없애는 법 나눔웹
37 UI/UX 레이아웃을 망치는 긴 글, 예쁘게 '...'으로 자르는 마법의 CSS 나눔웹
36 UI/UX 상단 메뉴에 제목이 가려진다고요? '부드러운 스크롤' 마법의 2줄 나눔웹
35 모바일 아이폰에서 입력창 누를 때 화면 '자동 확대'되는 현상 막는 법 나눔웹
34 퍼블리싱 지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS 나눔웹
33 모바일 모바일 웹을 진짜 '앱(App)'처럼! 이미지 꾹 누를 때 뜨는 팝업 막기 나눔웹
32 UI/UX 애플(Apple) 사이트처럼 고급스러운 '반투명 유리' 메뉴 만드는 법 나눔웹
31 퍼블리싱 무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기 나눔웹
30 UI/UX 1%의 디테일이 브랜딩을 완성합니다! '텍스트 드래그 색상' 바꾸기 나눔웹
29 UI/UX 투박한 파란색 체크박스는 그만! 단 1줄로 우리 회사 컬러 입히기 나눔웹
28 모바일 하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법) 나눔웹
27 모바일 앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법 (Overscroll) 나눔웹
Board Pagination Prev 1 2 3 Next
/ 3
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4