대표 URL은 여러 주소가 같은 내용을 보여줄 때 선호하는 한 주소를 알리는 신호입니다. 추적 매개변수나 정렬 옵션으로 생긴 중복 URL을 정리하는 데 도움이 됩니다.
데모에서 세 주소가 한 대표 주소로 모입니다. canonical은 검색 엔진에 보내는 힌트이므로 실제 내용과 내부 링크가 어긋나면 다른 주소가 선택될 수 있습니다.
언제 쓰나
필터·매개변수로 동일 콘텐츠가 여러 URL에 열릴 때 사용합니다.
대표 URL
Canonical URL
비슷하거나 중복된 주소 중 검색에 대표로 제시할 URL을 알립니다.
···
<div class="canon"><div class="variants"><div>/shop?sort=new</div><div>/shop?ref=mail</div><div>/shop</div></div><div class="join">⟶</div><div class="primary"><span>CANONICAL</span><b>/shop</b></div></div>.canon{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vmin,28px);width:95%;font:800 clamp(10px,max(1.9vmin,1vw),16px) sans-serif;color:var(--fg)}.variants{display:grid;gap:clamp(7px,1.4vmin,13px)}.variants div{padding:clamp(7px,1.5vmin,13px);border:1px solid var(--line);border-radius:5px;background:var(--surface);animation:fold 3.6s infinite}.variants div:nth-child(2){animation-delay:.25s}.variants div:nth-child(3){animation-delay:.5s}.join{font-size:clamp(23px,5vmin,44px);color:var(--accent)}.primary{display:grid;gap:4px;border:3px solid var(--accent);padding:clamp(10px,2.2vmin,21px);background:var(--surface);box-shadow:5px 5px 0 var(--accent);animation:glow 3.6s infinite}.primary span{font-size:max(10px,1vw,.65em);color:var(--accent);letter-spacing:.12em}@keyframes fold{0%,20%{opacity:1}60%,85%{opacity:.4;transform:translateX(8px)}100%{opacity:1}}@keyframes glow{50%{box-shadow:8px 8px 0 var(--accent)}}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}