hreflang은 같은 목적의 페이지가 여러 언어·지역으로 제공될 때 대체 URL 관계를 알리는 주석입니다. 이용자에게 맞는 버전을 찾는 데 도움을 줍니다.
데모에서 언어를 바꾸면 연결된 URL 카드가 바뀝니다. 번역 페이지끼리 양방향으로 관계를 선언하고 실제로 내용이 대응하는지 점검하세요. hreflang은 자동 번역이나 지역 타깃팅 자체를 수행하지 않습니다.
언제 쓰나
동일한 제품·도움말을 여러 언어 또는 지역 URL로 운영할 때 씁니다.
다국어 대체 페이지
Hreflang
언어·지역별 동등한 페이지의 관계를 검색 엔진에 알립니다.
···
<div class="locale"><div class="world">◎</div><div class="tabs"><button data-lang="ko" class="on">KO</button><button data-lang="en">EN</button><button data-lang="ja">JA</button></div><div class="dest" id="dest">example.test/ko/guide</div><div class="routes"><span>/ko/guide</span><span>/en/guide</span><span>/ja/guide</span></div></div>.locale{width:min(88%,550px);display:grid;justify-items:center;gap:clamp(8px,2vmin,18px);font:800 clamp(10px,max(1.9vmin,1vw),16px) sans-serif;color:var(--fg)}.world{font-size:clamp(28px,6vmin,55px);color:var(--accent);line-height:1;animation:spin 6s linear infinite}.tabs{display:flex;gap:5px}.tabs button{border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:6px clamp(8px,2vmin,18px);font:inherit;cursor:pointer}.tabs button.on{background:var(--accent);border-color:var(--accent);color:white}.dest{border:2px solid var(--fg);padding:clamp(9px,1.8vmin,17px);background:var(--surface);width:100%;text-align:center}.routes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;color:var(--muted);font-size:max(10px,1vw,.7em)}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}const buttons=[...document.querySelectorAll('[data-lang]')],dest=document.querySelector('#dest');let n=0;function show(){buttons.forEach((b,i)=>b.classList.toggle('on',i===n));dest.textContent='example.test/'+buttons[n].dataset.lang+'/guide'}buttons.forEach((b,i)=>b.addEventListener('click',()=>{clearInterval(timer);n=i;show()}));const timer=setInterval(()=>{n=(n+1)%3;show()},2400);