HTML DOM 앵커 hreflang 속성이란?
HTML DOM 앵커(Anchor) 객체의 hreflang 속성은 <a> 태그로 생성한 링크에서 hreflang 속성값을 가져오거나 새로 설정할 때 사용합니다. hreflang 속성은 링크된 문서가 어떤 언어로 작성되었는지 브라우저와 검색 엔진에 알려주는 역할을 합니다.
hreflang 속성 설정 구문
hreflang 속성값을 설정하는 기본 구문은 다음과 같습니다.
anchorObj.hreflang = language_code
여기서 language_code는 링크된 문서의 언어를 나타내는 코드입니다. 대표적인 언어 코드 예시는 다음과 같습니다.
- en – 영어
- bn – 벵골어
- hi – 힌디어
- fr – 프랑스어
- la – 라틴어
- ru – 러시아어
hreflang 속성 값 반환 구문
현재 설정된 hreflang 속성값을 읽어올 때는 다음 구문을 사용합니다.
anchorObj.hreflang
예제: DOM 앵커 hreflang 속성 활용하기
아래 예제는 버튼을 클릭했을 때 링크의 href 부분, 호스트(host) 부분, 그리고 hreflang 값을 각각 화면에 출력하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" hreflang="en" href="https://www.abc.com:6064/abc/products.html">Products</a></p>
<h2 id="myid"></h2>
<button onclick="display()">Display href Part</button>
<button onclick="display2()">Display Host Part</button>
<button onclick="display3()">Display hreflang</button>
<script>
function display() {
var a = document.getElementById("mylink").href;
document.getElementById("myid").innerHTML = a;
}
function display2() {
var a = document.getElementById("mylink").host;
document.getElementById("myid").innerHTML = a;
}
function display3() {
var a = document.getElementById("mylink").hreflang;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>실행 결과
위 페이지에서 “Display hreflang” 버튼을 클릭하면, 링크에 설정된 hreflang 값이 아래와 같이 화면에 표시됩니다.
참고: hreflang 속성의 활용 가치
hreflang 속성은 다국어 웹사이트를 운영할 때 특히 유용합니다. 검색 엔진은 이 속성을 참고해 사용자의 언어 환경에 맞는 문서 버전을 노출할 수 있고, 브라우저 역시 링크된 페이지의 언어를 미리 파악하여 더 나은 사용자 경험을 제공할 수 있습니다.