Signal the preferred URL among duplicate or very similar addresses.
<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%}}A canonical URL signals a preferred address when several URLs show the same or very similar content. It helps consolidate duplicates created by tracking parameters or sort options.
The demo merges three addresses into one preferred URL. Canonicalization is a hint to search engines, so inconsistent content and internal links can lead them to choose another URL.
Use it when filters or parameters expose the same content at multiple URLs.